You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@senssoft.apache.org by ar...@apache.org on 2016/10/21 16:12:35 UTC
[42/48] incubator-senssoft-tap git commit: Cherry pick front end
bundle
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/behaviors/visibility.js
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/behaviors/visibility.js b/semantic/src/definitions/behaviors/visibility.js
new file mode 100644
index 0000000..f2f186c
--- /dev/null
+++ b/semantic/src/definitions/behaviors/visibility.js
@@ -0,0 +1,1283 @@
+/*!
+ * # Semantic UI - Visibility
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.visibility = function(parameters) {
+ var
+ $allModules = $(this),
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+ returnedValue,
+
+ moduleCount = $allModules.length,
+ loadedCount = 0
+ ;
+
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.visibility.settings, parameters)
+ : $.extend({}, $.fn.visibility.settings),
+
+ className = settings.className,
+ namespace = settings.namespace,
+ error = settings.error,
+ metadata = settings.metadata,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = 'module-' + namespace,
+
+ $window = $(window),
+
+ $module = $(this),
+ $context = $(settings.context),
+
+ $placeholder,
+
+ selector = $module.selector || '',
+ instance = $module.data(moduleNamespace),
+
+ requestAnimationFrame = window.requestAnimationFrame
+ || window.mozRequestAnimationFrame
+ || window.webkitRequestAnimationFrame
+ || window.msRequestAnimationFrame
+ || function(callback) { setTimeout(callback, 0); },
+
+ element = this,
+ disabled = false,
+
+ contextObserver,
+ observer,
+ module
+ ;
+
+ module = {
+
+ initialize: function() {
+ module.debug('Initializing', settings);
+
+ module.setup.cache();
+
+ if( module.should.trackChanges() ) {
+
+ if(settings.type == 'image') {
+ module.setup.image();
+ }
+ if(settings.type == 'fixed') {
+ module.setup.fixed();
+ }
+
+ if(settings.observeChanges) {
+ module.observeChanges();
+ }
+ module.bind.events();
+ }
+
+ module.save.position();
+ if( !module.is.visible() ) {
+ module.error(error.visible, $module);
+ }
+
+ if(settings.initialCheck) {
+ module.checkVisibility();
+ }
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.debug('Storing instance', module);
+ $module
+ .data(moduleNamespace, module)
+ ;
+ instance = module;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying previous module');
+ if(observer) {
+ observer.disconnect();
+ }
+ if(contextObserver) {
+ contextObserver.disconnect();
+ }
+ $window
+ .off('load' + eventNamespace, module.event.load)
+ .off('resize' + eventNamespace, module.event.resize)
+ ;
+ $context
+ .off('scroll' + eventNamespace, module.event.scroll)
+ .off('scrollchange' + eventNamespace, module.event.scrollchange)
+ ;
+ if(settings.type == 'fixed') {
+ module.resetFixed();
+ module.remove.placeholder();
+ }
+ $module
+ .off(eventNamespace)
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ observeChanges: function() {
+ if('MutationObserver' in window) {
+ contextObserver = new MutationObserver(module.event.contextChanged);
+ observer = new MutationObserver(module.event.changed);
+ contextObserver.observe(document, {
+ childList : true,
+ subtree : true
+ });
+ observer.observe(element, {
+ childList : true,
+ subtree : true
+ });
+ module.debug('Setting up mutation observer', observer);
+ }
+ },
+
+ bind: {
+ events: function() {
+ module.verbose('Binding visibility events to scroll and resize');
+ if(settings.refreshOnLoad) {
+ $window
+ .on('load' + eventNamespace, module.event.load)
+ ;
+ }
+ $window
+ .on('resize' + eventNamespace, module.event.resize)
+ ;
+ // pub/sub pattern
+ $context
+ .off('scroll' + eventNamespace)
+ .on('scroll' + eventNamespace, module.event.scroll)
+ .on('scrollchange' + eventNamespace, module.event.scrollchange)
+ ;
+ }
+ },
+
+ event: {
+ changed: function(mutations) {
+ module.verbose('DOM tree modified, updating visibility calculations');
+ module.timer = setTimeout(function() {
+ module.verbose('DOM tree modified, updating sticky menu');
+ module.refresh();
+ }, 100);
+ },
+ contextChanged: function(mutations) {
+ [].forEach.call(mutations, function(mutation) {
+ if(mutation.removedNodes) {
+ [].forEach.call(mutation.removedNodes, function(node) {
+ if(node == element || $(node).find(element).length > 0) {
+ module.debug('Element removed from DOM, tearing down events');
+ module.destroy();
+ }
+ });
+ }
+ });
+ },
+ resize: function() {
+ module.debug('Window resized');
+ if(settings.refreshOnResize) {
+ requestAnimationFrame(module.refresh);
+ }
+ },
+ load: function() {
+ module.debug('Page finished loading');
+ requestAnimationFrame(module.refresh);
+ },
+ // publishes scrollchange event on one scroll
+ scroll: function() {
+ if(settings.throttle) {
+ clearTimeout(module.timer);
+ module.timer = setTimeout(function() {
+ $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
+ }, settings.throttle);
+ }
+ else {
+ requestAnimationFrame(function() {
+ $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
+ });
+ }
+ },
+ // subscribes to scrollchange
+ scrollchange: function(event, scrollPosition) {
+ module.checkVisibility(scrollPosition);
+ },
+ },
+
+ precache: function(images, callback) {
+ if (!(images instanceof Array)) {
+ images = [images];
+ }
+ var
+ imagesLength = images.length,
+ loadedCounter = 0,
+ cache = [],
+ cacheImage = document.createElement('img'),
+ handleLoad = function() {
+ loadedCounter++;
+ if (loadedCounter >= images.length) {
+ if ($.isFunction(callback)) {
+ callback();
+ }
+ }
+ }
+ ;
+ while (imagesLength--) {
+ cacheImage = document.createElement('img');
+ cacheImage.onload = handleLoad;
+ cacheImage.onerror = handleLoad;
+ cacheImage.src = images[imagesLength];
+ cache.push(cacheImage);
+ }
+ },
+
+ enableCallbacks: function() {
+ module.debug('Allowing callbacks to occur');
+ disabled = false;
+ },
+
+ disableCallbacks: function() {
+ module.debug('Disabling all callbacks temporarily');
+ disabled = true;
+ },
+
+ should: {
+ trackChanges: function() {
+ if(methodInvoked) {
+ module.debug('One time query, no need to bind events');
+ return false;
+ }
+ module.debug('Callbacks being attached');
+ return true;
+ }
+ },
+
+ setup: {
+ cache: function() {
+ module.cache = {
+ occurred : {},
+ screen : {},
+ element : {},
+ };
+ },
+ image: function() {
+ var
+ src = $module.data(metadata.src)
+ ;
+ if(src) {
+ module.verbose('Lazy loading image', src);
+ settings.once = true;
+ settings.observeChanges = false;
+
+ // show when top visible
+ settings.onOnScreen = function() {
+ module.debug('Image on screen', element);
+ module.precache(src, function() {
+ module.set.image(src, function() {
+ loadedCount++;
+ if(loadedCount == moduleCount) {
+ settings.onAllLoaded.call(this);
+ }
+ settings.onLoad.call(this);
+ });
+ });
+ };
+ }
+ },
+ fixed: function() {
+ module.debug('Setting up fixed');
+ settings.once = false;
+ settings.observeChanges = false;
+ settings.initialCheck = true;
+ settings.refreshOnLoad = true;
+ if(!parameters.transition) {
+ settings.transition = false;
+ }
+ module.create.placeholder();
+ module.debug('Added placeholder', $placeholder);
+ settings.onTopPassed = function() {
+ module.debug('Element passed, adding fixed position', $module);
+ module.show.placeholder();
+ module.set.fixed();
+ if(settings.transition) {
+ if($.fn.transition !== undefined) {
+ $module.transition(settings.transition, settings.duration);
+ }
+ }
+ };
+ settings.onTopPassedReverse = function() {
+ module.debug('Element returned to position, removing fixed', $module);
+ module.hide.placeholder();
+ module.remove.fixed();
+ };
+ }
+ },
+
+ create: {
+ placeholder: function() {
+ module.verbose('Creating fixed position placeholder');
+ $placeholder = $module
+ .clone(false)
+ .css('display', 'none')
+ .addClass(className.placeholder)
+ .insertAfter($module)
+ ;
+ }
+ },
+
+ show: {
+ placeholder: function() {
+ module.verbose('Showing placeholder');
+ $placeholder
+ .css('display', 'block')
+ .css('visibility', 'hidden')
+ ;
+ }
+ },
+ hide: {
+ placeholder: function() {
+ module.verbose('Hiding placeholder');
+ $placeholder
+ .css('display', 'none')
+ .css('visibility', '')
+ ;
+ }
+ },
+
+ set: {
+ fixed: function() {
+ module.verbose('Setting element to fixed position');
+ $module
+ .addClass(className.fixed)
+ .css({
+ position : 'fixed',
+ top : settings.offset + 'px',
+ left : 'auto',
+ zIndex : settings.zIndex
+ })
+ ;
+ settings.onFixed.call(element);
+ },
+ image: function(src, callback) {
+ $module
+ .attr('src', src)
+ ;
+ if(settings.transition) {
+ if( $.fn.transition !== undefined ) {
+ $module.transition(settings.transition, settings.duration, callback);
+ }
+ else {
+ $module.fadeIn(settings.duration, callback);
+ }
+ }
+ else {
+ $module.show();
+ }
+ }
+ },
+
+ is: {
+ onScreen: function() {
+ var
+ calculations = module.get.elementCalculations()
+ ;
+ return calculations.onScreen;
+ },
+ offScreen: function() {
+ var
+ calculations = module.get.elementCalculations()
+ ;
+ return calculations.offScreen;
+ },
+ visible: function() {
+ if(module.cache && module.cache.element) {
+ return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);
+ }
+ return false;
+ }
+ },
+
+ refresh: function() {
+ module.debug('Refreshing constants (width/height)');
+ if(settings.type == 'fixed') {
+ module.resetFixed();
+ }
+ module.reset();
+ module.save.position();
+ if(settings.checkOnRefresh) {
+ module.checkVisibility();
+ }
+ settings.onRefresh.call(element);
+ },
+
+ resetFixed: function () {
+ module.remove.fixed();
+ module.remove.occurred();
+ },
+
+ reset: function() {
+ module.verbose('Resetting all cached values');
+ if( $.isPlainObject(module.cache) ) {
+ module.cache.screen = {};
+ module.cache.element = {};
+ }
+ },
+
+ checkVisibility: function(scroll) {
+ module.verbose('Checking visibility of element', module.cache.element);
+
+ if( !disabled && module.is.visible() ) {
+
+ // save scroll position
+ module.save.scroll(scroll);
+
+ // update calculations derived from scroll
+ module.save.calculations();
+
+ // percentage
+ module.passed();
+
+ // reverse (must be first)
+ module.passingReverse();
+ module.topVisibleReverse();
+ module.bottomVisibleReverse();
+ module.topPassedReverse();
+ module.bottomPassedReverse();
+
+ // one time
+ module.onScreen();
+ module.offScreen();
+ module.passing();
+ module.topVisible();
+ module.bottomVisible();
+ module.topPassed();
+ module.bottomPassed();
+
+ // on update callback
+ if(settings.onUpdate) {
+ settings.onUpdate.call(element, module.get.elementCalculations());
+ }
+ }
+ },
+
+ passed: function(amount, newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ amountInPixels
+ ;
+ // assign callback
+ if(amount && newCallback) {
+ settings.onPassed[amount] = newCallback;
+ }
+ else if(amount !== undefined) {
+ return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);
+ }
+ else if(calculations.passing) {
+ $.each(settings.onPassed, function(amount, callback) {
+ if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {
+ module.execute(callback, amount);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callback);
+ }
+ });
+ }
+ },
+
+ onScreen: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onOnScreen,
+ callbackName = 'onScreen'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for onScreen', newCallback);
+ settings.onOnScreen = newCallback;
+ }
+ if(calculations.onScreen) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return calculations.onOnScreen;
+ }
+ },
+
+ offScreen: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onOffScreen,
+ callbackName = 'offScreen'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for offScreen', newCallback);
+ settings.onOffScreen = newCallback;
+ }
+ if(calculations.offScreen) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return calculations.onOffScreen;
+ }
+ },
+
+ passing: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onPassing,
+ callbackName = 'passing'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for passing', newCallback);
+ settings.onPassing = newCallback;
+ }
+ if(calculations.passing) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return calculations.passing;
+ }
+ },
+
+
+ topVisible: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopVisible,
+ callbackName = 'topVisible'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top visible', newCallback);
+ settings.onTopVisible = newCallback;
+ }
+ if(calculations.topVisible) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.topVisible;
+ }
+ },
+
+ bottomVisible: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomVisible,
+ callbackName = 'bottomVisible'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom visible', newCallback);
+ settings.onBottomVisible = newCallback;
+ }
+ if(calculations.bottomVisible) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.bottomVisible;
+ }
+ },
+
+ topPassed: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopPassed,
+ callbackName = 'topPassed'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top passed', newCallback);
+ settings.onTopPassed = newCallback;
+ }
+ if(calculations.topPassed) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.topPassed;
+ }
+ },
+
+ bottomPassed: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomPassed,
+ callbackName = 'bottomPassed'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom passed', newCallback);
+ settings.onBottomPassed = newCallback;
+ }
+ if(calculations.bottomPassed) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.bottomPassed;
+ }
+ },
+
+ passingReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onPassingReverse,
+ callbackName = 'passingReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for passing reverse', newCallback);
+ settings.onPassingReverse = newCallback;
+ }
+ if(!calculations.passing) {
+ if(module.get.occurred('passing')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return !calculations.passing;
+ }
+ },
+
+
+ topVisibleReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopVisibleReverse,
+ callbackName = 'topVisibleReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top visible reverse', newCallback);
+ settings.onTopVisibleReverse = newCallback;
+ }
+ if(!calculations.topVisible) {
+ if(module.get.occurred('topVisible')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.topVisible;
+ }
+ },
+
+ bottomVisibleReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomVisibleReverse,
+ callbackName = 'bottomVisibleReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom visible reverse', newCallback);
+ settings.onBottomVisibleReverse = newCallback;
+ }
+ if(!calculations.bottomVisible) {
+ if(module.get.occurred('bottomVisible')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.bottomVisible;
+ }
+ },
+
+ topPassedReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopPassedReverse,
+ callbackName = 'topPassedReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top passed reverse', newCallback);
+ settings.onTopPassedReverse = newCallback;
+ }
+ if(!calculations.topPassed) {
+ if(module.get.occurred('topPassed')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.onTopPassed;
+ }
+ },
+
+ bottomPassedReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomPassedReverse,
+ callbackName = 'bottomPassedReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom passed reverse', newCallback);
+ settings.onBottomPassedReverse = newCallback;
+ }
+ if(!calculations.bottomPassed) {
+ if(module.get.occurred('bottomPassed')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.bottomPassed;
+ }
+ },
+
+ execute: function(callback, callbackName) {
+ var
+ calculations = module.get.elementCalculations(),
+ screen = module.get.screenCalculations()
+ ;
+ callback = callback || false;
+ if(callback) {
+ if(settings.continuous) {
+ module.debug('Callback being called continuously', callbackName, calculations);
+ callback.call(element, calculations, screen);
+ }
+ else if(!module.get.occurred(callbackName)) {
+ module.debug('Conditions met', callbackName, calculations);
+ callback.call(element, calculations, screen);
+ }
+ }
+ module.save.occurred(callbackName);
+ },
+
+ remove: {
+ fixed: function() {
+ module.debug('Removing fixed position');
+ $module
+ .removeClass(className.fixed)
+ .css({
+ position : '',
+ top : '',
+ left : '',
+ zIndex : ''
+ })
+ ;
+ settings.onUnfixed.call(element);
+ },
+ placeholder: function() {
+ module.debug('Removing placeholder content');
+ if($placeholder) {
+ $placeholder.remove();
+ }
+ },
+ occurred: function(callback) {
+ if(callback) {
+ var
+ occurred = module.cache.occurred
+ ;
+ if(occurred[callback] !== undefined && occurred[callback] === true) {
+ module.debug('Callback can now be called again', callback);
+ module.cache.occurred[callback] = false;
+ }
+ }
+ else {
+ module.cache.occurred = {};
+ }
+ }
+ },
+
+ save: {
+ calculations: function() {
+ module.verbose('Saving all calculations necessary to determine positioning');
+ module.save.direction();
+ module.save.screenCalculations();
+ module.save.elementCalculations();
+ },
+ occurred: function(callback) {
+ if(callback) {
+ if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) {
+ module.verbose('Saving callback occurred', callback);
+ module.cache.occurred[callback] = true;
+ }
+ }
+ },
+ scroll: function(scrollPosition) {
+ scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;
+ module.cache.scroll = scrollPosition;
+ },
+ direction: function() {
+ var
+ scroll = module.get.scroll(),
+ lastScroll = module.get.lastScroll(),
+ direction
+ ;
+ if(scroll > lastScroll && lastScroll) {
+ direction = 'down';
+ }
+ else if(scroll < lastScroll && lastScroll) {
+ direction = 'up';
+ }
+ else {
+ direction = 'static';
+ }
+ module.cache.direction = direction;
+ return module.cache.direction;
+ },
+ elementPosition: function() {
+ var
+ element = module.cache.element,
+ screen = module.get.screenSize()
+ ;
+ module.verbose('Saving element position');
+ // (quicker than $.extend)
+ element.fits = (element.height < screen.height);
+ element.offset = $module.offset();
+ element.width = $module.outerWidth();
+ element.height = $module.outerHeight();
+ // store
+ module.cache.element = element;
+ return element;
+ },
+ elementCalculations: function() {
+ var
+ screen = module.get.screenCalculations(),
+ element = module.get.elementPosition()
+ ;
+ // offset
+ if(settings.includeMargin) {
+ element.margin = {};
+ element.margin.top = parseInt($module.css('margin-top'), 10);
+ element.margin.bottom = parseInt($module.css('margin-bottom'), 10);
+ element.top = element.offset.top - element.margin.top;
+ element.bottom = element.offset.top + element.height + element.margin.bottom;
+ }
+ else {
+ element.top = element.offset.top;
+ element.bottom = element.offset.top + element.height;
+ }
+
+ // visibility
+ element.topVisible = (screen.bottom >= element.top);
+ element.topPassed = (screen.top >= element.top);
+ element.bottomVisible = (screen.bottom >= element.bottom);
+ element.bottomPassed = (screen.top >= element.bottom);
+ element.pixelsPassed = 0;
+ element.percentagePassed = 0;
+
+ // meta calculations
+ element.onScreen = (element.topVisible && !element.bottomPassed);
+ element.passing = (element.topPassed && !element.bottomPassed);
+ element.offScreen = (!element.onScreen);
+
+ // passing calculations
+ if(element.passing) {
+ element.pixelsPassed = (screen.top - element.top);
+ element.percentagePassed = (screen.top - element.top) / element.height;
+ }
+ module.cache.element = element;
+ module.verbose('Updated element calculations', element);
+ return element;
+ },
+ screenCalculations: function() {
+ var
+ scroll = module.get.scroll()
+ ;
+ module.save.direction();
+ module.cache.screen.top = scroll;
+ module.cache.screen.bottom = scroll + module.cache.screen.height;
+ return module.cache.screen;
+ },
+ screenSize: function() {
+ module.verbose('Saving window position');
+ module.cache.screen = {
+ height: $context.height()
+ };
+ },
+ position: function() {
+ module.save.screenSize();
+ module.save.elementPosition();
+ }
+ },
+
+ get: {
+ pixelsPassed: function(amount) {
+ var
+ element = module.get.elementCalculations()
+ ;
+ if(amount.search('%') > -1) {
+ return ( element.height * (parseInt(amount, 10) / 100) );
+ }
+ return parseInt(amount, 10);
+ },
+ occurred: function(callback) {
+ return (module.cache.occurred !== undefined)
+ ? module.cache.occurred[callback] || false
+ : false
+ ;
+ },
+ direction: function() {
+ if(module.cache.direction === undefined) {
+ module.save.direction();
+ }
+ return module.cache.direction;
+ },
+ elementPosition: function() {
+ if(module.cache.element === undefined) {
+ module.save.elementPosition();
+ }
+ return module.cache.element;
+ },
+ elementCalculations: function() {
+ if(module.cache.element === undefined) {
+ module.save.elementCalculations();
+ }
+ return module.cache.element;
+ },
+ screenCalculations: function() {
+ if(module.cache.screen === undefined) {
+ module.save.screenCalculations();
+ }
+ return module.cache.screen;
+ },
+ screenSize: function() {
+ if(module.cache.screen === undefined) {
+ module.save.screenSize();
+ }
+ return module.cache.screen;
+ },
+ scroll: function() {
+ if(module.cache.scroll === undefined) {
+ module.save.scroll();
+ }
+ return module.cache.scroll;
+ },
+ lastScroll: function() {
+ if(module.cache.screen === undefined) {
+ module.debug('First scroll event, no last scroll could be found');
+ return false;
+ }
+ return module.cache.screen.top;
+ }
+ },
+
+ setting: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ settings[name] = value;
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ instance.save.scroll();
+ instance.save.calculations();
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.visibility.settings = {
+
+ name : 'Visibility',
+ namespace : 'visibility',
+
+ debug : false,
+ verbose : false,
+ performance : true,
+
+ // whether to use mutation observers to follow changes
+ observeChanges : true,
+
+ // check position immediately on init
+ initialCheck : true,
+
+ // whether to refresh calculations after all page images load
+ refreshOnLoad : true,
+
+ // whether to refresh calculations after page resize event
+ refreshOnResize : true,
+
+ // should call callbacks on refresh event (resize, etc)
+ checkOnRefresh : true,
+
+ // callback should only occur one time
+ once : true,
+
+ // callback should fire continuously whe evaluates to true
+ continuous : false,
+
+ // offset to use with scroll top
+ offset : 0,
+
+ // whether to include margin in elements position
+ includeMargin : false,
+
+ // scroll context for visibility checks
+ context : window,
+
+ // visibility check delay in ms (defaults to animationFrame)
+ throttle : false,
+
+ // special visibility type (image, fixed)
+ type : false,
+
+ // z-index to use with visibility 'fixed'
+ zIndex : '10',
+
+ // image only animation settings
+ transition : 'fade in',
+ duration : 1000,
+
+ // array of callbacks for percentage
+ onPassed : {},
+
+ // standard callbacks
+ onOnScreen : false,
+ onOffScreen : false,
+ onPassing : false,
+ onTopVisible : false,
+ onBottomVisible : false,
+ onTopPassed : false,
+ onBottomPassed : false,
+
+ // reverse callbacks
+ onPassingReverse : false,
+ onTopVisibleReverse : false,
+ onBottomVisibleReverse : false,
+ onTopPassedReverse : false,
+ onBottomPassedReverse : false,
+
+ // special callbacks for image
+ onLoad : function() {},
+ onAllLoaded : function() {},
+
+ // special callbacks for fixed position
+ onFixed : function() {},
+ onUnfixed : function() {},
+
+ // utility callbacks
+ onUpdate : false, // disabled by default for performance
+ onRefresh : function(){},
+
+ metadata : {
+ src: 'src'
+ },
+
+ className: {
+ fixed : 'fixed',
+ placeholder : 'placeholder'
+ },
+
+ error : {
+ method : 'The method you called is not defined.',
+ visible : 'Element is hidden, you must call refresh after element becomes visible'
+ }
+
+};
+
+})( jQuery, window, document );
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/behaviors/visit.js
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/behaviors/visit.js b/semantic/src/definitions/behaviors/visit.js
new file mode 100644
index 0000000..df88d0b
--- /dev/null
+++ b/semantic/src/definitions/behaviors/visit.js
@@ -0,0 +1,525 @@
+/*!
+ * # Semantic UI - Visit
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.visit = $.fn.visit = function(parameters) {
+ var
+ $allModules = $.isFunction(this)
+ ? $(window)
+ : $(this),
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+ returnedValue
+ ;
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.visit.settings, parameters)
+ : $.extend({}, $.fn.visit.settings),
+
+ error = settings.error,
+ namespace = settings.namespace,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = namespace + '-module',
+
+ $module = $(this),
+ $displays = $(),
+
+ element = this,
+ instance = $module.data(moduleNamespace),
+ module
+ ;
+ module = {
+
+ initialize: function() {
+ if(settings.count) {
+ module.store(settings.key.count, settings.count);
+ }
+ else if(settings.id) {
+ module.add.id(settings.id);
+ }
+ else if(settings.increment && methodInvoked !== 'increment') {
+ module.increment();
+ }
+ module.add.display($module);
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.verbose('Storing instance of visit module', module);
+ instance = module;
+ $module
+ .data(moduleNamespace, module)
+ ;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying instance');
+ $module
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ increment: function(id) {
+ var
+ currentValue = module.get.count(),
+ newValue = +(currentValue) + 1
+ ;
+ if(id) {
+ module.add.id(id);
+ }
+ else {
+ if(newValue > settings.limit && !settings.surpass) {
+ newValue = settings.limit;
+ }
+ module.debug('Incrementing visits', newValue);
+ module.store(settings.key.count, newValue);
+ }
+ },
+
+ decrement: function(id) {
+ var
+ currentValue = module.get.count(),
+ newValue = +(currentValue) - 1
+ ;
+ if(id) {
+ module.remove.id(id);
+ }
+ else {
+ module.debug('Removing visit');
+ module.store(settings.key.count, newValue);
+ }
+ },
+
+ get: {
+ count: function() {
+ return +(module.retrieve(settings.key.count)) || 0;
+ },
+ idCount: function(ids) {
+ ids = ids || module.get.ids();
+ return ids.length;
+ },
+ ids: function(delimitedIDs) {
+ var
+ idArray = []
+ ;
+ delimitedIDs = delimitedIDs || module.retrieve(settings.key.ids);
+ if(typeof delimitedIDs === 'string') {
+ idArray = delimitedIDs.split(settings.delimiter);
+ }
+ module.verbose('Found visited ID list', idArray);
+ return idArray;
+ },
+ storageOptions: function(data) {
+ var
+ options = {}
+ ;
+ if(settings.expires) {
+ options.expires = settings.expires;
+ }
+ if(settings.domain) {
+ options.domain = settings.domain;
+ }
+ if(settings.path) {
+ options.path = settings.path;
+ }
+ return options;
+ }
+ },
+
+ has: {
+ visited: function(id, ids) {
+ var
+ visited = false
+ ;
+ ids = ids || module.get.ids();
+ if(id !== undefined && ids) {
+ $.each(ids, function(index, value){
+ if(value == id) {
+ visited = true;
+ }
+ });
+ }
+ return visited;
+ }
+ },
+
+ set: {
+ count: function(value) {
+ module.store(settings.key.count, value);
+ },
+ ids: function(value) {
+ module.store(settings.key.ids, value);
+ }
+ },
+
+ reset: function() {
+ module.store(settings.key.count, 0);
+ module.store(settings.key.ids, null);
+ },
+
+ add: {
+ id: function(id) {
+ var
+ currentIDs = module.retrieve(settings.key.ids),
+ newIDs = (currentIDs === undefined || currentIDs === '')
+ ? id
+ : currentIDs + settings.delimiter + id
+ ;
+ if( module.has.visited(id) ) {
+ module.debug('Unique content already visited, not adding visit', id, currentIDs);
+ }
+ else if(id === undefined) {
+ module.debug('ID is not defined');
+ }
+ else {
+ module.debug('Adding visit to unique content', id);
+ module.store(settings.key.ids, newIDs);
+ }
+ module.set.count( module.get.idCount() );
+ },
+ display: function(selector) {
+ var
+ $element = $(selector)
+ ;
+ if($element.length > 0 && !$.isWindow($element[0])) {
+ module.debug('Updating visit count for element', $element);
+ $displays = ($displays.length > 0)
+ ? $displays.add($element)
+ : $element
+ ;
+ }
+ }
+ },
+
+ remove: {
+ id: function(id) {
+ var
+ currentIDs = module.get.ids(),
+ newIDs = []
+ ;
+ if(id !== undefined && currentIDs !== undefined) {
+ module.debug('Removing visit to unique content', id, currentIDs);
+ $.each(currentIDs, function(index, value){
+ if(value !== id) {
+ newIDs.push(value);
+ }
+ });
+ newIDs = newIDs.join(settings.delimiter);
+ module.store(settings.key.ids, newIDs );
+ }
+ module.set.count( module.get.idCount() );
+ }
+ },
+
+ check: {
+ limit: function(value) {
+ value = value || module.get.count();
+ if(settings.limit) {
+ if(value >= settings.limit) {
+ module.debug('Pages viewed exceeded limit, firing callback', value, settings.limit);
+ settings.onLimit.call(element, value);
+ }
+ module.debug('Limit not reached', value, settings.limit);
+ settings.onChange.call(element, value);
+ }
+ module.update.display(value);
+ }
+ },
+
+ update: {
+ display: function(value) {
+ value = value || module.get.count();
+ if($displays.length > 0) {
+ module.debug('Updating displayed view count', $displays);
+ $displays.html(value);
+ }
+ }
+ },
+
+ store: function(key, value) {
+ var
+ options = module.get.storageOptions(value)
+ ;
+ if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
+ window.localStorage.setItem(key, value);
+ module.debug('Value stored using local storage', key, value);
+ }
+ else if($.cookie !== undefined) {
+ $.cookie(key, value, options);
+ module.debug('Value stored using cookie', key, value, options);
+ }
+ else {
+ module.error(error.noCookieStorage);
+ return;
+ }
+ if(key == settings.key.count) {
+ module.check.limit(value);
+ }
+ },
+ retrieve: function(key, value) {
+ var
+ storedValue
+ ;
+ if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
+ storedValue = window.localStorage.getItem(key);
+ }
+ // get by cookie
+ else if($.cookie !== undefined) {
+ storedValue = $.cookie(key);
+ }
+ else {
+ module.error(error.noCookieStorage);
+ }
+ if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
+ storedValue = undefined;
+ }
+ return storedValue;
+ },
+
+ setting: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ settings[name] = value;
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ module.debug('Changing internal', name, value);
+ if(value !== undefined) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else {
+ module[name] = value;
+ }
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if($allModules.length > 1) {
+ title += ' ' + '(' + $allModules.length + ')';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+
+ })
+ ;
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.visit.settings = {
+
+ name : 'Visit',
+
+ debug : false,
+ verbose : false,
+ performance : true,
+
+ namespace : 'visit',
+
+ increment : false,
+ surpass : false,
+ count : false,
+ limit : false,
+
+ delimiter : '&',
+ storageMethod : 'localstorage',
+
+ key : {
+ count : 'visit-count',
+ ids : 'visit-ids'
+ },
+
+ expires : 30,
+ domain : false,
+ path : '/',
+
+ onLimit : function() {},
+ onChange : function() {},
+
+ error : {
+ method : 'The method you called is not defined',
+ missingPersist : 'Using the persist setting requires the inclusion of PersistJS',
+ noCookieStorage : 'The default storage cookie requires $.cookie to be included.'
+ }
+
+};
+
+})( jQuery, window, document );
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/collections/breadcrumb.less
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/collections/breadcrumb.less b/semantic/src/definitions/collections/breadcrumb.less
new file mode 100755
index 0000000..67a4e31
--- /dev/null
+++ b/semantic/src/definitions/collections/breadcrumb.less
@@ -0,0 +1,122 @@
+/*!
+ * # Semantic UI - Breadcrumb
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'breadcrumb';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+ Breadcrumb
+*******************************/
+
+.ui.breadcrumb {
+ line-height: 1;
+ display: @display;
+ margin: @verticalMargin 0em;
+ vertical-align: @verticalAlign;
+}
+.ui.breadcrumb:first-child {
+ margin-top: 0em;
+}
+.ui.breadcrumb:last-child {
+ margin-bottom: 0em;
+}
+
+/*******************************
+ Content
+*******************************/
+
+/* Divider */
+.ui.breadcrumb .divider {
+ display: inline-block;
+ opacity: @dividerOpacity;
+ margin: 0em @dividerSpacing 0em;
+
+ font-size: @dividerSize;
+ color: @dividerColor;
+ vertical-align: @dividerVerticalAlign;
+}
+
+/* Link */
+.ui.breadcrumb a {
+ color: @linkColor;
+}
+.ui.breadcrumb a:hover {
+ color: @linkHoverColor;
+}
+
+
+/* Icon Divider */
+.ui.breadcrumb .icon.divider {
+ font-size: @iconDividerSize;
+ vertical-align: @iconDividerVerticalAlign;
+}
+
+/* Section */
+.ui.breadcrumb a.section {
+ cursor: pointer;
+}
+.ui.breadcrumb .section {
+ display: inline-block;
+ margin: @sectionMargin;
+ padding: @sectionPadding;
+}
+
+/* Loose Coupling */
+.ui.breadcrumb.segment {
+ display: inline-block;
+ padding: @segmentPadding;
+}
+
+/*******************************
+ States
+*******************************/
+
+.ui.breadcrumb .active.section {
+ font-weight: @activeFontWeight;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+.ui.mini.breadcrumb {
+ font-size: @mini;
+}
+.ui.tiny.breadcrumb {
+ font-size: @tiny;
+}
+.ui.small.breadcrumb {
+ font-size: @small;
+}
+.ui.breadcrumb {
+ font-size: @medium;
+}
+.ui.large.breadcrumb {
+ font-size: @large;
+}
+.ui.big.breadcrumb {
+ font-size: @big;
+}
+.ui.huge.breadcrumb {
+ font-size: @huge;
+}
+.ui.massive.breadcrumb {
+ font-size: @massive;
+}
+
+.loadUIOverrides();
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/collections/form.less
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/collections/form.less b/semantic/src/definitions/collections/form.less
new file mode 100755
index 0000000..cd1242b
--- /dev/null
+++ b/semantic/src/definitions/collections/form.less
@@ -0,0 +1,1045 @@
+/*!
+ * # Semantic UI - Form
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'form';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Elements
+*******************************/
+
+/*--------------------
+ Form
+---------------------*/
+
+.ui.form {
+ position: relative;
+ max-width: 100%;
+}
+
+/*--------------------
+ Content
+---------------------*/
+
+.ui.form > p {
+ margin: @paragraphMargin;
+}
+
+/*--------------------
+ Field
+---------------------*/
+
+.ui.form .field {
+ clear: both;
+ margin: @fieldMargin;
+}
+
+.ui.form .field:last-child,
+.ui.form .fields:last-child .field {
+ margin-bottom: 0em;
+}
+
+.ui.form .fields .field {
+ clear: both;
+ margin: 0em;
+}
+
+
+/*--------------------
+ Labels
+---------------------*/
+
+.ui.form .field > label {
+ display: block;
+ margin: @labelMargin;
+ color: @labelColor;
+ font-size: @labelFontSize;
+ font-weight: @labelFontWeight;
+ text-transform: @labelTextTransform;
+}
+
+/*--------------------
+ Standard Inputs
+---------------------*/
+
+
+.ui.form textarea,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="url"] {
+ width: @inputWidth;
+ vertical-align: top;
+}
+
+/* Set max height on unusual input */
+.ui.form ::-webkit-datetime-edit,
+.ui.form ::-webkit-inner-spin-button {
+ height: @inputLineHeight;
+}
+
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="url"] {
+ font-family: @inputFont;
+ margin: 0em;
+ outline: none;
+ -webkit-appearance: none;
+ tap-highlight-color: rgba(255, 255, 255, 0);
+
+ line-height: @inputLineHeight;
+ padding: @inputPadding;
+ font-size: @inputFontSize;
+
+ background: @inputBackground;
+ border: @inputBorder;
+ color: @inputColor;
+ border-radius: @inputBorderRadius;
+ box-shadow: @inputBoxShadow;
+ transition: @inputTransition;
+}
+
+/* Text Area */
+.ui.form textarea {
+ margin: 0em;
+ -webkit-appearance: none;
+ tap-highlight-color: rgba(255, 255, 255, 0);
+
+ padding: @textAreaPadding;
+ font-size: @textAreaFontSize;
+ background: @textAreaBackground;
+ border: @textAreaBorder;
+ outline: none;
+ color: @inputColor;
+ border-radius: @inputBorderRadius;
+ box-shadow: @inputBoxShadow;
+ transition: @textAreaTransition;
+ font-size: @textAreaFontSize;
+ line-height: @textAreaLineHeight;
+ resize: @textAreaResize;
+}
+.ui.form textarea:not([rows]) {
+ height: @textAreaHeight;
+ min-height: @textAreaMinHeight;
+ max-height: @textAreaMaxHeight;
+}
+
+.ui.form textarea,
+.ui.form input[type="checkbox"] {
+ vertical-align: @checkboxVerticalAlign;
+}
+
+/*--------------------------
+ Input w/ attached Button
+---------------------------*/
+
+.ui.form input.attached {
+ width: auto;
+}
+
+
+/*--------------------
+ Basic Select
+---------------------*/
+
+.ui.form select {
+ display: block;
+ height: auto;
+ width: 100%;
+ background: @selectBackground;
+ border: @selectBorder;
+ border-radius: @selectBorderRadius;
+ box-shadow: @selectBoxShadow;
+ padding: @selectPadding;
+ color: @selectColor;
+ transition: @selectTransition;
+}
+
+/*--------------------
+ Dropdown
+---------------------*/
+
+/* Block */
+.ui.form .field > .selection.dropdown {
+ width: 100%;
+}
+.ui.form .field > .selection.dropdown > .dropdown.icon {
+ float: right;
+}
+
+/* Inline */
+.ui.form .inline.fields .field > .selection.dropdown,
+.ui.form .inline.field > .selection.dropdown {
+ width: auto;
+}
+.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
+.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
+ float: none;
+}
+
+/*--------------------
+ UI Input
+---------------------*/
+
+/* Block */
+.ui.form .field .ui.input,
+.ui.form .fields .field .ui.input,
+.ui.form .wide.field .ui.input {
+ width: 100%;
+}
+
+/* Inline */
+.ui.form .inline.fields .field:not(.wide) .ui.input,
+.ui.form .inline.field:not(.wide) .ui.input {
+ width: auto;
+ vertical-align: middle;
+}
+
+/* Auto Input */
+.ui.form .fields .field .ui.input input,
+.ui.form .field .ui.input input {
+ width: auto;
+}
+
+/* Full Width Input */
+.ui.form .ten.fields .ui.input input,
+.ui.form .nine.fields .ui.input input,
+.ui.form .eight.fields .ui.input input,
+.ui.form .seven.fields .ui.input input,
+.ui.form .six.fields .ui.input input,
+.ui.form .five.fields .ui.input input,
+.ui.form .four.fields .ui.input input,
+.ui.form .three.fields .ui.input input,
+.ui.form .two.fields .ui.input input,
+.ui.form .wide.field .ui.input input {
+ flex: 1 0 auto;
+ width: 0px;
+}
+
+
+/*--------------------
+ Types of Messages
+---------------------*/
+
+.ui.form .success.message,
+.ui.form .warning.message,
+.ui.form .error.message {
+ display: none;
+}
+
+/* Assumptions */
+.ui.form .message:first-child {
+ margin-top: 0px;
+}
+
+/*--------------------
+ Validation Prompt
+---------------------*/
+
+.ui.form .field .prompt.label {
+ white-space: normal;
+ background: @promptBackground !important;
+ border: @promptBorder !important;
+ color: @promptTextColor !important;
+}
+.ui.form .inline.fields .field .prompt,
+.ui.form .inline.field .prompt {
+ vertical-align: top;
+ margin: @inlinePromptMargin;
+}
+.ui.form .inline.fields .field .prompt:before,
+.ui.form .inline.field .prompt:before {
+ border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
+ bottom: auto;
+ right: auto;
+ top: 50%;
+ left: 0em;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------------
+ Autofilled
+---------------------*/
+
+.ui.form .field.field input:-webkit-autofill {
+ box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
+ border-color: @inputAutoFillBorder !important;
+}
+
+/* Focus */
+.ui.form .field.field input:-webkit-autofill:focus {
+ box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
+ border-color: @inputAutoFillFocusBorder !important;
+}
+
+/* Error */
+.ui.form .error.error input:-webkit-autofill {
+ box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
+ border-color: @inputAutoFillErrorBorder !important;
+}
+
+
+
+/*--------------------
+ Placeholder
+---------------------*/
+
+/* browsers require these rules separate */
+.ui.form ::-webkit-input-placeholder {
+ color: @inputPlaceholderColor;
+}
+.ui.form :-ms-input-placeholder {
+ color: @inputPlaceholderColor;
+}
+.ui.form ::-moz-placeholder {
+ color: @inputPlaceholderColor;
+}
+
+.ui.form :focus::-webkit-input-placeholder {
+ color: @inputPlaceholderFocusColor;
+}
+.ui.form :focus:-ms-input-placeholder {
+ color: @inputPlaceholderFocusColor;
+}
+.ui.form :focus::-moz-placeholder {
+ color: @inputPlaceholderFocusColor;
+}
+
+/* Error Placeholder */
+.ui.form .error ::-webkit-input-placeholder {
+ color: @inputErrorPlaceholderColor;
+}
+.ui.form .error :-ms-input-placeholder {
+ color: @inputErrorPlaceholderColor !important;
+}
+.ui.form .error ::-moz-placeholder {
+ color: @inputErrorPlaceholderColor;
+}
+
+.ui.form .error :focus::-webkit-input-placeholder {
+ color: @inputErrorPlaceholderFocusColor;
+}
+.ui.form .error :focus:-ms-input-placeholder {
+ color: @inputErrorPlaceholderFocusColor !important;
+}
+.ui.form .error :focus::-moz-placeholder {
+ color: @inputErrorPlaceholderFocusColor;
+}
+
+
+/*--------------------
+ Focus
+---------------------*/
+
+.ui.form input:not([type]):focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="url"]:focus {
+ color: @inputFocusColor;
+ border-color: @inputFocusBorderColor;
+ border-radius: @inputFocusBorderRadius;
+ background: @inputFocusBackground;
+ box-shadow: @inputFocusBoxShadow;
+}
+.ui.form textarea:focus {
+ color: @textAreaFocusColor;
+ border-color: @textAreaFocusBorderColor;
+ border-radius: @textAreaFocusBorderRadius;
+ background: @textAreaFocusBackground;
+ box-shadow: @textAreaFocusBoxShadow;
+ -webkit-appearance: none;
+}
+
+
+/*--------------------
+ Success
+---------------------*/
+
+/* On Form */
+.ui.form.success .success.message:not(:empty) {
+ display: block;
+}
+.ui.form.success .compact.success.message:not(:empty) {
+ display: inline-block;
+}
+.ui.form.success .icon.success.message:not(:empty) {
+ display: flex;
+}
+
+/*--------------------
+ Warning
+---------------------*/
+
+/* On Form */
+.ui.form.warning .warning.message:not(:empty) {
+ display: block;
+}
+.ui.form.warning .compact.warning.message:not(:empty) {
+ display: inline-block;
+}
+.ui.form.warning .icon.warning.message:not(:empty) {
+ display: flex;
+}
+
+/*--------------------
+ Error
+---------------------*/
+
+/* On Form */
+.ui.form.error .error.message:not(:empty) {
+ display: block;
+}
+.ui.form.error .compact.error.message:not(:empty) {
+ display: inline-block;
+}
+.ui.form.error .icon.error.message:not(:empty) {
+ display: flex;
+}
+
+/* On Field(s) */
+.ui.form .fields.error .field label,
+.ui.form .field.error label,
+.ui.form .fields.error .field .input,
+.ui.form .field.error .input {
+ color: @formErrorColor;
+}
+
+.ui.form .fields.error .field .corner.label,
+.ui.form .field.error .corner.label {
+ border-color: @formErrorColor;
+ color: @white;
+}
+
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="date"],
+.ui.form .fields.error .field input[type="datetime-local"],
+.ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="number"],
+.ui.form .fields.error .field input[type="password"],
+.ui.form .fields.error .field input[type="search"],
+.ui.form .fields.error .field input[type="tel"],
+.ui.form .fields.error .field input[type="time"],
+.ui.form .fields.error .field input[type="text"],
+.ui.form .fields.error .field input[type="url"],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="date"],
+.ui.form .field.error input[type="datetime-local"],
+.ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="number"],
+.ui.form .field.error input[type="password"],
+.ui.form .field.error input[type="search"],
+.ui.form .field.error input[type="tel"],
+.ui.form .field.error input[type="time"],
+.ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="url"] {
+ background: @formErrorBackground;
+ border-color: @formErrorBorder;
+ color: @formErrorColor;
+ border-radius: @inputErrorBorderRadius;
+ box-shadow: @inputErrorBoxShadow;
+}
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="date"]:focus,
+.ui.form .field.error input[type="datetime-local"]:focus,
+.ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="number"]:focus,
+.ui.form .field.error input[type="password"]:focus,
+.ui.form .field.error input[type="search"]:focus,
+.ui.form .field.error input[type="tel"]:focus,
+.ui.form .field.error input[type="time"]:focus,
+.ui.form .field.error input[type="text"]:focus,
+.ui.form .field.error input[type="url"]:focus {
+ background: @inputErrorFocusBackground;
+ border-color: @inputErrorFocusBorder;
+ color: @inputErrorFocusColor;
+
+ -webkit-appearance: none;
+ box-shadow: @inputErrorFocusBoxShadow;
+}
+
+/* Preserve Native Select Stylings */
+.ui.form .field.error select {
+ -webkit-appearance: menulist-button;
+}
+
+/*------------------
+ Dropdown Error
+--------------------*/
+
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .fields.error .field .ui.dropdown .item,
+.ui.form .field.error .ui.dropdown,
+.ui.form .field.error .ui.dropdown .text,
+.ui.form .field.error .ui.dropdown .item {
+ background: @formErrorBackground;
+ color: @formErrorColor;
+}
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .field.error .ui.dropdown {
+ border-color: @formErrorBorder !important;
+}
+.ui.form .fields.error .field .ui.dropdown:hover,
+.ui.form .field.error .ui.dropdown:hover {
+ border-color: @formErrorBorder !important;
+}
+.ui.form .fields.error .field .ui.dropdown:hover .menu,
+.ui.form .field.error .ui.dropdown:hover .menu {
+ border-color: @formErrorBorder;
+}
+.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
+.ui.form .field.error .ui.multiple.selection.dropdown > .label {
+ background-color: @dropdownErrorLabelBackground;
+ color: @dropdownErrorLabelColor;
+}
+
+/* Hover */
+.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
+.ui.form .field.error .ui.dropdown .menu .item:hover {
+ background-color: @dropdownErrorHoverBackground;
+}
+
+/* Selected */
+.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
+.ui.form .field.error .ui.dropdown .menu .selected.item {
+ background-color: @dropdownErrorSelectedBackground;
+}
+
+
+/* Active */
+.ui.form .fields.error .field .ui.dropdown .menu .active.item,
+.ui.form .field.error .ui.dropdown .menu .active.item {
+ background-color: @dropdownErrorActiveBackground !important;
+}
+
+/*--------------------
+ Checkbox Error
+---------------------*/
+
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
+ color: @formErrorColor;
+}
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
+ background: @formErrorBackground;
+ border-color: @formErrorBorder;
+}
+.ui.form .fields.error .field .checkbox label:after,
+.ui.form .field.error .checkbox label:after,
+.ui.form .fields.error .field .checkbox .box:after,
+.ui.form .field.error .checkbox .box:after {
+ color: @formErrorColor;
+}
+
+/*--------------------
+ Disabled
+---------------------*/
+
+.ui.form .disabled.fields .field,
+.ui.form .disabled.field,
+.ui.form .field :disabled {
+ pointer-events: none;
+ opacity: @disabledOpacity;
+}
+.ui.form .field.disabled label {
+ opacity: @disabledLabelOpacity;
+}
+.ui.form .field.disabled :disabled {
+ opacity: 1;
+}
+
+
+/*--------------
+ Loading
+---------------*/
+
+.ui.loading.form {
+ position: relative;
+ cursor: default;
+ point-events: none;
+}
+.ui.loading.form:before {
+ position: absolute;
+ content: '';
+ top: 0%;
+ left: 0%;
+ background: @loaderDimmerColor;
+ width: 100%;
+ height: 100%;
+ z-index: @loaderDimmerZIndex;
+}
+.ui.loading.form:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
+
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
+
+ animation: form-spin @loaderSpeed linear;
+ animation-iteration-count: infinite;
+
+ border-radius: @circularRadius;
+
+ border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
+ border-style: solid;
+ border-width: @loaderLineWidth;
+
+ box-shadow: 0px 0px 0px 1px transparent;
+ visibility: visible;
+ z-index: @loaderLineZIndex;
+}
+
+@keyframes form-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+
+/*******************************
+ Element Types
+*******************************/
+
+/*--------------------
+ Required Field
+---------------------*/
+
+.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields.grouped > label:after,
+.ui.form .required.field > label:after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+ margin: @requiredMargin;
+ content: @requiredContent;
+ color: @requiredColor;
+}
+
+.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields.grouped > label:after,
+.ui.form .required.field > label:after {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+ position: absolute;
+ top: 0%;
+ left: 100%;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+
+/*--------------------
+ Inverted Colors
+---------------------*/
+
+.ui.inverted.form label,
+.ui.form .inverted.segment label,
+.ui.form .inverted.segment .ui.checkbox label,
+.ui.form .inverted.segment .ui.checkbox .box,
+.ui.inverted.form .ui.checkbox label,
+.ui.inverted.form .ui.checkbox .box,
+.ui.inverted.form .inline.fields > label,
+.ui.inverted.form .inline.fields .field > label,
+.ui.inverted.form .inline.fields .field > p,
+.ui.inverted.form .inline.field > label,
+.ui.inverted.form .inline.field > p {
+ color: @invertedLabelColor;
+}
+
+/* Inverted Field */
+.ui.inverted.form input:not([type]),
+.ui.inverted.form input[type="date"],
+.ui.inverted.form input[type="datetime-local"],
+.ui.inverted.form input[type="email"],
+.ui.inverted.form input[type="number"],
+.ui.inverted.form input[type="password"],
+.ui.inverted.form input[type="search"],
+.ui.inverted.form input[type="tel"],
+.ui.inverted.form input[type="time"],
+.ui.inverted.form input[type="text"],
+.ui.inverted.form input[type="url"] {
+ background: @invertedInputBackground;
+ border-color: @invertedInputBorderColor;
+ color: @invertedInputColor;
+ box-shadow: @invertedInputBoxShadow;
+}
+
+
+/*--------------------
+ Field Groups
+---------------------*/
+
+/* Grouped Vertically */
+.ui.form .grouped.fields {
+ display: block;
+ margin: @groupedMargin;
+}
+.ui.form .grouped.fields:last-child {
+ margin-bottom: 0em;
+}
+
+.ui.form .grouped.fields > label {
+ margin: @groupedLabelMargin;
+ color: @groupedLabelColor;
+ font-size: @groupedLabelFontSize;
+ font-weight: @groupedLabelFontWeight;
+ text-transform: @groupedLabelTextTransform;
+}
+
+.ui.form .grouped.fields .field,
+.ui.form .grouped.inline.fields .field {
+ display: block;
+ margin: @groupedFieldMargin;
+ padding: 0em;
+}
+
+/*--------------------
+ Fields
+---------------------*/
+
+/* Split fields */
+.ui.form .fields {
+ display: flex;
+ flex-direction: row;
+ margin: @fieldsMargin;
+}
+.ui.form .fields > .field {
+ flex: 0 1 auto;
+ padding-left: (@gutterWidth / 2);
+ padding-right: (@gutterWidth / 2);
+}
+.ui.form .fields > .field:first-child {
+ border-left: none;
+ box-shadow: none;
+}
+
+/* Other Combinations */
+.ui.form .two.fields > .fields,
+.ui.form .two.fields > .field {
+ width: @twoColumn;
+}
+.ui.form .three.fields > .fields,
+.ui.form .three.fields > .field {
+ width: @threeColumn;
+}
+.ui.form .four.fields > .fields,
+.ui.form .four.fields > .field {
+ width: @fourColumn;
+}
+.ui.form .five.fields > .fields,
+.ui.form .five.fields > .field {
+ width: @fiveColumn;
+}
+.ui.form .six.fields > .fields,
+.ui.form .six.fields > .field {
+ width: @sixColumn;
+}
+.ui.form .seven.fields > .fields,
+.ui.form .seven.fields > .field {
+ width: @sevenColumn;
+}
+.ui.form .eight.fields > .fields,
+.ui.form .eight.fields > .field {
+ width: @eightColumn;
+}
+.ui.form .nine.fields > .fields,
+.ui.form .nine.fields > .field {
+ width: @nineColumn;
+}
+.ui.form .ten.fields > .fields,
+.ui.form .ten.fields > .field {
+ width: @tenColumn;
+}
+
+/* Swap to full width on mobile */
+@media only screen and (max-width : @largestMobileScreen) {
+ .ui.form .fields {
+ flex-wrap: wrap;
+ }
+
+ .ui[class*="equal width"].form .fields > .field,
+ .ui.form [class*="equal width"].fields > .field,
+ .ui.form .two.fields > .fields,
+ .ui.form .two.fields > .field,
+ .ui.form .three.fields > .fields,
+ .ui.form .three.fields > .field,
+ .ui.form .four.fields > .fields,
+ .ui.form .four.fields > .field,
+ .ui.form .five.fields > .fields,
+ .ui.form .five.fields > .field,
+ .ui.form .six.fields > .fields,
+ .ui.form .six.fields > .field,
+ .ui.form .seven.fields > .fields,
+ .ui.form .seven.fields > .field,
+ .ui.form .eight.fields > .fields,
+ .ui.form .eight.fields > .field,
+ .ui.form .nine.fields > .fields,
+ .ui.form .nine.fields > .field,
+ .ui.form .ten.fields > .fields,
+ .ui.form .ten.fields > .field {
+ width: @oneColumn !important;
+ margin: 0em 0em @rowDistance;
+ }
+}
+
+
+/* Sizing Combinations */
+.ui.form .fields .wide.field {
+ width: @oneWide;
+ padding-left: (@gutterWidth / 2);
+ padding-right: (@gutterWidth / 2);
+}
+
+.ui.form .one.wide.field {
+ width: @oneWide !important;
+}
+.ui.form .two.wide.field {
+ width: @twoWide !important;
+}
+.ui.form .three.wide.field {
+ width: @threeWide !important;
+}
+.ui.form .four.wide.field {
+ width: @fourWide !important;
+}
+.ui.form .five.wide.field {
+ width: @fiveWide !important;
+}
+.ui.form .six.wide.field {
+ width: @sixWide !important;
+}
+.ui.form .seven.wide.field {
+ width: @sevenWide !important;
+}
+.ui.form .eight.wide.field {
+ width: @eightWide !important;
+}
+.ui.form .nine.wide.field {
+ width: @nineWide !important;
+}
+.ui.form .ten.wide.field {
+ width: @tenWide !important;
+}
+.ui.form .eleven.wide.field {
+ width: @elevenWide !important;
+}
+.ui.form .twelve.wide.field {
+ width: @twelveWide !important;
+}
+.ui.form .thirteen.wide.field {
+ width: @thirteenWide !important;
+}
+.ui.form .fourteen.wide.field {
+ width: @fourteenWide !important;
+}
+.ui.form .fifteen.wide.field {
+ width: @fifteenWide !important;
+}
+.ui.form .sixteen.wide.field {
+ width: @sixteenWide !important;
+}
+
+/* Swap to full width on mobile */
+@media only screen and (max-width : @largestMobileScreen) {
+ .ui.form .two.fields > .fields,
+ .ui.form .two.fields > .field,
+ .ui.form .three.fields > .fields,
+ .ui.form .three.fields > .field,
+ .ui.form .four.fields > .fields,
+ .ui.form .four.fields > .field,
+ .ui.form .five.fields > .fields,
+ .ui.form .five.fields > .field,
+ .ui.form .fields > .two.wide.field,
+ .ui.form .fields > .three.wide.field,
+ .ui.form .fields > .four.wide.field,
+ .ui.form .fields > .five.wide.field,
+ .ui.form .fields > .six.wide.field,
+ .ui.form .fields > .seven.wide.field,
+ .ui.form .fields > .eight.wide.field,
+ .ui.form .fields > .nine.wide.field,
+ .ui.form .fields > .ten.wide.field,
+ .ui.form .fields > .eleven.wide.field,
+ .ui.form .fields > .twelve.wide.field,
+ .ui.form .fields > .thirteen.wide.field,
+ .ui.form .fields > .fourteen.wide.field,
+ .ui.form .fields > .fifteen.wide.field,
+ .ui.form .fields > .sixteen.wide.field {
+ width: @oneColumn !important;
+ }
+ .ui.form .fields {
+ margin-bottom: 0em;
+ }
+}
+
+/*--------------------
+ Equal Width
+---------------------*/
+
+.ui[class*="equal width"].form .fields > .field,
+.ui.form [class*="equal width"].fields > .field {
+ width: 100%;
+ flex: 1 1 auto;
+}
+
+/*--------------------
+ Inline Fields
+---------------------*/
+
+.ui.form .inline.fields {
+ margin: @fieldMargin;
+ align-items: center;
+}
+.ui.form .inline.fields .field {
+ margin: 0em;
+ padding: @inlineFieldsMargin;
+}
+
+/* Inline Label */
+.ui.form .inline.fields > label,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p {
+ display: inline-block;
+ width: auto;
+ margin-top: 0em;
+ margin-bottom: 0em;
+ vertical-align: baseline;
+ font-size: @inlineLabelFontSize;
+ font-weight: @inlineLabelFontWeight;
+ color: @inlineLabelColor;
+ text-transform: @inlineLabelTextTransform;
+}
+
+/* Grouped Inline Label */
+.ui.form .inline.fields > label {
+ margin: @groupedInlineLabelMargin;
+}
+
+/* Inline Input */
+.ui.form .inline.fields .field > input,
+.ui.form .inline.fields .field > select,
+.ui.form .inline.field > input,
+.ui.form .inline.field > select {
+ display: inline-block;
+ width: auto;
+
+ margin-top: 0em;
+ margin-bottom: 0em;
+
+ vertical-align: middle;
+ font-size: @inlineInputSize;
+}
+
+/* Label */
+.ui.form .inline.fields .field > :first-child,
+.ui.form .inline.field > :first-child {
+ margin: 0em @inlineLabelDistance 0em 0em;
+}
+.ui.form .inline.fields .field > :only-child,
+.ui.form .inline.field > :only-child {
+ margin: 0em;
+}
+
+/* Wide */
+.ui.form .inline.fields .wide.field {
+ display: flex;
+ align-items: center;
+}
+.ui.form .inline.fields .wide.field > input,
+.ui.form .inline.fields .wide.field > select {
+ width: 100%;
+}
+
+
+/*--------------------
+ Sizes
+---------------------*/
+
+.ui.mini.form {
+ font-size: @mini;
+}
+.ui.tiny.form {
+ font-size: @tiny;
+}
+.ui.small.form {
+ font-size: @small;
+}
+.ui.form {
+ font-size: @medium;
+}
+.ui.large.form {
+ font-size: @large;
+}
+.ui.big.form {
+ font-size: @big;
+}
+.ui.huge.form {
+ font-size: @huge;
+}
+.ui.massive.form {
+ font-size: @massive;
+}
+
+.loadUIOverrides();