aboutsummaryrefslogtreecommitdiff
path: root/semantic/src/definitions
diff options
context:
space:
mode:
authorFuwn <[email protected]>2020-12-14 23:29:56 -0800
committerFuwn <[email protected]>2020-12-14 23:29:56 -0800
commit002eb44eee98dc838bc854b945ab0cbf4884dd57 (patch)
tree428ae460c79baf32fba8ecf16e6fe02a88c3b971 /semantic/src/definitions
parent:star: (diff)
downloadme-rewrite-angular.tar.xz
me-rewrite-angular.zip
Diffstat (limited to 'semantic/src/definitions')
-rw-r--r--semantic/src/definitions/behaviors/api.js1177
-rw-r--r--semantic/src/definitions/behaviors/form.js2033
-rw-r--r--semantic/src/definitions/behaviors/state.js711
-rw-r--r--semantic/src/definitions/behaviors/visibility.js1313
-rw-r--r--semantic/src/definitions/collections/breadcrumb.less122
-rw-r--r--semantic/src/definitions/collections/form.less1112
-rw-r--r--semantic/src/definitions/collections/grid.less1947
-rw-r--r--semantic/src/definitions/collections/menu.less1939
-rw-r--r--semantic/src/definitions/collections/message.less414
-rw-r--r--semantic/src/definitions/collections/table.less1322
-rw-r--r--semantic/src/definitions/elements/button.less1881
-rw-r--r--semantic/src/definitions/elements/container.less160
-rw-r--r--semantic/src/definitions/elements/divider.less298
-rw-r--r--semantic/src/definitions/elements/emoji.less72
-rw-r--r--semantic/src/definitions/elements/flag.less52
-rw-r--r--semantic/src/definitions/elements/header.less487
-rw-r--r--semantic/src/definitions/elements/icon.less374
-rw-r--r--semantic/src/definitions/elements/image.less321
-rw-r--r--semantic/src/definitions/elements/input.less565
-rw-r--r--semantic/src/definitions/elements/label.less1032
-rw-r--r--semantic/src/definitions/elements/list.less1021
-rw-r--r--semantic/src/definitions/elements/loader.less416
-rw-r--r--semantic/src/definitions/elements/placeholder.less248
-rw-r--r--semantic/src/definitions/elements/rail.less147
-rw-r--r--semantic/src/definitions/elements/reveal.less289
-rw-r--r--semantic/src/definitions/elements/segment.less774
-rw-r--r--semantic/src/definitions/elements/step.less630
-rw-r--r--semantic/src/definitions/elements/text.less74
-rw-r--r--semantic/src/definitions/globals/reset.less40
-rw-r--r--semantic/src/definitions/globals/site.js493
-rw-r--r--semantic/src/definitions/globals/site.less207
-rw-r--r--semantic/src/definitions/modules/accordion.js618
-rw-r--r--semantic/src/definitions/modules/accordion.less219
-rw-r--r--semantic/src/definitions/modules/calendar.js1774
-rw-r--r--semantic/src/definitions/modules/calendar.less195
-rw-r--r--semantic/src/definitions/modules/checkbox.js876
-rw-r--r--semantic/src/definitions/modules/checkbox.less814
-rw-r--r--semantic/src/definitions/modules/dimmer.js753
-rw-r--r--semantic/src/definitions/modules/dimmer.less390
-rw-r--r--semantic/src/definitions/modules/dropdown.js4238
-rw-r--r--semantic/src/definitions/modules/dropdown.less1850
-rw-r--r--semantic/src/definitions/modules/embed.js709
-rw-r--r--semantic/src/definitions/modules/embed.less160
-rw-r--r--semantic/src/definitions/modules/modal.js1209
-rw-r--r--semantic/src/definitions/modules/modal.less583
-rw-r--r--semantic/src/definitions/modules/nag.js492
-rw-r--r--semantic/src/definitions/modules/nag.less158
-rw-r--r--semantic/src/definitions/modules/popup.js1541
-rw-r--r--semantic/src/definitions/modules/popup.less841
-rw-r--r--semantic/src/definitions/modules/progress.js1035
-rw-r--r--semantic/src/definitions/modules/progress.less618
-rw-r--r--semantic/src/definitions/modules/rating.js554
-rw-r--r--semantic/src/definitions/modules/rating.less177
-rw-r--r--semantic/src/definitions/modules/search.js1565
-rw-r--r--semantic/src/definitions/modules/search.less560
-rw-r--r--semantic/src/definitions/modules/shape.js848
-rw-r--r--semantic/src/definitions/modules/shape.less155
-rw-r--r--semantic/src/definitions/modules/sidebar.js1036
-rw-r--r--semantic/src/definitions/modules/sidebar.less654
-rw-r--r--semantic/src/definitions/modules/slider.js1314
-rw-r--r--semantic/src/definitions/modules/slider.less417
-rw-r--r--semantic/src/definitions/modules/sticky.js957
-rw-r--r--semantic/src/definitions/modules/sticky.less74
-rw-r--r--semantic/src/definitions/modules/tab.js1001
-rw-r--r--semantic/src/definitions/modules/tab.less91
-rw-r--r--semantic/src/definitions/modules/toast.js872
-rw-r--r--semantic/src/definitions/modules/toast.less590
-rw-r--r--semantic/src/definitions/modules/transition.js1109
-rw-r--r--semantic/src/definitions/modules/transition.less82
-rw-r--r--semantic/src/definitions/views/ad.less297
-rw-r--r--semantic/src/definitions/views/card.less978
-rw-r--r--semantic/src/definitions/views/comment.less291
-rw-r--r--semantic/src/definitions/views/feed.less304
-rw-r--r--semantic/src/definitions/views/item.less559
-rw-r--r--semantic/src/definitions/views/statistic.less421
75 files changed, 0 insertions, 55650 deletions
diff --git a/semantic/src/definitions/behaviors/api.js b/semantic/src/definitions/behaviors/api.js
deleted file mode 100644
index 845046b..0000000
--- a/semantic/src/definitions/behaviors/api.js
+++ /dev/null
@@ -1,1177 +0,0 @@
-/*!
- * # Fomantic-UI - API
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isWindow = $.isWindow || function(obj) {
- return obj != null && obj === obj.window;
-};
-
- window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.api = $.fn.api = function(parameters) {
-
- var
- // use window context if none specified
- $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.api.settings, parameters)
- : $.extend({}, $.fn.api.settings),
-
- // internal aliases
- namespace = settings.namespace,
- metadata = settings.metadata,
- selector = settings.selector,
- error = settings.error,
- className = settings.className,
-
- // define namespaces for modules
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- // element that creates request
- $module = $(this),
- $form = $module.closest(selector.form),
-
- // context used for state
- $context = (settings.stateContext)
- ? $(settings.stateContext)
- : $module,
-
- // request details
- ajaxSettings,
- requestSettings,
- url,
- data,
- requestStartTime,
-
- // standard module
- element = this,
- context = $context[0],
- instance = $module.data(moduleNamespace),
- module
- ;
-
- module = {
-
- initialize: function() {
- if(!methodInvoked) {
- module.bind.events();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module for', element);
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- },
-
- bind: {
- events: function() {
- var
- triggerEvent = module.get.event()
- ;
- if( triggerEvent ) {
- module.verbose('Attaching API events to element', triggerEvent);
- $module
- .on(triggerEvent + eventNamespace, module.event.trigger)
- ;
- }
- else if(settings.on == 'now') {
- module.debug('Querying API endpoint immediately');
- module.query();
- }
- }
- },
-
- decode: {
- json: function(response) {
- if(response !== undefined && typeof response == 'string') {
- try {
- response = JSON.parse(response);
- }
- catch(e) {
- // isnt json string
- }
- }
- return response;
- }
- },
-
- read: {
- cachedResponse: function(url) {
- var
- response
- ;
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- response = sessionStorage.getItem(url);
- module.debug('Using cached response', url, response);
- response = module.decode.json(response);
- return response;
- }
- },
- write: {
- cachedResponse: function(url, response) {
- if(response && response === '') {
- module.debug('Response empty, not caching', response);
- return;
- }
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- if( $.isPlainObject(response) ) {
- response = JSON.stringify(response);
- }
- sessionStorage.setItem(url, response);
- module.verbose('Storing cached response for url', url, response);
- }
- },
-
- query: function() {
-
- if(module.is.disabled()) {
- module.debug('Element is disabled API request aborted');
- return;
- }
-
- if(module.is.loading()) {
- if(settings.interruptRequests) {
- module.debug('Interrupting previous request');
- module.abort();
- }
- else {
- module.debug('Cancelling request, previous request is still pending');
- return;
- }
- }
-
- // pass element metadata to url (value, text)
- if(settings.defaultData) {
- $.extend(true, settings.urlData, module.get.defaultData());
- }
-
- // Add form content
- if(settings.serializeForm) {
- settings.data = module.add.formData(settings.data);
- }
-
- // call beforesend and get any settings changes
- requestSettings = module.get.settings();
-
- // check if before send cancelled request
- if(requestSettings === false) {
- module.cancelled = true;
- module.error(error.beforeSend);
- return;
- }
- else {
- module.cancelled = false;
- }
-
- // get url
- url = module.get.templatedURL();
-
- if(!url && !module.is.mocked()) {
- module.error(error.missingURL);
- return;
- }
-
- // replace variables
- url = module.add.urlData( url );
- // missing url parameters
- if( !url && !module.is.mocked()) {
- return;
- }
-
- requestSettings.url = settings.base + url;
-
- // look for jQuery ajax parameters in settings
- ajaxSettings = $.extend(true, {}, settings, {
- type : settings.method || settings.type,
- data : data,
- url : settings.base + url,
- beforeSend : settings.beforeXHR,
- success : function() {},
- failure : function() {},
- complete : function() {}
- });
-
- module.debug('Querying URL', ajaxSettings.url);
- module.verbose('Using AJAX settings', ajaxSettings);
- if(settings.cache === 'local' && module.read.cachedResponse(url)) {
- module.debug('Response returned from local cache');
- module.request = module.create.request();
- module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);
- return;
- }
-
- if( !settings.throttle ) {
- module.debug('Sending request', data, ajaxSettings.method);
- module.send.request();
- }
- else {
- if(!settings.throttleFirstRequest && !module.timer) {
- module.debug('Sending request', data, ajaxSettings.method);
- module.send.request();
- module.timer = setTimeout(function(){}, settings.throttle);
- }
- else {
- module.debug('Throttling request', settings.throttle);
- clearTimeout(module.timer);
- module.timer = setTimeout(function() {
- if(module.timer) {
- delete module.timer;
- }
- module.debug('Sending throttled request', data, ajaxSettings.method);
- module.send.request();
- }, settings.throttle);
- }
- }
-
- },
-
- should: {
- removeError: function() {
- return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );
- }
- },
-
- is: {
- disabled: function() {
- return ($module.filter(selector.disabled).length > 0);
- },
- expectingJSON: function() {
- return settings.dataType === 'json' || settings.dataType === 'jsonp';
- },
- form: function() {
- return $module.is('form') || $context.is('form');
- },
- mocked: function() {
- return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);
- },
- input: function() {
- return $module.is('input');
- },
- loading: function() {
- return (module.request)
- ? (module.request.state() == 'pending')
- : false
- ;
- },
- abortedRequest: function(xhr) {
- if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {
- module.verbose('XHR request determined to be aborted');
- return true;
- }
- else {
- module.verbose('XHR request was not aborted');
- return false;
- }
- },
- validResponse: function(response) {
- if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) {
- module.verbose('Response is not JSON, skipping validation', settings.successTest, response);
- return true;
- }
- module.debug('Checking JSON returned success', settings.successTest, response);
- if( settings.successTest(response) ) {
- module.debug('Response passed success test', response);
- return true;
- }
- else {
- module.debug('Response failed success test', response);
- return false;
- }
- }
- },
-
- was: {
- cancelled: function() {
- return (module.cancelled || false);
- },
- succesful: function() {
- module.verbose('This behavior will be deleted due to typo. Use "was successful" instead.');
- return module.was.successful();
- },
- successful: function() {
- return (module.request && module.request.state() == 'resolved');
- },
- failure: function() {
- return (module.request && module.request.state() == 'rejected');
- },
- complete: function() {
- return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );
- }
- },
-
- add: {
- urlData: function(url, urlData) {
- var
- requiredVariables,
- optionalVariables
- ;
- if(url) {
- requiredVariables = url.match(settings.regExp.required);
- optionalVariables = url.match(settings.regExp.optional);
- urlData = urlData || settings.urlData;
- if(requiredVariables) {
- module.debug('Looking for required URL variables', requiredVariables);
- $.each(requiredVariables, function(index, templatedString) {
- var
- // allow legacy {$var} style
- variable = (templatedString.indexOf('$') !== -1)
- ? templatedString.substr(2, templatedString.length - 3)
- : templatedString.substr(1, templatedString.length - 2),
- value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
- ? urlData[variable]
- : ($module.data(variable) !== undefined)
- ? $module.data(variable)
- : ($context.data(variable) !== undefined)
- ? $context.data(variable)
- : urlData[variable]
- ;
- // remove value
- if(value === undefined) {
- module.error(error.requiredParameter, variable, url);
- url = false;
- return false;
- }
- else {
- module.verbose('Found required variable', variable, value);
- value = (settings.encodeParameters)
- ? module.get.urlEncodedValue(value)
- : value
- ;
- url = url.replace(templatedString, value);
- }
- });
- }
- if(optionalVariables) {
- module.debug('Looking for optional URL variables', requiredVariables);
- $.each(optionalVariables, function(index, templatedString) {
- var
- // allow legacy {/$var} style
- variable = (templatedString.indexOf('$') !== -1)
- ? templatedString.substr(3, templatedString.length - 4)
- : templatedString.substr(2, templatedString.length - 3),
- value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
- ? urlData[variable]
- : ($module.data(variable) !== undefined)
- ? $module.data(variable)
- : ($context.data(variable) !== undefined)
- ? $context.data(variable)
- : urlData[variable]
- ;
- // optional replacement
- if(value !== undefined) {
- module.verbose('Optional variable Found', variable, value);
- url = url.replace(templatedString, value);
- }
- else {
- module.verbose('Optional variable not found', variable);
- // remove preceding slash if set
- if(url.indexOf('/' + templatedString) !== -1) {
- url = url.replace('/' + templatedString, '');
- }
- else {
- url = url.replace(templatedString, '');
- }
- }
- });
- }
- }
- return url;
- },
- formData: function(data) {
- var
- canSerialize = ($.fn.serializeObject !== undefined),
- formData = (canSerialize)
- ? $form.serializeObject()
- : $form.serialize(),
- hasOtherData
- ;
- data = data || settings.data;
- hasOtherData = $.isPlainObject(data);
-
- if(hasOtherData) {
- if(canSerialize) {
- module.debug('Extending existing data with form data', data, formData);
- data = $.extend(true, {}, data, formData);
- }
- else {
- module.error(error.missingSerialize);
- module.debug('Cant extend data. Replacing data with form data', data, formData);
- data = formData;
- }
- }
- else {
- module.debug('Adding form data', formData);
- data = formData;
- }
- return data;
- }
- },
-
- send: {
- request: function() {
- module.set.loading();
- module.request = module.create.request();
- if( module.is.mocked() ) {
- module.mockedXHR = module.create.mockedXHR();
- }
- else {
- module.xhr = module.create.xhr();
- }
- settings.onRequest.call(context, module.request, module.xhr);
- }
- },
-
- event: {
- trigger: function(event) {
- module.query();
- if(event.type == 'submit' || event.type == 'click') {
- event.preventDefault();
- }
- },
- xhr: {
- always: function() {
- // nothing special
- },
- done: function(response, textStatus, xhr) {
- var
- context = this,
- elapsedTime = (new Date().getTime() - requestStartTime),
- timeLeft = (settings.loadingDuration - elapsedTime),
- translatedResponse = ( $.isFunction(settings.onResponse) )
- ? module.is.expectingJSON() && !settings.rawResponse
- ? settings.onResponse.call(context, $.extend(true, {}, response))
- : settings.onResponse.call(context, response)
- : false
- ;
- timeLeft = (timeLeft > 0)
- ? timeLeft
- : 0
- ;
- if(translatedResponse) {
- module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);
- response = translatedResponse;
- }
- if(timeLeft > 0) {
- module.debug('Response completed early delaying state change by', timeLeft);
- }
- setTimeout(function() {
- if( module.is.validResponse(response) ) {
- module.request.resolveWith(context, [response, xhr]);
- }
- else {
- module.request.rejectWith(context, [xhr, 'invalid']);
- }
- }, timeLeft);
- },
- fail: function(xhr, status, httpMessage) {
- var
- context = this,
- elapsedTime = (new Date().getTime() - requestStartTime),
- timeLeft = (settings.loadingDuration - elapsedTime)
- ;
- timeLeft = (timeLeft > 0)
- ? timeLeft
- : 0
- ;
- if(timeLeft > 0) {
- module.debug('Response completed early delaying state change by', timeLeft);
- }
- setTimeout(function() {
- if( module.is.abortedRequest(xhr) ) {
- module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);
- }
- else {
- module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);
- }
- }, timeLeft);
- }
- },
- request: {
- done: function(response, xhr) {
- module.debug('Successful API Response', response);
- if(settings.cache === 'local' && url) {
- module.write.cachedResponse(url, response);
- module.debug('Saving server response locally', module.cache);
- }
- settings.onSuccess.call(context, response, $module, xhr);
- },
- complete: function(firstParameter, secondParameter) {
- var
- xhr,
- response
- ;
- // have to guess callback parameters based on request success
- if( module.was.successful() ) {
- response = firstParameter;
- xhr = secondParameter;
- }
- else {
- xhr = firstParameter;
- response = module.get.responseFromXHR(xhr);
- }
- module.remove.loading();
- settings.onComplete.call(context, response, $module, xhr);
- },
- fail: function(xhr, status, httpMessage) {
- var
- // pull response from xhr if available
- response = module.get.responseFromXHR(xhr),
- errorMessage = module.get.errorFromRequest(response, status, httpMessage)
- ;
- if(status == 'aborted') {
- module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);
- settings.onAbort.call(context, status, $module, xhr);
- return true;
- }
- else if(status == 'invalid') {
- module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);
- }
- else if(status == 'error') {
- if(xhr !== undefined) {
- module.debug('XHR produced a server error', status, httpMessage);
- // make sure we have an error to display to console
- if( (xhr.status < 200 || xhr.status >= 300) && httpMessage !== undefined && httpMessage !== '') {
- module.error(error.statusMessage + httpMessage, ajaxSettings.url);
- }
- settings.onError.call(context, errorMessage, $module, xhr);
- }
- }
-
- if(settings.errorDuration && status !== 'aborted') {
- module.debug('Adding error state');
- module.set.error();
- if( module.should.removeError() ) {
- setTimeout(module.remove.error, settings.errorDuration);
- }
- }
- module.debug('API Request failed', errorMessage, xhr);
- settings.onFailure.call(context, response, $module, xhr);
- }
- }
- },
-
- create: {
-
- request: function() {
- // api request promise
- return $.Deferred()
- .always(module.event.request.complete)
- .done(module.event.request.done)
- .fail(module.event.request.fail)
- ;
- },
-
- mockedXHR: function () {
- var
- // xhr does not simulate these properties of xhr but must return them
- textStatus = false,
- status = false,
- httpMessage = false,
- responder = settings.mockResponse || settings.response,
- asyncResponder = settings.mockResponseAsync || settings.responseAsync,
- asyncCallback,
- response,
- mockedXHR
- ;
-
- mockedXHR = $.Deferred()
- .always(module.event.xhr.complete)
- .done(module.event.xhr.done)
- .fail(module.event.xhr.fail)
- ;
-
- if(responder) {
- if( $.isFunction(responder) ) {
- module.debug('Using specified synchronous callback', responder);
- response = responder.call(context, requestSettings);
- }
- else {
- module.debug('Using settings specified response', responder);
- response = responder;
- }
- // simulating response
- mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
- }
- else if( $.isFunction(asyncResponder) ) {
- asyncCallback = function(response) {
- module.debug('Async callback returned response', response);
-
- if(response) {
- mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
- }
- else {
- mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);
- }
- };
- module.debug('Using specified async response callback', asyncResponder);
- asyncResponder.call(context, requestSettings, asyncCallback);
- }
- return mockedXHR;
- },
-
- xhr: function() {
- var
- xhr
- ;
- // ajax request promise
- xhr = $.ajax(ajaxSettings)
- .always(module.event.xhr.always)
- .done(module.event.xhr.done)
- .fail(module.event.xhr.fail)
- ;
- module.verbose('Created server request', xhr, ajaxSettings);
- return xhr;
- }
- },
-
- set: {
- error: function() {
- module.verbose('Adding error state to element', $context);
- $context.addClass(className.error);
- },
- loading: function() {
- module.verbose('Adding loading state to element', $context);
- $context.addClass(className.loading);
- requestStartTime = new Date().getTime();
- }
- },
-
- remove: {
- error: function() {
- module.verbose('Removing error state from element', $context);
- $context.removeClass(className.error);
- },
- loading: function() {
- module.verbose('Removing loading state from element', $context);
- $context.removeClass(className.loading);
- }
- },
-
- get: {
- responseFromXHR: function(xhr) {
- return $.isPlainObject(xhr)
- ? (module.is.expectingJSON())
- ? module.decode.json(xhr.responseText)
- : xhr.responseText
- : false
- ;
- },
- errorFromRequest: function(response, status, httpMessage) {
- return ($.isPlainObject(response) && response.error !== undefined)
- ? response.error // use json error message
- : (settings.error[status] !== undefined) // use server error message
- ? settings.error[status]
- : httpMessage
- ;
- },
- request: function() {
- return module.request || false;
- },
- xhr: function() {
- return module.xhr || false;
- },
- settings: function() {
- var
- runSettings
- ;
- runSettings = settings.beforeSend.call($module, settings);
- if(runSettings) {
- if(runSettings.success !== undefined) {
- module.debug('Legacy success callback detected', runSettings);
- module.error(error.legacyParameters, runSettings.success);
- runSettings.onSuccess = runSettings.success;
- }
- if(runSettings.failure !== undefined) {
- module.debug('Legacy failure callback detected', runSettings);
- module.error(error.legacyParameters, runSettings.failure);
- runSettings.onFailure = runSettings.failure;
- }
- if(runSettings.complete !== undefined) {
- module.debug('Legacy complete callback detected', runSettings);
- module.error(error.legacyParameters, runSettings.complete);
- runSettings.onComplete = runSettings.complete;
- }
- }
- if(runSettings === undefined) {
- module.error(error.noReturnedValue);
- }
- if(runSettings === false) {
- return runSettings;
- }
- return (runSettings !== undefined)
- ? $.extend(true, {}, runSettings)
- : $.extend(true, {}, settings)
- ;
- },
- urlEncodedValue: function(value) {
- var
- decodedValue = window.decodeURIComponent(value),
- encodedValue = window.encodeURIComponent(value),
- alreadyEncoded = (decodedValue !== value)
- ;
- if(alreadyEncoded) {
- module.debug('URL value is already encoded, avoiding double encoding', value);
- return value;
- }
- module.verbose('Encoding value using encodeURIComponent', value, encodedValue);
- return encodedValue;
- },
- defaultData: function() {
- var
- data = {}
- ;
- if( !$.isWindow(element) ) {
- if( module.is.input() ) {
- data.value = $module.val();
- }
- else if( module.is.form() ) {
-
- }
- else {
- data.text = $module.text();
- }
- }
- return data;
- },
- event: function() {
- if( $.isWindow(element) || settings.on == 'now' ) {
- module.debug('API called without element, no events attached');
- return false;
- }
- else if(settings.on == 'auto') {
- if( $module.is('input') ) {
- return (element.oninput !== undefined)
- ? 'input'
- : (element.onpropertychange !== undefined)
- ? 'propertychange'
- : 'keyup'
- ;
- }
- else if( $module.is('form') ) {
- return 'submit';
- }
- else {
- return 'click';
- }
- }
- else {
- return settings.on;
- }
- },
- templatedURL: function(action) {
- action = action || $module.data(metadata.action) || settings.action || false;
- url = $module.data(metadata.url) || settings.url || false;
- if(url) {
- module.debug('Using specified url', url);
- return url;
- }
- if(action) {
- module.debug('Looking up url for action', action, settings.api);
- if(settings.api[action] === undefined && !module.is.mocked()) {
- module.error(error.missingAction, settings.action, settings.api);
- return;
- }
- url = settings.api[action];
- }
- else if( module.is.form() ) {
- url = $module.attr('action') || $context.attr('action') || false;
- module.debug('No url or action specified, defaulting to form action', url);
- }
- return url;
- }
- },
-
- abort: function() {
- var
- xhr = module.get.xhr()
- ;
- if( xhr && xhr.state() !== 'resolved') {
- module.debug('Cancelling API request');
- xhr.abort();
- }
- },
-
- // reset state
- reset: function() {
- module.remove.error();
- module.remove.loading();
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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
- ;
-};
-
-$.api.settings = {
-
- name : 'API',
- namespace : 'api',
-
- debug : false,
- verbose : false,
- performance : true,
-
- // object containing all templates endpoints
- api : {},
-
- // whether to cache responses
- cache : true,
-
- // whether new requests should abort previous requests
- interruptRequests : true,
-
- // event binding
- on : 'auto',
-
- // context for applying state classes
- stateContext : false,
-
- // duration for loading state
- loadingDuration : 0,
-
- // whether to hide errors after a period of time
- hideError : 'auto',
-
- // duration for error state
- errorDuration : 2000,
-
- // whether parameters should be encoded with encodeURIComponent
- encodeParameters : true,
-
- // API action to use
- action : false,
-
- // templated URL to use
- url : false,
-
- // base URL to apply to all endpoints
- base : '',
-
- // data that will
- urlData : {},
-
- // whether to add default data to url data
- defaultData : true,
-
- // whether to serialize closest form
- serializeForm : false,
-
- // how long to wait before request should occur
- throttle : 0,
-
- // whether to throttle first request or only repeated
- throttleFirstRequest : true,
-
- // standard ajax settings
- method : 'get',
- data : {},
- dataType : 'json',
-
- // mock response
- mockResponse : false,
- mockResponseAsync : false,
-
- // aliases for mock
- response : false,
- responseAsync : false,
-
-// whether onResponse should work with response value without force converting into an object
- rawResponse : false,
-
- // callbacks before request
- beforeSend : function(settings) { return settings; },
- beforeXHR : function(xhr) {},
- onRequest : function(promise, xhr) {},
-
- // after request
- onResponse : false, // function(response) { },
-
- // response was successful, if JSON passed validation
- onSuccess : function(response, $module) {},
-
- // request finished without aborting
- onComplete : function(response, $module) {},
-
- // failed JSON success test
- onFailure : function(response, $module) {},
-
- // server error
- onError : function(errorMessage, $module) {},
-
- // request aborted
- onAbort : function(errorMessage, $module) {},
-
- successTest : false,
-
- // errors
- error : {
- beforeSend : 'The before send function has aborted the request',
- error : 'There was an error with your request',
- exitConditions : 'API Request Aborted. Exit conditions met',
- JSONParse : 'JSON could not be parsed during error handling',
- legacyParameters : 'You are using legacy API success callback names',
- method : 'The method you called is not defined',
- missingAction : 'API action used but no url was defined',
- missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object',
- missingURL : 'No URL specified for api event',
- noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
- noStorage : 'Caching responses locally requires session storage',
- parseError : 'There was an error parsing your request',
- requiredParameter : 'Missing a required URL parameter: ',
- statusMessage : 'Server gave an error: ',
- timeout : 'Your request timed out'
- },
-
- regExp : {
- required : /\{\$*[A-z0-9]+\}/g,
- optional : /\{\/\$*[A-z0-9]+\}/g,
- },
-
- className: {
- loading : 'loading',
- error : 'error'
- },
-
- selector: {
- disabled : '.disabled',
- form : 'form'
- },
-
- metadata: {
- action : 'action',
- url : 'url'
- }
-};
-
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/form.js b/semantic/src/definitions/behaviors/form.js
deleted file mode 100644
index 6fbb07e..0000000
--- a/semantic/src/definitions/behaviors/form.js
+++ /dev/null
@@ -1,2033 +0,0 @@
-/*!
- * # Fomantic-UI - Form Validation
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.form = function(parameters) {
- var
- $allModules = $(this),
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- legacyParameters = arguments[1],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
- returnedValue
- ;
- $allModules
- .each(function() {
- var
- $module = $(this),
- element = this,
-
- formErrors = [],
- keyHeldDown = false,
-
- // set at run-time
- $field,
- $group,
- $message,
- $prompt,
- $submit,
- $clear,
- $reset,
-
- settings,
- validation,
-
- metadata,
- selector,
- className,
- regExp,
- error,
-
- namespace,
- moduleNamespace,
- eventNamespace,
-
- submitting = false,
- dirty = false,
- history = ['clean', 'clean'],
-
- instance,
- module
- ;
-
- module = {
-
- initialize: function() {
-
- // settings grabbed at run time
- module.get.settings();
- if(methodInvoked) {
- if(instance === undefined) {
- module.instantiate();
- }
- module.invoke(query);
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.verbose('Initializing form validation', $module, settings);
- module.bindEvents();
- module.set.defaults();
- if (settings.autoCheckRequired) {
- module.set.autoCheck();
- }
- module.instantiate();
- }
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module', instance);
- module.removeEvents();
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing selector cache');
- $field = $module.find(selector.field);
- $group = $module.find(selector.group);
- $message = $module.find(selector.message);
- $prompt = $module.find(selector.prompt);
-
- $submit = $module.find(selector.submit);
- $clear = $module.find(selector.clear);
- $reset = $module.find(selector.reset);
- },
-
- submit: function() {
- module.verbose('Submitting form', $module);
- submitting = true;
- $module.submit();
- },
-
- attachEvents: function(selector, action) {
- action = action || 'submit';
- $(selector).on('click' + eventNamespace, function(event) {
- module[action]();
- event.preventDefault();
- });
- },
-
- bindEvents: function() {
- module.verbose('Attaching form events');
- $module
- .on('submit' + eventNamespace, module.validate.form)
- .on('blur' + eventNamespace, selector.field, module.event.field.blur)
- .on('click' + eventNamespace, selector.submit, module.submit)
- .on('click' + eventNamespace, selector.reset, module.reset)
- .on('click' + eventNamespace, selector.clear, module.clear)
- ;
- if(settings.keyboardShortcuts) {
- $module.on('keydown' + eventNamespace, selector.field, module.event.field.keydown);
- }
- $field.each(function(index, el) {
- var
- $input = $(el),
- type = $input.prop('type'),
- inputEvent = module.get.changeEvent(type, $input)
- ;
- $input.on(inputEvent + eventNamespace, module.event.field.change);
- });
-
- // Dirty events
- if (settings.preventLeaving) {
- $(window).on('beforeunload' + eventNamespace, module.event.beforeUnload);
- }
-
- $field.on('change click keyup keydown blur', function(e) {
- $(this).triggerHandler(e.type + ".dirty");
- });
-
- $field.on('change.dirty click.dirty keyup.dirty keydown.dirty blur.dirty', module.determine.isDirty);
-
- $module.on('dirty' + eventNamespace, function(e) {
- settings.onDirty.call();
- });
-
- $module.on('clean' + eventNamespace, function(e) {
- settings.onClean.call();
- })
- },
-
- clear: function() {
- $field.each(function (index, el) {
- var
- $field = $(el),
- $element = $field.parent(),
- $fieldGroup = $field.closest($group),
- $prompt = $fieldGroup.find(selector.prompt),
- $calendar = $field.closest(selector.uiCalendar),
- defaultValue = $field.data(metadata.defaultValue) || '',
- isCheckbox = $element.is(selector.uiCheckbox),
- isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
- isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
- isErrored = $fieldGroup.hasClass(className.error)
- ;
- if(isErrored) {
- module.verbose('Resetting error on field', $fieldGroup);
- $fieldGroup.removeClass(className.error);
- $prompt.remove();
- }
- if(isDropdown) {
- module.verbose('Resetting dropdown value', $element, defaultValue);
- $element.dropdown('clear', true);
- }
- else if(isCheckbox) {
- $field.prop('checked', false);
- }
- else if (isCalendar) {
- $calendar.calendar('clear');
- }
- else {
- module.verbose('Resetting field value', $field, defaultValue);
- $field.val('');
- }
- });
- module.remove.states();
- },
-
- reset: function() {
- $field.each(function (index, el) {
- var
- $field = $(el),
- $element = $field.parent(),
- $fieldGroup = $field.closest($group),
- $calendar = $field.closest(selector.uiCalendar),
- $prompt = $fieldGroup.find(selector.prompt),
- defaultValue = $field.data(metadata.defaultValue),
- isCheckbox = $element.is(selector.uiCheckbox),
- isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
- isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
- isErrored = $fieldGroup.hasClass(className.error)
- ;
- if(defaultValue === undefined) {
- return;
- }
- if(isErrored) {
- module.verbose('Resetting error on field', $fieldGroup);
- $fieldGroup.removeClass(className.error);
- $prompt.remove();
- }
- if(isDropdown) {
- module.verbose('Resetting dropdown value', $element, defaultValue);
- $element.dropdown('restore defaults', true);
- }
- else if(isCheckbox) {
- module.verbose('Resetting checkbox value', $element, defaultValue);
- $field.prop('checked', defaultValue);
- }
- else if (isCalendar) {
- $calendar.calendar('set date', defaultValue);
- }
- else {
- module.verbose('Resetting field value', $field, defaultValue);
- $field.val(defaultValue);
- }
- });
- module.remove.states();
- },
-
- determine: {
- isValid: function() {
- var
- allValid = true
- ;
- $.each(validation, function(fieldName, field) {
- if( !( module.validate.field(field, fieldName, true) ) ) {
- allValid = false;
- }
- });
- return allValid;
- },
- isDirty: function(e) {
- var formIsDirty = false;
-
- $field.each(function(index, el) {
- var
- $el = $(el),
- isCheckbox = ($el.filter(selector.checkbox).length > 0),
- isDirty
- ;
-
- if (isCheckbox) {
- isDirty = module.is.checkboxDirty($el);
- } else {
- isDirty = module.is.fieldDirty($el);
- }
-
- $el.data(settings.metadata.isDirty, isDirty);
-
- formIsDirty |= isDirty;
- });
-
- if (formIsDirty) {
- module.set.dirty();
- } else {
- module.set.clean();
- }
-
- if (e && e.namespace === 'dirty') {
- e.stopImmediatePropagation();
- e.preventDefault();
- }
- }
- },
-
- is: {
- bracketedRule: function(rule) {
- return (rule.type && rule.type.match(settings.regExp.bracket));
- },
- shorthandFields: function(fields) {
- var
- fieldKeys = Object.keys(fields),
- firstRule = fields[fieldKeys[0]]
- ;
- return module.is.shorthandRules(firstRule);
- },
- // duck type rule test
- shorthandRules: function(rules) {
- return (typeof rules == 'string' || Array.isArray(rules));
- },
- empty: function($field) {
- if(!$field || $field.length === 0) {
- return true;
- }
- else if($field.is(selector.checkbox)) {
- return !$field.is(':checked');
- }
- else {
- return module.is.blank($field);
- }
- },
- blank: function($field) {
- return String($field.val()).trim() === '';
- },
- valid: function(field, showErrors) {
- var
- allValid = true
- ;
- if(field) {
- module.verbose('Checking if field is valid', field);
- return module.validate.field(validation[field], field, !!showErrors);
- }
- else {
- module.verbose('Checking if form is valid');
- $.each(validation, function(fieldName, field) {
- if( !module.is.valid(fieldName, showErrors) ) {
- allValid = false;
- }
- });
- return allValid;
- }
- },
- dirty: function() {
- return dirty;
- },
- clean: function() {
- return !dirty;
- },
- fieldDirty: function($el) {
- var initialValue = $el.data(metadata.defaultValue);
- // Explicitly check for null/undefined here as value may be `false`, so ($el.data(dataInitialValue) || '') would not work
- if (initialValue == null) { initialValue = ''; }
- else if(Array.isArray(initialValue)) {
- initialValue = initialValue.toString();
- }
- var currentValue = $el.val();
- if (currentValue == null) { currentValue = ''; }
- // multiple select values are returned as arrays which are never equal, so do string conversion first
- else if(Array.isArray(currentValue)) {
- currentValue = currentValue.toString();
- }
- // Boolean values can be encoded as "true/false" or "True/False" depending on underlying frameworks so we need a case insensitive comparison
- var boolRegex = /^(true|false)$/i;
- var isBoolValue = boolRegex.test(initialValue) && boolRegex.test(currentValue);
- if (isBoolValue) {
- var regex = new RegExp("^" + initialValue + "$", "i");
- return !regex.test(currentValue);
- }
-
- return currentValue !== initialValue;
- },
- checkboxDirty: function($el) {
- var initialValue = $el.data(metadata.defaultValue);
- var currentValue = $el.is(":checked");
-
- return initialValue !== currentValue;
- },
- justDirty: function() {
- return (history[0] === 'dirty');
- },
- justClean: function() {
- return (history[0] === 'clean');
- }
- },
-
- removeEvents: function() {
- $module.off(eventNamespace);
- $field.off(eventNamespace);
- $submit.off(eventNamespace);
- $field.off(eventNamespace);
- },
-
- event: {
- field: {
- keydown: function(event) {
- var
- $field = $(this),
- key = event.which,
- isInput = $field.is(selector.input),
- isCheckbox = $field.is(selector.checkbox),
- isInDropdown = ($field.closest(selector.uiDropdown).length > 0),
- keyCode = {
- enter : 13,
- escape : 27
- }
- ;
- if( key == keyCode.escape) {
- module.verbose('Escape key pressed blurring field');
- $field
- .blur()
- ;
- }
- if(!event.ctrlKey && key == keyCode.enter && isInput && !isInDropdown && !isCheckbox) {
- if(!keyHeldDown) {
- $field.one('keyup' + eventNamespace, module.event.field.keyup);
- module.submit();
- module.debug('Enter pressed on input submitting form');
- }
- keyHeldDown = true;
- }
- },
- keyup: function() {
- keyHeldDown = false;
- },
- blur: function(event) {
- var
- $field = $(this),
- $fieldGroup = $field.closest($group),
- validationRules = module.get.validation($field)
- ;
- if( $fieldGroup.hasClass(className.error) ) {
- module.debug('Revalidating field', $field, validationRules);
- if(validationRules) {
- module.validate.field( validationRules );
- }
- }
- else if(settings.on == 'blur') {
- if(validationRules) {
- module.validate.field( validationRules );
- }
- }
- },
- change: function(event) {
- var
- $field = $(this),
- $fieldGroup = $field.closest($group),
- validationRules = module.get.validation($field)
- ;
- if(validationRules && (settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) {
- clearTimeout(module.timer);
- module.timer = setTimeout(function() {
- module.debug('Revalidating field', $field, module.get.validation($field));
- module.validate.field( validationRules );
- if(!settings.inline) {
- module.validate.form(false,true);
- }
- }, settings.delay);
- }
- }
- },
- beforeUnload: function(event) {
- if (module.is.dirty() && !submitting) {
- var event = event || window.event;
-
- // For modern browsers
- if (event) {
- event.returnValue = settings.text.leavingMessage;
- }
-
- // For olders...
- return settings.text.leavingMessage;
- }
- }
-
- },
-
- get: {
- ancillaryValue: function(rule) {
- if(!rule.type || (!rule.value && !module.is.bracketedRule(rule))) {
- return false;
- }
- return (rule.value !== undefined)
- ? rule.value
- : rule.type.match(settings.regExp.bracket)[1] + ''
- ;
- },
- ruleName: function(rule) {
- if( module.is.bracketedRule(rule) ) {
- return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], '');
- }
- return rule.type;
- },
- changeEvent: function(type, $input) {
- if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) {
- return 'change';
- }
- else {
- return module.get.inputEvent();
- }
- },
- inputEvent: function() {
- return (document.createElement('input').oninput !== undefined)
- ? 'input'
- : (document.createElement('input').onpropertychange !== undefined)
- ? 'propertychange'
- : 'keyup'
- ;
- },
- fieldsFromShorthand: function(fields) {
- var
- fullFields = {}
- ;
- $.each(fields, function(name, rules) {
- if(typeof rules == 'string') {
- rules = [rules];
- }
- fullFields[name] = {
- rules: []
- };
- $.each(rules, function(index, rule) {
- fullFields[name].rules.push({ type: rule });
- });
- });
- return fullFields;
- },
- prompt: function(rule, field) {
- var
- ruleName = module.get.ruleName(rule),
- ancillary = module.get.ancillaryValue(rule),
- $field = module.get.field(field.identifier),
- value = $field.val(),
- prompt = $.isFunction(rule.prompt)
- ? rule.prompt(value)
- : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
- requiresValue = (prompt.search('{value}') !== -1),
- requiresName = (prompt.search('{name}') !== -1),
- $label,
- name
- ;
- if(requiresValue) {
- prompt = prompt.replace(/\{value\}/g, $field.val());
- }
- if(requiresName) {
- $label = $field.closest(selector.group).find('label').eq(0);
- name = ($label.length == 1)
- ? $label.text()
- : $field.prop('placeholder') || settings.text.unspecifiedField
- ;
- prompt = prompt.replace(/\{name\}/g, name);
- }
- prompt = prompt.replace(/\{identifier\}/g, field.identifier);
- prompt = prompt.replace(/\{ruleValue\}/g, ancillary);
- if(!rule.prompt) {
- module.verbose('Using default validation prompt for type', prompt, ruleName);
- }
- return prompt;
- },
- settings: function() {
- if($.isPlainObject(parameters)) {
- var
- keys = Object.keys(parameters),
- isLegacySettings = (keys.length > 0)
- ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined)
- : false
- ;
- if(isLegacySettings) {
- // 1.x (ducktyped)
- settings = $.extend(true, {}, $.fn.form.settings, legacyParameters);
- validation = $.extend({}, $.fn.form.settings.defaults, parameters);
- module.error(settings.error.oldSyntax, element);
- module.verbose('Extending settings from legacy parameters', validation, settings);
- }
- else {
- // 2.x
- if(parameters.fields && module.is.shorthandFields(parameters.fields)) {
- parameters.fields = module.get.fieldsFromShorthand(parameters.fields);
- }
- settings = $.extend(true, {}, $.fn.form.settings, parameters);
- validation = $.extend({}, $.fn.form.settings.defaults, settings.fields);
- module.verbose('Extending settings', validation, settings);
- }
- }
- else {
- settings = $.fn.form.settings;
- validation = $.fn.form.settings.defaults;
- module.verbose('Using default form validation', validation, settings);
- }
-
- // shorthand
- namespace = settings.namespace;
- metadata = settings.metadata;
- selector = settings.selector;
- className = settings.className;
- regExp = settings.regExp;
- error = settings.error;
- moduleNamespace = 'module-' + namespace;
- eventNamespace = '.' + namespace;
-
- // grab instance
- instance = $module.data(moduleNamespace);
-
- // refresh selector cache
- module.refresh();
- },
- field: function(identifier) {
- module.verbose('Finding field with identifier', identifier);
- identifier = module.escape.string(identifier);
- var t;
- if((t=$field.filter('#' + identifier)).length > 0 ) {
- return t;
- }
- if((t=$field.filter('[name="' + identifier +'"]')).length > 0 ) {
- return t;
- }
- if((t=$field.filter('[name="' + identifier +'[]"]')).length > 0 ) {
- return t;
- }
- if((t=$field.filter('[data-' + metadata.validate + '="'+ identifier +'"]')).length > 0 ) {
- return t;
- }
- return $('<input/>');
- },
- fields: function(fields) {
- var
- $fields = $()
- ;
- $.each(fields, function(index, name) {
- $fields = $fields.add( module.get.field(name) );
- });
- return $fields;
- },
- validation: function($field) {
- var
- fieldValidation,
- identifier
- ;
- if(!validation) {
- return false;
- }
- $.each(validation, function(fieldName, field) {
- identifier = field.identifier || fieldName;
- $.each(module.get.field(identifier), function(index, groupField) {
- if(groupField == $field[0]) {
- field.identifier = identifier;
- fieldValidation = field;
- return false;
- }
- });
- });
- return fieldValidation || false;
- },
- value: function (field) {
- var
- fields = [],
- results
- ;
- fields.push(field);
- results = module.get.values.call(element, fields);
- return results[field];
- },
- values: function (fields) {
- var
- $fields = Array.isArray(fields)
- ? module.get.fields(fields)
- : $field,
- values = {}
- ;
- $fields.each(function(index, field) {
- var
- $field = $(field),
- $calendar = $field.closest(selector.uiCalendar),
- name = $field.prop('name'),
- value = $field.val(),
- isCheckbox = $field.is(selector.checkbox),
- isRadio = $field.is(selector.radio),
- isMultiple = (name.indexOf('[]') !== -1),
- isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
- isChecked = (isCheckbox)
- ? $field.is(':checked')
- : false
- ;
- if(name) {
- if(isMultiple) {
- name = name.replace('[]', '');
- if(!values[name]) {
- values[name] = [];
- }
- if(isCheckbox) {
- if(isChecked) {
- values[name].push(value || true);
- }
- else {
- values[name].push(false);
- }
- }
- else {
- values[name].push(value);
- }
- }
- else {
- if(isRadio) {
- if(values[name] === undefined || values[name] === false) {
- values[name] = (isChecked)
- ? value || true
- : false
- ;
- }
- }
- else if(isCheckbox) {
- if(isChecked) {
- values[name] = value || true;
- }
- else {
- values[name] = false;
- }
- }
- else if(isCalendar) {
- var date = $calendar.calendar('get date');
-
- if (date !== null) {
- if (settings.dateHandling == 'date') {
- values[name] = date;
- } else if(settings.dateHandling == 'input') {
- values[name] = $calendar.calendar('get input date')
- } else if (settings.dateHandling == 'formatter') {
- var type = $calendar.calendar('setting', 'type');
-
- switch(type) {
- case 'date':
- values[name] = settings.formatter.date(date);
- break;
-
- case 'datetime':
- values[name] = settings.formatter.datetime(date);
- break;
-
- case 'time':
- values[name] = settings.formatter.time(date);
- break;
-
- case 'month':
- values[name] = settings.formatter.month(date);
- break;
-
- case 'year':
- values[name] = settings.formatter.year(date);
- break;
-
- default:
- module.debug('Wrong calendar mode', $calendar, type);
- values[name] = '';
- }
- }
- } else {
- values[name] = '';
- }
- } else {
- values[name] = value;
- }
- }
- }
- });
- return values;
- },
- dirtyFields: function() {
- return $field.filter(function(index, e) {
- return $(e).data(metadata.isDirty);
- });
- }
- },
-
- has: {
-
- field: function(identifier) {
- module.verbose('Checking for existence of a field with identifier', identifier);
- identifier = module.escape.string(identifier);
- if(typeof identifier !== 'string') {
- module.error(error.identifier, identifier);
- }
- if($field.filter('#' + identifier).length > 0 ) {
- return true;
- }
- else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
- return true;
- }
- else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
- return true;
- }
- return false;
- }
-
- },
-
- can: {
- useElement: function(element){
- if ($.fn[element] !== undefined) {
- return true;
- }
- module.error(error.noElement.replace('{element}',element));
- return false;
- }
- },
-
- escape: {
- string: function(text) {
- text = String(text);
- return text.replace(regExp.escape, '\\$&');
- }
- },
-
- add: {
- // alias
- rule: function(name, rules) {
- module.add.field(name, rules);
- },
- field: function(name, rules) {
- // Validation should have at least a standard format
- if(validation[name] === undefined || validation[name].rules === undefined) {
- validation[name] = {
- rules: []
- };
- }
- var
- newValidation = {
- rules: []
- }
- ;
- if(module.is.shorthandRules(rules)) {
- rules = Array.isArray(rules)
- ? rules
- : [rules]
- ;
- $.each(rules, function(_index, rule) {
- newValidation.rules.push({ type: rule });
- });
- }
- else {
- newValidation.rules = rules.rules;
- }
- // For each new rule, check if there's not already one with the same type
- $.each(newValidation.rules, function (_index, rule) {
- if ($.grep(validation[name].rules, function(item){ return item.type == rule.type; }).length == 0) {
- validation[name].rules.push(rule);
- }
- });
- module.debug('Adding rules', newValidation.rules, validation);
- },
- fields: function(fields) {
- var
- newValidation
- ;
- if(fields && module.is.shorthandFields(fields)) {
- newValidation = module.get.fieldsFromShorthand(fields);
- }
- else {
- newValidation = fields;
- }
- validation = $.extend({}, validation, newValidation);
- },
- prompt: function(identifier, errors, internal) {
- var
- $field = module.get.field(identifier),
- $fieldGroup = $field.closest($group),
- $prompt = $fieldGroup.children(selector.prompt),
- promptExists = ($prompt.length !== 0)
- ;
- errors = (typeof errors == 'string')
- ? [errors]
- : errors
- ;
- module.verbose('Adding field error state', identifier);
- if(!internal) {
- $fieldGroup
- .addClass(className.error)
- ;
- }
- if(settings.inline) {
- if(!promptExists) {
- $prompt = settings.templates.prompt(errors, className.label);
- $prompt
- .appendTo($fieldGroup)
- ;
- }
- $prompt
- .html(errors[0])
- ;
- if(!promptExists) {
- if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
- module.verbose('Displaying error with css transition', settings.transition);
- $prompt.transition(settings.transition + ' in', settings.duration);
- }
- else {
- module.verbose('Displaying error with fallback javascript animation');
- $prompt
- .fadeIn(settings.duration)
- ;
- }
- }
- else {
- module.verbose('Inline errors are disabled, no inline error added', identifier);
- }
- }
- },
- errors: function(errors) {
- module.debug('Adding form error messages', errors);
- module.set.error();
- $message
- .html( settings.templates.error(errors) )
- ;
- }
- },
-
- remove: {
- errors: function() {
- module.debug('Removing form error messages');
- $message.empty();
- },
- states: function() {
- $module.removeClass(className.error).removeClass(className.success);
- if(!settings.inline) {
- module.remove.errors();
- }
- module.determine.isDirty();
- },
- rule: function(field, rule) {
- var
- rules = Array.isArray(rule)
- ? rule
- : [rule]
- ;
- if(validation[field] === undefined || !Array.isArray(validation[field].rules)) {
- return;
- }
- if(rule === undefined) {
- module.debug('Removed all rules');
- validation[field].rules = [];
- return;
- }
- $.each(validation[field].rules, function(index, rule) {
- if(rule && rules.indexOf(rule.type) !== -1) {
- module.debug('Removed rule', rule.type);
- validation[field].rules.splice(index, 1);
- }
- });
- },
- field: function(field) {
- var
- fields = Array.isArray(field)
- ? field
- : [field]
- ;
- $.each(fields, function(index, field) {
- module.remove.rule(field);
- });
- },
- // alias
- rules: function(field, rules) {
- if(Array.isArray(field)) {
- $.each(field, function(index, field) {
- module.remove.rule(field, rules);
- });
- }
- else {
- module.remove.rule(field, rules);
- }
- },
- fields: function(fields) {
- module.remove.field(fields);
- },
- prompt: function(identifier) {
- var
- $field = module.get.field(identifier),
- $fieldGroup = $field.closest($group),
- $prompt = $fieldGroup.children(selector.prompt)
- ;
- $fieldGroup
- .removeClass(className.error)
- ;
- if(settings.inline && $prompt.is(':visible')) {
- module.verbose('Removing prompt for field', identifier);
- if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
- $prompt.transition(settings.transition + ' out', settings.duration, function() {
- $prompt.remove();
- });
- }
- else {
- $prompt
- .fadeOut(settings.duration, function(){
- $prompt.remove();
- })
- ;
- }
- }
- }
- },
-
- set: {
- success: function() {
- $module
- .removeClass(className.error)
- .addClass(className.success)
- ;
- },
- defaults: function () {
- $field.each(function (index, el) {
- var
- $el = $(el),
- $parent = $el.parent(),
- isCheckbox = ($el.filter(selector.checkbox).length > 0),
- isDropdown = $parent.is(selector.uiDropdown) && module.can.useElement('dropdown'),
- $calendar = $el.closest(selector.uiCalendar),
- isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
- value = (isCheckbox)
- ? $el.is(':checked')
- : $el.val()
- ;
- if (isDropdown) {
- $parent.dropdown('save defaults');
- }
- else if (isCalendar) {
- $calendar.calendar('refresh');
- }
- $el.data(metadata.defaultValue, value);
- $el.data(metadata.isDirty, false);
- });
- },
- error: function() {
- $module
- .removeClass(className.success)
- .addClass(className.error)
- ;
- },
- value: function (field, value) {
- var
- fields = {}
- ;
- fields[field] = value;
- return module.set.values.call(element, fields);
- },
- values: function (fields) {
- if($.isEmptyObject(fields)) {
- return;
- }
- $.each(fields, function(key, value) {
- var
- $field = module.get.field(key),
- $element = $field.parent(),
- $calendar = $field.closest(selector.uiCalendar),
- isMultiple = Array.isArray(value),
- isCheckbox = $element.is(selector.uiCheckbox) && module.can.useElement('checkbox'),
- isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
- isRadio = ($field.is(selector.radio) && isCheckbox),
- isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')),
- fieldExists = ($field.length > 0),
- $multipleField
- ;
- if(fieldExists) {
- if(isMultiple && isCheckbox) {
- module.verbose('Selecting multiple', value, $field);
- $element.checkbox('uncheck');
- $.each(value, function(index, value) {
- $multipleField = $field.filter('[value="' + value + '"]');
- $element = $multipleField.parent();
- if($multipleField.length > 0) {
- $element.checkbox('check');
- }
- });
- }
- else if(isRadio) {
- module.verbose('Selecting radio value', value, $field);
- $field.filter('[value="' + value + '"]')
- .parent(selector.uiCheckbox)
- .checkbox('check')
- ;
- }
- else if(isCheckbox) {
- module.verbose('Setting checkbox value', value, $element);
- if(value === true || value === 1) {
- $element.checkbox('check');
- }
- else {
- $element.checkbox('uncheck');
- }
- }
- else if(isDropdown) {
- module.verbose('Setting dropdown value', value, $element);
- $element.dropdown('set selected', value);
- }
- else if (isCalendar) {
- $calendar.calendar('set date',value);
- }
- else {
- module.verbose('Setting field value', value, $field);
- $field.val(value);
- }
- }
- });
- },
- dirty: function() {
- module.verbose('Setting state dirty');
- dirty = true;
- history[0] = history[1];
- history[1] = 'dirty';
-
- if (module.is.justClean()) {
- $module.trigger('dirty');
- }
- },
- clean: function() {
- module.verbose('Setting state clean');
- dirty = false;
- history[0] = history[1];
- history[1] = 'clean';
-
- if (module.is.justDirty()) {
- $module.trigger('clean');
- }
- },
- asClean: function() {
- module.set.defaults();
- module.set.clean();
- },
- asDirty: function() {
- module.set.defaults();
- module.set.dirty();
- },
- autoCheck: function() {
- module.debug('Enabling auto check on required fields');
- $field.each(function (_index, el) {
- var
- $el = $(el),
- $elGroup = $(el).closest($group),
- isCheckbox = ($el.filter(selector.checkbox).length > 0),
- isRequired = $el.prop('required') || $elGroup.hasClass(className.required) || $elGroup.parent().hasClass(className.required),
- isDisabled = $el.is(':disabled') || $elGroup.hasClass(className.disabled) || $elGroup.parent().hasClass(className.disabled),
- validation = module.get.validation($el),
- hasEmptyRule = validation
- ? $.grep(validation.rules, function(rule) { return rule.type == "empty" }) !== 0
- : false,
- identifier = validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate)
- ;
- if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) {
- if (isCheckbox) {
- module.verbose("Adding 'checked' rule on field", identifier);
- module.add.rule(identifier, "checked");
- } else {
- module.verbose("Adding 'empty' rule on field", identifier);
- module.add.rule(identifier, "empty");
- }
- }
- });
- }
- },
-
- validate: {
-
- form: function(event, ignoreCallbacks) {
- var values = module.get.values();
-
- // input keydown event will fire submit repeatedly by browser default
- if(keyHeldDown) {
- return false;
- }
-
- // reset errors
- formErrors = [];
- if( module.determine.isValid() ) {
- module.debug('Form has no validation errors, submitting');
- module.set.success();
- if(!settings.inline) {
- module.remove.errors();
- }
- if(ignoreCallbacks !== true) {
- return settings.onSuccess.call(element, event, values);
- }
- }
- else {
- module.debug('Form has errors');
- submitting = false;
- module.set.error();
- if(!settings.inline) {
- module.add.errors(formErrors);
- }
- // prevent ajax submit
- if(event && $module.data('moduleApi') !== undefined) {
- event.stopImmediatePropagation();
- }
- if(ignoreCallbacks !== true) {
- return settings.onFailure.call(element, formErrors, values);
- }
- }
- },
-
- // takes a validation object and returns whether field passes validation
- field: function(field, fieldName, showErrors) {
- showErrors = (showErrors !== undefined)
- ? showErrors
- : true
- ;
- if(typeof field == 'string') {
- module.verbose('Validating field', field);
- fieldName = field;
- field = validation[field];
- }
- var
- identifier = field.identifier || fieldName,
- $field = module.get.field(identifier),
- $dependsField = (field.depends)
- ? module.get.field(field.depends)
- : false,
- fieldValid = true,
- fieldErrors = []
- ;
- if(!field.identifier) {
- module.debug('Using field name as identifier', identifier);
- field.identifier = identifier;
- }
- var isDisabled = !$field.filter(':not(:disabled)').length;
- if(isDisabled) {
- module.debug('Field is disabled. Skipping', identifier);
- }
- else if(field.optional && module.is.blank($field)){
- module.debug('Field is optional and blank. Skipping', identifier);
- }
- else if(field.depends && module.is.empty($dependsField)) {
- module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);
- }
- else if(field.rules !== undefined) {
- if(showErrors) {
- $field.closest($group).removeClass(className.error);
- }
- $.each(field.rules, function(index, rule) {
- if( module.has.field(identifier)) {
- var invalidFields = module.validate.rule(field, rule,true) || [];
- if (invalidFields.length>0){
- module.debug('Field is invalid', identifier, rule.type);
- fieldErrors.push(module.get.prompt(rule, field));
- fieldValid = false;
- if(showErrors){
- $(invalidFields).closest($group).addClass(className.error);
- }
- }
- }
- });
- }
- if(fieldValid) {
- if(showErrors) {
- module.remove.prompt(identifier, fieldErrors);
- settings.onValid.call($field);
- }
- }
- else {
- if(showErrors) {
- formErrors = formErrors.concat(fieldErrors);
- module.add.prompt(identifier, fieldErrors, true);
- settings.onInvalid.call($field, fieldErrors);
- }
- return false;
- }
- return true;
- },
-
- // takes validation rule and returns whether field passes rule
- rule: function(field, rule, internal) {
- var
- $field = module.get.field(field.identifier),
- ancillary = module.get.ancillaryValue(rule),
- ruleName = module.get.ruleName(rule),
- ruleFunction = settings.rules[ruleName],
- invalidFields = [],
- isCheckbox = $field.is(selector.checkbox),
- isValid = function(field){
- var value = (isCheckbox ? $(field).filter(':checked').val() : $(field).val());
- // cast to string avoiding encoding special values
- value = (value === undefined || value === '' || value === null)
- ? ''
- : (settings.shouldTrim) ? String(value + '').trim() : String(value + '')
- ;
- return ruleFunction.call(field, value, ancillary, $module);
- }
- ;
- if( !$.isFunction(ruleFunction) ) {
- module.error(error.noRule, ruleName);
- return;
- }
- if(isCheckbox) {
- if (!isValid($field)) {
- invalidFields = $field;
- }
- } else {
- $.each($field, function (index, field) {
- if (!isValid(field)) {
- invalidFields.push(field);
- }
- });
- }
- return internal ? invalidFields : !(invalidFields.length>0);
- }
- },
-
- 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($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(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return found;
- }
- };
- module.initialize();
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.form.settings = {
-
- name : 'Form',
- namespace : 'form',
-
- debug : false,
- verbose : false,
- performance : true,
-
- fields : false,
-
- keyboardShortcuts : true,
- on : 'submit',
- inline : false,
-
- delay : 200,
- revalidate : true,
- shouldTrim : true,
-
- transition : 'scale',
- duration : 200,
-
- autoCheckRequired : false,
- preventLeaving : false,
- dateHandling : 'date', // 'date', 'input', 'formatter'
-
- onValid : function() {},
- onInvalid : function() {},
- onSuccess : function() { return true; },
- onFailure : function() { return false; },
- onDirty : function() {},
- onClean : function() {},
-
- metadata : {
- defaultValue : 'default',
- validate : 'validate',
- isDirty : 'isDirty'
- },
-
- regExp: {
- htmlID : /^[a-zA-Z][\w:.-]*$/g,
- bracket : /\[(.*)\]/i,
- decimal : /^\d+\.?\d*$/,
- email : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,
- escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|:,=@]/g,
- flags : /^\/(.*)\/(.*)?/,
- integer : /^\-?\d+$/,
- number : /^\-?\d*(\.\d+)?$/,
- url : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i
- },
-
- text: {
- unspecifiedRule : 'Please enter a valid value',
- unspecifiedField : 'This field',
- leavingMessage : 'There are unsaved changes on this page which will be discarded if you continue.'
- },
-
- prompt: {
- empty : '{name} must have a value',
- checked : '{name} must be checked',
- email : '{name} must be a valid e-mail',
- url : '{name} must be a valid url',
- regExp : '{name} is not formatted correctly',
- integer : '{name} must be an integer',
- decimal : '{name} must be a decimal number',
- number : '{name} must be set to a number',
- is : '{name} must be "{ruleValue}"',
- isExactly : '{name} must be exactly "{ruleValue}"',
- not : '{name} cannot be set to "{ruleValue}"',
- notExactly : '{name} cannot be set to exactly "{ruleValue}"',
- contain : '{name} must contain "{ruleValue}"',
- containExactly : '{name} must contain exactly "{ruleValue}"',
- doesntContain : '{name} cannot contain "{ruleValue}"',
- doesntContainExactly : '{name} cannot contain exactly "{ruleValue}"',
- minLength : '{name} must be at least {ruleValue} characters',
- length : '{name} must be at least {ruleValue} characters',
- exactLength : '{name} must be exactly {ruleValue} characters',
- maxLength : '{name} cannot be longer than {ruleValue} characters',
- match : '{name} must match {ruleValue} field',
- different : '{name} must have a different value than {ruleValue} field',
- creditCard : '{name} must be a valid credit card number',
- minCount : '{name} must have at least {ruleValue} choices',
- exactCount : '{name} must have exactly {ruleValue} choices',
- maxCount : '{name} must have {ruleValue} or less choices'
- },
-
- selector : {
- checkbox : 'input[type="checkbox"], input[type="radio"]',
- clear : '.clear',
- field : 'input:not(.search), textarea, select',
- group : '.field',
- input : 'input',
- message : '.error.message',
- prompt : '.prompt.label',
- radio : 'input[type="radio"]',
- reset : '.reset:not([type="reset"])',
- submit : '.submit:not([type="submit"])',
- uiCheckbox : '.ui.checkbox',
- uiDropdown : '.ui.dropdown',
- uiCalendar : '.ui.calendar'
- },
-
- className : {
- error : 'error',
- label : 'ui basic red pointing prompt label',
- pressed : 'down',
- success : 'success',
- required : 'required',
- disabled : 'disabled'
- },
-
- error: {
- identifier : 'You must specify a string identifier for each field',
- method : 'The method you called is not defined.',
- noRule : 'There is no rule matching the one you specified',
- oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.',
- noElement : 'This module requires ui {element}'
- },
-
- templates: {
-
- // template that produces error message
- error: function(errors) {
- var
- html = '<ul class="list">'
- ;
- $.each(errors, function(index, value) {
- html += '<li>' + value + '</li>';
- });
- html += '</ul>';
- return $(html);
- },
-
- // template that produces label
- prompt: function(errors, labelClasses) {
- return $('<div/>')
- .addClass(labelClasses)
- .html(errors[0])
- ;
- }
- },
-
- formatter: {
- date: function(date) {
- return Intl.DateTimeFormat('en-GB').format(date);
- },
- datetime: function(date) {
- return Intl.DateTimeFormat('en-GB', {
- year: "numeric",
- month: "2-digit",
- day: "2-digit",
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit'
- }).format(date);
- },
- time: function(date) {
- return Intl.DateTimeFormat('en-GB', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit'
- }).format(date);
- },
- month: function(date) {
- return Intl.DateTimeFormat('en-GB', {
- month: '2-digit',
- year: 'numeric'
- }).format(date);
- },
- year: function(date) {
- return Intl.DateTimeFormat('en-GB', {
- year: 'numeric'
- }).format(date);
- }
- },
-
- rules: {
-
- // is not empty or blank string
- empty: function(value) {
- return !(value === undefined || '' === value || Array.isArray(value) && value.length === 0);
- },
-
- // checkbox checked
- checked: function() {
- return ($(this).filter(':checked').length > 0);
- },
-
- // is most likely an email
- email: function(value){
- return $.fn.form.settings.regExp.email.test(value);
- },
-
- // value is most likely url
- url: function(value) {
- return $.fn.form.settings.regExp.url.test(value);
- },
-
- // matches specified regExp
- regExp: function(value, regExp) {
- if(regExp instanceof RegExp) {
- return value.match(regExp);
- }
- var
- regExpParts = regExp.match($.fn.form.settings.regExp.flags),
- flags
- ;
- // regular expression specified as /baz/gi (flags)
- if(regExpParts) {
- regExp = (regExpParts.length >= 2)
- ? regExpParts[1]
- : regExp
- ;
- flags = (regExpParts.length >= 3)
- ? regExpParts[2]
- : ''
- ;
- }
- return value.match( new RegExp(regExp, flags) );
- },
-
- // is valid integer or matches range
- integer: function(value, range) {
- var
- intRegExp = $.fn.form.settings.regExp.integer,
- min,
- max,
- parts
- ;
- if( !range || ['', '..'].indexOf(range) !== -1) {
- // do nothing
- }
- else if(range.indexOf('..') == -1) {
- if(intRegExp.test(range)) {
- min = max = range - 0;
- }
- }
- else {
- parts = range.split('..', 2);
- if(intRegExp.test(parts[0])) {
- min = parts[0] - 0;
- }
- if(intRegExp.test(parts[1])) {
- max = parts[1] - 0;
- }
- }
- return (
- intRegExp.test(value) &&
- (min === undefined || value >= min) &&
- (max === undefined || value <= max)
- );
- },
-
- // is valid number (with decimal)
- decimal: function(value) {
- return $.fn.form.settings.regExp.decimal.test(value);
- },
-
- // is valid number
- number: function(value) {
- return $.fn.form.settings.regExp.number.test(value);
- },
-
- // is value (case insensitive)
- is: function(value, text) {
- text = (typeof text == 'string')
- ? text.toLowerCase()
- : text
- ;
- value = (typeof value == 'string')
- ? value.toLowerCase()
- : value
- ;
- return (value == text);
- },
-
- // is value
- isExactly: function(value, text) {
- return (value == text);
- },
-
- // value is not another value (case insensitive)
- not: function(value, notValue) {
- value = (typeof value == 'string')
- ? value.toLowerCase()
- : value
- ;
- notValue = (typeof notValue == 'string')
- ? notValue.toLowerCase()
- : notValue
- ;
- return (value != notValue);
- },
-
- // value is not another value (case sensitive)
- notExactly: function(value, notValue) {
- return (value != notValue);
- },
-
- // value contains text (insensitive)
- contains: function(value, text) {
- // escape regex characters
- text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
- return (value.search( new RegExp(text, 'i') ) !== -1);
- },
-
- // value contains text (case sensitive)
- containsExactly: function(value, text) {
- // escape regex characters
- text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
- return (value.search( new RegExp(text) ) !== -1);
- },
-
- // value contains text (insensitive)
- doesntContain: function(value, text) {
- // escape regex characters
- text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
- return (value.search( new RegExp(text, 'i') ) === -1);
- },
-
- // value contains text (case sensitive)
- doesntContainExactly: function(value, text) {
- // escape regex characters
- text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
- return (value.search( new RegExp(text) ) === -1);
- },
-
- // is at least string length
- minLength: function(value, requiredLength) {
- return (value !== undefined)
- ? (value.length >= requiredLength)
- : false
- ;
- },
-
- // see rls notes for 2.0.6 (this is a duplicate of minLength)
- length: function(value, requiredLength) {
- return (value !== undefined)
- ? (value.length >= requiredLength)
- : false
- ;
- },
-
- // is exactly length
- exactLength: function(value, requiredLength) {
- return (value !== undefined)
- ? (value.length == requiredLength)
- : false
- ;
- },
-
- // is less than length
- maxLength: function(value, maxLength) {
- return (value !== undefined)
- ? (value.length <= maxLength)
- : false
- ;
- },
-
- // matches another field
- match: function(value, identifier, $module) {
- var
- matchingValue,
- matchingElement
- ;
- if((matchingElement = $module.find('[data-validate="'+ identifier +'"]')).length > 0 ) {
- matchingValue = matchingElement.val();
- }
- else if((matchingElement = $module.find('#' + identifier)).length > 0) {
- matchingValue = matchingElement.val();
- }
- else if((matchingElement = $module.find('[name="' + identifier +'"]')).length > 0) {
- matchingValue = matchingElement.val();
- }
- else if((matchingElement = $module.find('[name="' + identifier +'[]"]')).length > 0 ) {
- matchingValue = matchingElement;
- }
- return (matchingValue !== undefined)
- ? ( value.toString() == matchingValue.toString() )
- : false
- ;
- },
-
- // different than another field
- different: function(value, identifier, $module) {
- // use either id or name of field
- var
- matchingValue,
- matchingElement
- ;
- if((matchingElement = $module.find('[data-validate="'+ identifier +'"]')).length > 0 ) {
- matchingValue = matchingElement.val();
- }
- else if((matchingElement = $module.find('#' + identifier)).length > 0) {
- matchingValue = matchingElement.val();
- }
- else if((matchingElement = $module.find('[name="' + identifier +'"]')).length > 0) {
- matchingValue = matchingElement.val();
- }
- else if((matchingElement = $module.find('[name="' + identifier +'[]"]')).length > 0 ) {
- matchingValue = matchingElement;
- }
- return (matchingValue !== undefined)
- ? ( value.toString() !== matchingValue.toString() )
- : false
- ;
- },
-
- creditCard: function(cardNumber, cardTypes) {
- var
- cards = {
- visa: {
- pattern : /^4/,
- length : [16]
- },
- amex: {
- pattern : /^3[47]/,
- length : [15]
- },
- mastercard: {
- pattern : /^5[1-5]/,
- length : [16]
- },
- discover: {
- pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/,
- length : [16]
- },
- unionPay: {
- pattern : /^(62|88)/,
- length : [16, 17, 18, 19]
- },
- jcb: {
- pattern : /^35(2[89]|[3-8][0-9])/,
- length : [16]
- },
- maestro: {
- pattern : /^(5018|5020|5038|6304|6759|676[1-3])/,
- length : [12, 13, 14, 15, 16, 17, 18, 19]
- },
- dinersClub: {
- pattern : /^(30[0-5]|^36)/,
- length : [14]
- },
- laser: {
- pattern : /^(6304|670[69]|6771)/,
- length : [16, 17, 18, 19]
- },
- visaElectron: {
- pattern : /^(4026|417500|4508|4844|491(3|7))/,
- length : [16]
- }
- },
- valid = {},
- validCard = false,
- requiredTypes = (typeof cardTypes == 'string')
- ? cardTypes.split(',')
- : false,
- unionPay,
- validation
- ;
-
- if(typeof cardNumber !== 'string' || cardNumber.length === 0) {
- return;
- }
-
- // allow dashes in card
- cardNumber = cardNumber.replace(/[\-]/g, '');
-
- // verify card types
- if(requiredTypes) {
- $.each(requiredTypes, function(index, type){
- // verify each card type
- validation = cards[type];
- if(validation) {
- valid = {
- length : ($.inArray(cardNumber.length, validation.length) !== -1),
- pattern : (cardNumber.search(validation.pattern) !== -1)
- };
- if(valid.length && valid.pattern) {
- validCard = true;
- }
- }
- });
-
- if(!validCard) {
- return false;
- }
- }
-
- // skip luhn for UnionPay
- unionPay = {
- number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1),
- pattern : (cardNumber.search(cards.unionPay.pattern) !== -1)
- };
- if(unionPay.number && unionPay.pattern) {
- return true;
- }
-
- // verify luhn, adapted from <https://gist.github.com/2134376>
- var
- length = cardNumber.length,
- multiple = 0,
- producedValue = [
- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
- [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]
- ],
- sum = 0
- ;
- while (length--) {
- sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)];
- multiple ^= 1;
- }
- return (sum % 10 === 0 && sum > 0);
- },
-
- minCount: function(value, minCount) {
- if(minCount == 0) {
- return true;
- }
- if(minCount == 1) {
- return (value !== '');
- }
- return (value.split(',').length >= minCount);
- },
-
- exactCount: function(value, exactCount) {
- if(exactCount == 0) {
- return (value === '');
- }
- if(exactCount == 1) {
- return (value !== '' && value.search(',') === -1);
- }
- return (value.split(',').length == exactCount);
- },
-
- maxCount: function(value, maxCount) {
- if(maxCount == 0) {
- return false;
- }
- if(maxCount == 1) {
- return (value.search(',') === -1);
- }
- return (value.split(',').length <= maxCount);
- }
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/state.js b/semantic/src/definitions/behaviors/state.js
deleted file mode 100644
index 149b4af..0000000
--- a/semantic/src/definitions/behaviors/state.js
+++ /dev/null
@@ -1,711 +0,0 @@
-/*!
- * # Fomantic-UI - State
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-"use strict";
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.state = 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
- ;
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.state.settings, parameters)
- : $.extend({}, $.fn.state.settings),
-
- error = settings.error,
- metadata = settings.metadata,
- className = settings.className,
- namespace = settings.namespace,
- states = settings.states,
- text = settings.text,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
- $module = $(this),
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- module
- ;
- module = {
-
- initialize: function() {
- module.verbose('Initializing module');
-
- // allow module to guess desired state based on element
- if(settings.automatic) {
- module.add.defaults();
- }
-
- // bind events with delegated events
- if(settings.context && moduleSelector !== '') {
- $(settings.context)
- .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
- .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
- .on(moduleSelector, 'click' + eventNamespace, module.toggle.state)
- ;
- }
- else {
- $module
- .on('mouseenter' + eventNamespace, module.change.text)
- .on('mouseleave' + eventNamespace, module.reset.text)
- .on('click' + eventNamespace, module.toggle.state)
- ;
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module', instance);
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing selector cache');
- $module = $(element);
- },
-
- add: {
- defaults: function() {
- var
- userStates = parameters && $.isPlainObject(parameters.states)
- ? parameters.states
- : {}
- ;
- $.each(settings.defaults, function(type, typeStates) {
- if( module.is[type] !== undefined && module.is[type]() ) {
- module.verbose('Adding default states', type, element);
- $.extend(settings.states, typeStates, userStates);
- }
- });
- }
- },
-
- is: {
-
- active: function() {
- return $module.hasClass(className.active);
- },
- loading: function() {
- return $module.hasClass(className.loading);
- },
- inactive: function() {
- return !( $module.hasClass(className.active) );
- },
- state: function(state) {
- if(className[state] === undefined) {
- return false;
- }
- return $module.hasClass( className[state] );
- },
-
- enabled: function() {
- return !( $module.is(settings.filter.active) );
- },
- disabled: function() {
- return ( $module.is(settings.filter.active) );
- },
- textEnabled: function() {
- return !( $module.is(settings.filter.text) );
- },
-
- // definitions for automatic type detection
- button: function() {
- return $module.is('.button:not(a, .submit)');
- },
- input: function() {
- return $module.is('input');
- },
- progress: function() {
- return $module.is('.ui.progress');
- }
- },
-
- allow: function(state) {
- module.debug('Now allowing state', state);
- states[state] = true;
- },
- disallow: function(state) {
- module.debug('No longer allowing', state);
- states[state] = false;
- },
-
- allows: function(state) {
- return states[state] || false;
- },
-
- enable: function() {
- $module.removeClass(className.disabled);
- },
-
- disable: function() {
- $module.addClass(className.disabled);
- },
-
- setState: function(state) {
- if(module.allows(state)) {
- $module.addClass( className[state] );
- }
- },
-
- removeState: function(state) {
- if(module.allows(state)) {
- $module.removeClass( className[state] );
- }
- },
-
- toggle: {
- state: function() {
- var
- apiRequest,
- requestCancelled
- ;
- if( module.allows('active') && module.is.enabled() ) {
- module.refresh();
- if($.fn.api !== undefined) {
- apiRequest = $module.api('get request');
- requestCancelled = $module.api('was cancelled');
- if( requestCancelled ) {
- module.debug('API Request cancelled by beforesend');
- settings.activateTest = function(){ return false; };
- settings.deactivateTest = function(){ return false; };
- }
- else if(apiRequest) {
- module.listenTo(apiRequest);
- return;
- }
- }
- module.change.state();
- }
- }
- },
-
- listenTo: function(apiRequest) {
- module.debug('API request detected, waiting for state signal', apiRequest);
- if(apiRequest) {
- if(text.loading) {
- module.update.text(text.loading);
- }
- $.when(apiRequest)
- .then(function() {
- if(apiRequest.state() == 'resolved') {
- module.debug('API request succeeded');
- settings.activateTest = function(){ return true; };
- settings.deactivateTest = function(){ return true; };
- }
- else {
- module.debug('API request failed');
- settings.activateTest = function(){ return false; };
- settings.deactivateTest = function(){ return false; };
- }
- module.change.state();
- })
- ;
- }
- },
-
- // checks whether active/inactive state can be given
- change: {
-
- state: function() {
- module.debug('Determining state change direction');
- // inactive to active change
- if( module.is.inactive() ) {
- module.activate();
- }
- else {
- module.deactivate();
- }
- if(settings.sync) {
- module.sync();
- }
- settings.onChange.call(element);
- },
-
- text: function() {
- if( module.is.textEnabled() ) {
- if(module.is.disabled() ) {
- module.verbose('Changing text to disabled text', text.hover);
- module.update.text(text.disabled);
- }
- else if( module.is.active() ) {
- if(text.hover) {
- module.verbose('Changing text to hover text', text.hover);
- module.update.text(text.hover);
- }
- else if(text.deactivate) {
- module.verbose('Changing text to deactivating text', text.deactivate);
- module.update.text(text.deactivate);
- }
- }
- else {
- if(text.hover) {
- module.verbose('Changing text to hover text', text.hover);
- module.update.text(text.hover);
- }
- else if(text.activate){
- module.verbose('Changing text to activating text', text.activate);
- module.update.text(text.activate);
- }
- }
- }
- }
-
- },
-
- activate: function() {
- if( settings.activateTest.call(element) ) {
- module.debug('Setting state to active');
- $module
- .addClass(className.active)
- ;
- module.update.text(text.active);
- settings.onActivate.call(element);
- }
- },
-
- deactivate: function() {
- if( settings.deactivateTest.call(element) ) {
- module.debug('Setting state to inactive');
- $module
- .removeClass(className.active)
- ;
- module.update.text(text.inactive);
- settings.onDeactivate.call(element);
- }
- },
-
- sync: function() {
- module.verbose('Syncing other buttons to current state');
- if( module.is.active() ) {
- $allModules
- .not($module)
- .state('activate');
- }
- else {
- $allModules
- .not($module)
- .state('deactivate')
- ;
- }
- },
-
- get: {
- text: function() {
- return (settings.selector.text)
- ? $module.find(settings.selector.text).text()
- : $module.html()
- ;
- },
- textFor: function(state) {
- return text[state] || false;
- }
- },
-
- flash: {
- text: function(text, duration, callback) {
- var
- previousText = module.get.text()
- ;
- module.debug('Flashing text message', text, duration);
- text = text || settings.text.flash;
- duration = duration || settings.flashDuration;
- callback = callback || function() {};
- module.update.text(text);
- setTimeout(function(){
- module.update.text(previousText);
- callback.call(element);
- }, duration);
- }
- },
-
- reset: {
- // on mouseout sets text to previous value
- text: function() {
- var
- activeText = text.active || $module.data(metadata.storedText),
- inactiveText = text.inactive || $module.data(metadata.storedText)
- ;
- if( module.is.textEnabled() ) {
- if( module.is.active() && activeText) {
- module.verbose('Resetting active text', activeText);
- module.update.text(activeText);
- }
- else if(inactiveText) {
- module.verbose('Resetting inactive text', activeText);
- module.update.text(inactiveText);
- }
- }
- }
- },
-
- update: {
- text: function(text) {
- var
- currentText = module.get.text()
- ;
- if(text && text !== currentText) {
- module.debug('Updating text', text);
- if(settings.selector.text) {
- $module
- .data(metadata.storedText, text)
- .find(settings.selector.text)
- .text(text)
- ;
- }
- else {
- $module
- .data(metadata.storedText, text)
- .html(text)
- ;
- }
- }
- else {
- module.debug('Text is already set, ignoring update', text);
- }
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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.state.settings = {
-
- // module info
- name : 'State',
-
- // debug output
- debug : false,
-
- // verbose debug output
- verbose : false,
-
- // namespace for events
- namespace : 'state',
-
- // debug data includes performance
- performance : true,
-
- // callback occurs on state change
- onActivate : function() {},
- onDeactivate : function() {},
- onChange : function() {},
-
- // state test functions
- activateTest : function() { return true; },
- deactivateTest : function() { return true; },
-
- // whether to automatically map default states
- automatic : true,
-
- // activate / deactivate changes all elements instantiated at same time
- sync : false,
-
- // default flash text duration, used for temporarily changing text of an element
- flashDuration : 1000,
-
- // selector filter
- filter : {
- text : '.loading, .disabled',
- active : '.disabled'
- },
-
- context : false,
-
- // error
- error: {
- beforeSend : 'The before send function has cancelled state change',
- method : 'The method you called is not defined.'
- },
-
- // metadata
- metadata: {
- promise : 'promise',
- storedText : 'stored-text'
- },
-
- // change class on state
- className: {
- active : 'active',
- disabled : 'disabled',
- error : 'error',
- loading : 'loading',
- success : 'success',
- warning : 'warning'
- },
-
- selector: {
- // selector for text node
- text: false
- },
-
- defaults : {
- input: {
- disabled : true,
- loading : true,
- active : true
- },
- button: {
- disabled : true,
- loading : true,
- active : true,
- },
- progress: {
- active : true,
- success : true,
- warning : true,
- error : true
- }
- },
-
- states : {
- active : true,
- disabled : true,
- error : true,
- loading : true,
- success : true,
- warning : true
- },
-
- text : {
- disabled : false,
- flash : false,
- hover : false,
- active : false,
- inactive : false,
- activate : false,
- deactivate : false
- }
-
-};
-
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/visibility.js b/semantic/src/definitions/behaviors/visibility.js
deleted file mode 100644
index 4e40619..0000000
--- a/semantic/src/definitions/behaviors/visibility.js
+++ /dev/null
@@ -1,1313 +0,0 @@
-/*!
- * # Fomantic-UI - Visibility
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-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,
-
- 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) {
- if($module.hasClass(className.visible)) {
- module.debug('Transition already occurred on this image, skipping animation');
- return;
- }
- $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;
- },
- verticallyScrollableContext: function() {
- var
- overflowY = ($context.get(0) !== window)
- ? $context.css('overflow-y')
- : false
- ;
- return (overflowY == 'auto' || overflowY == 'scroll');
- },
- horizontallyScrollableContext: function() {
- var
- overflowX = ($context.get(0) !== window)
- ? $context.css('overflow-x')
- : false
- ;
- return (overflowX == 'auto' || overflowX == 'scroll');
- }
- },
-
- 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()
- ;
- // 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();
- // compensate for scroll in context
- if(module.is.verticallyScrollableContext()) {
- element.offset.top += $context.scrollTop() - $context.offset().top;
- }
- if(module.is.horizontallyScrollableContext()) {
- element.offset.left += $context.scrollLeft() - $context.offset().left;
- }
- // 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.topPassed = (screen.top >= element.top);
- element.bottomPassed = (screen.top >= element.bottom);
- element.topVisible = (screen.bottom >= element.top) && !element.topPassed;
- element.bottomVisible = (screen.bottom >= element.bottom) && !element.bottomPassed;
- element.pixelsPassed = 0;
- element.percentagePassed = 0;
-
- // meta calculations
- element.onScreen = ((element.topVisible || element.passing) && !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(Array.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 : 'constraint',
- visible : 'visible'
- },
-
- error : {
- method : 'The method you called is not defined.',
- visible : 'Element is hidden, you must call refresh after element becomes visible'
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/collections/breadcrumb.less b/semantic/src/definitions/collections/breadcrumb.less
deleted file mode 100644
index df6f979..0000000
--- a/semantic/src/definitions/collections/breadcrumb.less
+++ /dev/null
@@ -1,122 +0,0 @@
-/*!
- * # Fomantic-UI - Breadcrumb
- * http://github.com/fomantic/Fomantic-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: @lineHeight;
- display: @display;
- margin: @verticalMargin 0;
- vertical-align: @verticalAlign;
-}
-.ui.breadcrumb:first-child {
- margin-top: 0;
-}
-.ui.breadcrumb:last-child {
- margin-bottom: 0;
-}
-
-/*******************************
- Content
-*******************************/
-
-/* Divider */
-.ui.breadcrumb .divider {
- display: inline-block;
- opacity: @dividerOpacity;
- margin: 0 @dividerSpacing 0;
-
- 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;
-}
-
-& when (@variationBreadcrumbInverted) {
- /* Inverted */
- .ui.inverted.breadcrumb {
- color: @invertedColor;
- }
- .ui.inverted.breadcrumb > .active.section {
- color: @invertedActiveColor;
- }
- .ui.inverted.breadcrumb > .divider {
- color: @invertedDividerColor;
- }
-}
-
-/*******************************
- States
-*******************************/
-
-.ui.breadcrumb .active.section {
- font-weight: @activeFontWeight;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-.ui.breadcrumb {
- font-size: @medium;
-}
-& when not (@variationBreadcrumbSizes = false) {
- each(@variationBreadcrumbSizes, {
- @s: @@value;
- .ui.@{value}.breadcrumb {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/form.less b/semantic/src/definitions/collections/form.less
deleted file mode 100644
index 3cde7f1..0000000
--- a/semantic/src/definitions/collections/form.less
+++ /dev/null
@@ -1,1112 +0,0 @@
-/*!
- * # Fomantic-UI - Form
- * http://github.com/fomantic/Fomantic-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 .fields .fields,
-.ui.form .field:last-child,
-.ui.form .fields:last-child .field {
- margin-bottom: 0;
-}
-
-.ui.form .fields .field {
- clear: both;
- margin: 0;
-}
-
-
-/*--------------------
- 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="file"],
-.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="file"],
-.ui.form input[type="url"] {
- font-family: @inputFont;
- margin: 0;
- outline: none;
- -webkit-appearance: none;
- -webkit-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.input textarea,
-.ui.form textarea {
- margin: 0;
- -webkit-appearance: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
- padding: @textAreaPadding;
- background: @textAreaBackground;
- border: @textAreaBorder;
- outline: none;
- color: @inputColor;
- border-radius: @inputBorderRadius;
- box-shadow: @inputBoxShadow;
- transition: @textAreaTransition;
- font-size: @textAreaFontSize;
- font-family: @inputFont;
- 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;
-}
-
-/*--------------------
- Checkbox margin
----------------------*/
-
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
- margin-top: @checkboxLabelFieldTopMargin;
-}
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
- margin-top: @inputLineHeight + @checkboxFieldTopMargin;
-}
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
- margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin;
-}
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
- margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin;
-}
-.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
- margin-top: @checkboxFieldTopMargin / 2;
-}
-.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
- margin-top: @checkboxToggleFieldTopMargin / 2;
-}
-.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
- margin-top: @checkboxSliderFieldTopMargin / 2;
-}
-
-& when (@variationFormTransparent) {
- /*--------------------
- Transparent
- ---------------------*/
-
- .ui.form .field .transparent.input:not(.icon) input,
- .ui.form .field input.transparent,
- .ui.form .field textarea.transparent {
- padding: @transparentPadding;
- }
-
- .ui.form .field input.transparent,
- .ui.form .field textarea.transparent {
- border-color: transparent !important;
- background-color: transparent !important;
- box-shadow: none !important;
- }
-}
-/*--------------------------
- 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 {
- min-width: auto;
- width: 100%;
-}
-.ui.form .field > .selection.dropdown > .dropdown.icon {
- float: right;
-}
-
-& when (@variationFormInline) {
- /* 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%;
-}
-
-& when (@variationFormInline) {
- /* 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: 0;
-}
-
-
-/*--------------------
- Types of Messages
----------------------*/
-& when (@variationFormStates) {
- each(@formStates, {
- @state: replace(@key, '@', '');
- .ui.form .@{state}.message,
- .ui.form .@{state}.message:empty {
- display: none;
- }
- })
-}
-
-/* Assumptions */
-.ui.form .message:first-child {
- margin-top: 0;
-}
-
-/*--------------------
- Validation Prompt
----------------------*/
-
-.ui.form .field .prompt.label {
- white-space: normal;
- background: @promptBackground !important;
- border: @promptBorder !important;
- color: @promptTextColor !important;
-}
-& when (@variationFormInline) {
- .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: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth;
- bottom: auto;
- right: auto;
- top: 50%;
- left: 0;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-/*--------------------
- Autofilled
----------------------*/
-
-.ui.form .field.field input:-webkit-autofill {
- box-shadow: 0 0 0 100px @inputAutoFillBackground inset !important;
- border-color: @inputAutoFillBorder !important;
-}
-
-/* Focus */
-.ui.form .field.field input:-webkit-autofill:focus {
- box-shadow: 0 0 0 100px @inputAutoFillFocusBackground inset !important;
- border-color: @inputAutoFillFocusBorder !important;
-}
-
-
-
-/*--------------------
- Placeholder
----------------------*/
-
-/* browsers require these rules separate */
-.ui.form ::-webkit-input-placeholder {
- color: @inputPlaceholderColor;
-}
-.ui.form :-ms-input-placeholder {
- color: @inputPlaceholderColor !important;
-}
-.ui.form ::-moz-placeholder {
- color: @inputPlaceholderColor;
-}
-
-.ui.form :focus::-webkit-input-placeholder {
- color: @inputPlaceholderFocusColor;
-}
-.ui.form :focus:-ms-input-placeholder {
- color: @inputPlaceholderFocusColor !important;
-}
-.ui.form :focus::-moz-placeholder {
- color: @inputPlaceholderFocusColor;
-}
-
-
-
-/*--------------------
- 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="file"]:focus,
-.ui.form input[type="url"]:focus {
- color: @inputFocusColor;
- border-color: @inputFocusBorderColor;
- border-radius: @inputFocusBorderRadius;
- background: @inputFocusBackground;
- box-shadow: @inputFocusBoxShadow;
-}
-& when (@variationInputAction) {
- .ui.form .ui.action.input:not([class*="left action"]) {
- & input:not([type]):focus,
- input[type="date"]:focus,
- input[type="datetime-local"]:focus,
- input[type="email"]:focus,
- input[type="number"]:focus,
- input[type="password"]:focus,
- input[type="search"]:focus,
- input[type="tel"]:focus,
- input[type="time"]:focus,
- input[type="text"]:focus,
- input[type="file"]:focus,
- input[type="url"]:focus {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
-
- .ui.form .ui[class*="left action"].input {
- & input:not([type]),
- input[type="date"],
- input[type="datetime-local"],
- input[type="email"],
- input[type="number"],
- input[type="password"],
- input[type="search"],
- input[type="tel"],
- input[type="time"],
- input[type="text"],
- input[type="file"],
- input[type="url"] {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- }
- }
-}
-.ui.form textarea:focus {
- color: @textAreaFocusColor;
- border-color: @textAreaFocusBorderColor;
- border-radius: @textAreaFocusBorderRadius;
- background: @textAreaFocusBackground;
- box-shadow: @textAreaFocusBoxShadow;
- -webkit-appearance: none;
-}
-
-& when (@variationFormStates) {
- /*--------------------
- States
- ---------------------*/
- each(@formStates, {
- @state: replace(@key, '@', '');
- @c: @formStates[@@state][color];
- @bg: @formStates[@@state][background];
- @bdc: @formStates[@@state][borderColor];
-
- /* On Form */
- .ui.form.@{state} .@{state}.message:not(:empty) {
- display: block;
- }
- .ui.form.@{state} .compact.@{state}.message:not(:empty) {
- display: inline-block;
- }
- .ui.form.@{state} .icon.@{state}.message:not(:empty) {
- display: flex;
- }
-
- /* On Field(s) */
- .ui.form .fields.@{state} .@{state}.message:not(:empty),
- .ui.form .field.@{state} .@{state}.message:not(:empty) {
- display: block;
- }
- .ui.form .fields.@{state} .compact.@{state}.message:not(:empty),
- .ui.form .field.@{state} .compact.@{state}.message:not(:empty) {
- display: inline-block;
- }
- .ui.form .fields.@{state} .icon.@{state}.message:not(:empty),
- .ui.form .field.@{state} .icon.@{state}.message:not(:empty) {
- display: flex;
- }
-
- .ui.ui.form .fields.@{state} .field label,
- .ui.ui.form .field.@{state} label,
- .ui.ui.form .fields.@{state} .field .input,
- .ui.ui.form .field.@{state} .input {
- color: @c;
- }
-
- .ui.form .fields.@{state} .field .corner.label,
- .ui.form .field.@{state} .corner.label {
- border-color: @c;
- color: @formStates[@@state][cornerLabelColor];
- }
-
- .ui.form .fields.@{state} .field textarea,
- .ui.form .fields.@{state} .field select,
- .ui.form .fields.@{state} .field input:not([type]),
- .ui.form .fields.@{state} .field input[type="date"],
- .ui.form .fields.@{state} .field input[type="datetime-local"],
- .ui.form .fields.@{state} .field input[type="email"],
- .ui.form .fields.@{state} .field input[type="number"],
- .ui.form .fields.@{state} .field input[type="password"],
- .ui.form .fields.@{state} .field input[type="search"],
- .ui.form .fields.@{state} .field input[type="tel"],
- .ui.form .fields.@{state} .field input[type="time"],
- .ui.form .fields.@{state} .field input[type="text"],
- .ui.form .fields.@{state} .field input[type="file"],
- .ui.form .fields.@{state} .field input[type="url"],
- .ui.form .field.@{state} textarea,
- .ui.form .field.@{state} select,
- .ui.form .field.@{state} input:not([type]),
- .ui.form .field.@{state} input[type="date"],
- .ui.form .field.@{state} input[type="datetime-local"],
- .ui.form .field.@{state} input[type="email"],
- .ui.form .field.@{state} input[type="number"],
- .ui.form .field.@{state} input[type="password"],
- .ui.form .field.@{state} input[type="search"],
- .ui.form .field.@{state} input[type="tel"],
- .ui.form .field.@{state} input[type="time"],
- .ui.form .field.@{state} input[type="text"],
- .ui.form .field.@{state} input[type="file"],
- .ui.form .field.@{state} input[type="url"] {
- color: @c;
- background: @bg;
- border-color: @formStates[@@state][borderColor];
- border-radius: @formStates[@@state][borderRadius];
- box-shadow: @formStates[@@state][boxShadow];
- }
-
- .ui.form .field.@{state} textarea:focus,
- .ui.form .field.@{state} select:focus,
- .ui.form .field.@{state} input:not([type]):focus,
- .ui.form .field.@{state} input[type="date"]:focus,
- .ui.form .field.@{state} input[type="datetime-local"]:focus,
- .ui.form .field.@{state} input[type="email"]:focus,
- .ui.form .field.@{state} input[type="number"]:focus,
- .ui.form .field.@{state} input[type="password"]:focus,
- .ui.form .field.@{state} input[type="search"]:focus,
- .ui.form .field.@{state} input[type="tel"]:focus,
- .ui.form .field.@{state} input[type="time"]:focus,
- .ui.form .field.@{state} input[type="text"]:focus,
- .ui.form .field.@{state} input[type="file"]:focus,
- .ui.form .field.@{state} input[type="url"]:focus {
- background: @formStates[@@state][inputFocusBackground];
- border-color: @formStates[@@state][inputFocusBorderColor];
- color: @formStates[@@state][inputFocusColor];
-
- box-shadow: @formStates[@@state][inputFocusBoxShadow];
- }
-
- /* Preserve Native Select Stylings */
- .ui.form .field.@{state} select {
- -webkit-appearance: menulist-button;
- }
-
- /*------------------
- Input State
- --------------------*/
- /* Transparent */
- .ui.form .field.@{state} .transparent.input input,
- .ui.form .field.@{state} .transparent.input textarea,
- .ui.form .field.@{state} input.transparent,
- .ui.form .field.@{state} textarea.transparent {
- background-color: @formStates[@@state][transparentBackground] !important;
- color: @formStates[@@state][transparentColor] !important;
- }
-
- /* Autofilled */
- .ui.form .@{state}.@{state} input:-webkit-autofill {
- box-shadow: 0 0 0 100px @formStates[@@state][inputAutoFillBackground] inset !important;
- border-color: @formStates[@@state][inputAutoFillBorderColor] !important;
- }
-
- /* Placeholder */
- .ui.form .@{state} ::-webkit-input-placeholder {
- color: @formStates[@@state][inputPlaceholderColor];
- }
- .ui.form .@{state} :-ms-input-placeholder {
- color: @formStates[@@state][inputPlaceholderColor] !important;
- }
- .ui.form .@{state} ::-moz-placeholder {
- color: @formStates[@@state][inputPlaceholderColor];
- }
-
- .ui.form .@{state} :focus::-webkit-input-placeholder {
- color: @formStates[@@state][inputPlaceholderFocusColor];
- }
- .ui.form .@{state} :focus:-ms-input-placeholder {
- color: @formStates[@@state][inputPlaceholderFocusColor] !important;
- }
- .ui.form .@{state} :focus::-moz-placeholder {
- color: @formStates[@@state][inputPlaceholderFocusColor];
- }
-
- /*------------------
- Dropdown State
- --------------------*/
-
- .ui.form .fields.@{state} .field .ui.dropdown,
- .ui.form .fields.@{state} .field .ui.dropdown .item,
- .ui.form .field.@{state} .ui.dropdown,
- .ui.form .field.@{state} .ui.dropdown .text,
- .ui.form .field.@{state} .ui.dropdown .item {
- background: @bg;
- color: @c;
- }
- .ui.form .fields.@{state} .field .ui.dropdown,
- .ui.form .field.@{state} .ui.dropdown {
- border-color: @bdc !important;
- }
- .ui.form .fields.@{state} .field .ui.dropdown:hover,
- .ui.form .field.@{state} .ui.dropdown:hover {
- border-color: @bdc !important;
- }
- .ui.form .fields.@{state} .field .ui.dropdown:hover .menu,
- .ui.form .field.@{state} .ui.dropdown:hover .menu {
- border-color: @bdc;
- }
- .ui.form .fields.@{state} .field .ui.multiple.selection.dropdown > .label,
- .ui.form .field.@{state} .ui.multiple.selection.dropdown > .label {
- background-color: @formStates[@@state][dropdownLabelBackground];
- color: @formStates[@@state][dropdownLabelColor];
- }
-
- /* Hover */
- .ui.form .fields.@{state} .field .ui.dropdown .menu .item:hover,
- .ui.form .field.@{state} .ui.dropdown .menu .item:hover {
- background-color: @formStates[@@state][dropdownHoverBackground];
- }
-
- /* Selected */
- .ui.form .fields.@{state} .field .ui.dropdown .menu .selected.item,
- .ui.form .field.@{state} .ui.dropdown .menu .selected.item {
- background-color: @formStates[@@state][dropdownSelectedBackground];
- }
-
- /* Active */
- .ui.form .fields.@{state} .field .ui.dropdown .menu .active.item,
- .ui.form .field.@{state} .ui.dropdown .menu .active.item {
- background-color: @formStates[@@state][dropdownActiveBackground] !important;
- }
-
- /*--------------------
- Checkbox State
- ---------------------*/
- .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label,
- .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label,
- .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box,
- .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box {
- color: @c;
- }
- .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before,
- .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before,
- .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box:before,
- .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box:before {
- background: @bg;
- border-color: @bdc;
- }
- .ui.form .fields.@{state} .field .checkbox label:after,
- .ui.form .field.@{state} .checkbox label:after,
- .ui.form .fields.@{state} .field .checkbox .box:after,
- .ui.form .field.@{state} .checkbox .box:after {
- color: @c;
- }
- })
-}
-
-& when (@variationFormDisabled) {
- /*--------------------
- Disabled
- ---------------------*/
-
- .ui.form .disabled.fields .field,
- .ui.form .disabled.field,
- .ui.form .field :disabled {
- pointer-events: none;
- opacity: @disabledOpacity;
- }
- .ui.form .field.disabled > label,
- .ui.form .fields.disabled > label {
- opacity: @disabledLabelOpacity;
- }
- .ui.form .field.disabled :disabled {
- opacity: 1;
- }
-}
-
-& when (@variationFormLoading) {
- /*--------------
- Loading
- ---------------*/
-
- .ui.loading.form {
- position: relative;
- cursor: default;
- pointer-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.segments:before {
- border-radius: @defaultBorderRadius;
- }
-
- .ui.loading.form:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid @loaderLineColor;
- border-radius: @circularRadius;
-
- box-shadow: 0 0 0 1px transparent;
- visibility: visible;
- z-index: @loaderLineZIndex;
- }
-}
-
-/*******************************
- Element Types
-*******************************/
-
-& when (@variationFormRequired) {
- /*--------------------
- 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,
- .ui.form label.required: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,
- .ui.form label.required: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
-*******************************/
-
-& when (@variationFormInverted) {
- /*--------------------
- 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;
- }
- .ui.inverted.loading.form {
- color: @invertedLoaderLineColor;
- }
- .ui.inverted.loading.form:before {
- background: @loaderInvertedDimmerColor;
- }
- /* 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="file"],
- .ui.inverted.form input[type="url"] {
- background: @invertedInputBackground;
- border-color: @invertedInputBorderColor;
- color: @invertedInputColor;
- box-shadow: @invertedInputBoxShadow;
- }
-}
-
-& when (@variationFormGrouped) {
- /*--------------------
- Field Groups
- ---------------------*/
-
- /* Grouped Vertically */
-
- .ui.form .grouped.fields {
- display: block;
- margin: @groupedMargin;
- }
-
- .ui.form .grouped.fields:last-child {
- margin-bottom: 0;
- }
-
- .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: 0;
- }
- .ui.form .grouped.inline.fields .ui.checkbox {
- margin-bottom: @groupedInlineCheckboxBottomMargin;
- }
-}
-
-/*--------------------
- 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;
- margin-bottom: 0;
- }
-
- .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
- .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
- width: @oneColumn;
- margin: 0 0 @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;
-}
-.ui.form .two.wide.field {
- width: @twoWide;
-}
-.ui.form .three.wide.field {
- width: @threeWide;
-}
-.ui.form .four.wide.field {
- width: @fourWide;
-}
-.ui.form .five.wide.field {
- width: @fiveWide;
-}
-.ui.form .six.wide.field {
- width: @sixWide;
-}
-.ui.form .seven.wide.field {
- width: @sevenWide;
-}
-.ui.form .eight.wide.field {
- width: @eightWide;
-}
-.ui.form .nine.wide.field {
- width: @nineWide;
-}
-.ui.form .ten.wide.field {
- width: @tenWide;
-}
-.ui.form .eleven.wide.field {
- width: @elevenWide;
-}
-.ui.form .twelve.wide.field {
- width: @twelveWide;
-}
-.ui.form .thirteen.wide.field {
- width: @thirteenWide;
-}
-.ui.form .fourteen.wide.field {
- width: @fourteenWide;
-}
-.ui.form .fifteen.wide.field {
- width: @fifteenWide;
-}
-.ui.form .sixteen.wide.field {
- width: @sixteenWide;
-}
-
-
-/*--------------------
- Equal Width
----------------------*/
-
-.ui[class*="equal width"].form .fields > .field,
-.ui.form [class*="equal width"].fields > .field {
- width: 100%;
- flex: 1 1 auto;
-}
-
-& when (@variationFormInline) {
- /*--------------------
- Inline Fields
- ---------------------*/
-
- .ui.form .inline.fields {
- margin: @fieldMargin;
- align-items: center;
- }
- .ui.form .inline.fields .field {
- margin: 0;
- 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: 0;
- margin-bottom: 0;
- 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: 0;
- margin-bottom: 0;
-
- vertical-align: middle;
- font-size: @inlineInputSize;
- }
-
- .ui.form .inline.fields .field .calendar:not(.popup),
- .ui.form .inline.field .calendar:not(.popup) {
- display:inline-block;
- }
-
- .ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
- .ui.form .inline.field .calendar:not(.popup) > .input > input {
- width: @inlineCalendarWidth;
- }
-
- /* Label */
- .ui.form .inline.fields .field > :first-child,
- .ui.form .inline.field > :first-child {
- margin: 0 @inlineLabelDistance 0 0;
- }
- .ui.form .inline.fields .field > :only-child,
- .ui.form .inline.field > :only-child {
- margin: 0;
- }
-
- /* 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.form,
-.ui.form .field .dropdown,
-.ui.form .field .dropdown .menu > .item {
- font-size: @medium;
-}
-& when not (@variationFormSizes = false) {
- each(@variationFormSizes, {
- @s: @@value;
- .ui.@{value}.form,
- .ui.@{value}.form .field .dropdown,
- .ui.@{value}.form .field .dropdown .menu > .item {
- font-size: @s;
- }
- })
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/grid.less b/semantic/src/definitions/collections/grid.less
deleted file mode 100644
index 1b5e252..0000000
--- a/semantic/src/definitions/collections/grid.less
+++ /dev/null
@@ -1,1947 +0,0 @@
-/*!
- * # Fomantic-UI - Grid
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'collection';
-@element : 'grid';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Standard
-*******************************/
-
-.ui.grid {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: stretch;
- padding: 0;
-}
-
-/*----------------------
- Remove Gutters
------------------------*/
-
-.ui.grid {
- margin-top: -(@rowSpacing / 2);
- margin-bottom: -(@rowSpacing / 2);
- margin-left: -(@gutterWidth / 2);
- margin-right: -(@gutterWidth / 2);
-}
-.ui.relaxed.grid {
- margin-left: -(@relaxedGutterWidth / 2);
- margin-right: -(@relaxedGutterWidth / 2);
-}
-.ui[class*="very relaxed"].grid {
- margin-left: -(@veryRelaxedGutterWidth / 2);
- margin-right: -(@veryRelaxedGutterWidth / 2);
-}
-
-
-/* Preserve Rows Spacing on Consecutive Grids */
-.ui.grid + .grid {
- margin-top: @consecutiveGridDistance;
-}
-
-/*-------------------
- Columns
---------------------*/
-
-/* Standard 16 column */
-.ui.grid > .column:not(.row),
-.ui.grid > .row > .column {
- position: relative;
- display: inline-block;
-
- width: @oneWide;
- padding-left: (@gutterWidth / 2);
- padding-right: (@gutterWidth / 2);
- vertical-align: top;
-}
-
-.ui.grid > * {
- padding-left: (@gutterWidth / 2);
- padding-right: (@gutterWidth / 2);
-}
-
-/*-------------------
- Rows
---------------------*/
-
-.ui.grid > .row {
- position: relative;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: inherit;
- align-items: stretch;
- width: 100% !important;
- padding: 0;
- padding-top: (@rowSpacing / 2);
- padding-bottom: (@rowSpacing / 2);
-}
-
-/*-------------------
- Columns
---------------------*/
-
-/* Vertical padding when no rows */
-.ui.grid > .column:not(.row) {
- padding-top: (@rowSpacing / 2);
- padding-bottom: (@rowSpacing / 2);
-}
-.ui.grid > .row > .column {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-/*-------------------
- Content
---------------------*/
-
-.ui.grid > .row > img,
-.ui.grid > .row > .column > img {
- max-width: @columnMaxImageWidth;
-}
-
-/*-------------------
- Loose Coupling
---------------------*/
-
-/* Collapse Margin on Consecutive Grid */
-.ui.grid > .ui.grid:first-child {
- margin-top: 0;
-}
-.ui.grid > .ui.grid:last-child {
- margin-bottom: 0;
-}
-
-/* Segment inside Aligned Grid */
-.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
-.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
- width: 100%;
-}
-
-/* Align Dividers with Gutter */
-.ui.grid .row + .ui.divider {
- flex-grow: 1;
- margin: (@rowSpacing / 2) (@gutterWidth / 2);
-}
-.ui.grid .column + .ui.vertical.divider {
- height: e(%("calc(50%% - %d)", @rowSpacing / 2));
-}
-
-/* Remove Border on Last Horizontal Segment */
-.ui.grid > .row > .column:last-child > .horizontal.segment,
-.ui.grid > .column:last-child > .horizontal.segment {
- box-shadow: none;
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationGridPage) {
- /*-----------------------
- Page Grid
- -------------------------*/
-
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.page.grid {
- width: @mobileWidth;
- padding-left: @mobileGutter;
- padding-right: @mobileGutter;
- margin-left: 0;
- margin-right: 0;
- }
- }
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.page.grid {
- width: @tabletWidth;
- margin-left: @tabletMargin;
- margin-right: @tabletMargin;
- padding-left: @tabletGutter;
- padding-right: @tabletGutter;
- }
- }
- @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
- .ui.page.grid {
- width: @computerWidth;
- margin-left: @computerMargin;
- margin-right: @computerMargin;
- padding-left: @computerGutter;
- padding-right: @computerGutter;
- }
- }
- @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
- .ui.page.grid {
- width: @largeMonitorWidth;
- margin-left: @largeMonitorMargin;
- margin-right: @largeMonitorMargin;
- padding-left: @largeMonitorGutter;
- padding-right: @largeMonitorGutter;
- }
- }
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui.page.grid {
- width: @widescreenMonitorWidth;
- margin-left: @widescreenMargin;
- margin-right: @widescreenMargin;
- padding-left: @widescreenMonitorGutter;
- padding-right: @widescreenMonitorGutter;
- }
- }
-}
-
-
-/*-------------------
- Column Count
---------------------*/
-
-/* Assume full width with one column */
-.ui.grid > .column:only-child,
-.ui.grid > .row > .column:only-child {
- width: @oneColumn;
-}
-
-/* Grid Based */
-.ui[class*="one column"].grid > .row > .column,
-.ui[class*="one column"].grid > .column:not(.row) {
- width: @oneColumn;
-}
-.ui[class*="two column"].grid > .row > .column,
-.ui[class*="two column"].grid > .column:not(.row) {
- width: @twoColumn;
-}
-.ui[class*="three column"].grid > .row > .column,
-.ui[class*="three column"].grid > .column:not(.row) {
- width: @threeColumn;
-}
-.ui[class*="four column"].grid > .row > .column,
-.ui[class*="four column"].grid > .column:not(.row) {
- width: @fourColumn;
-}
-.ui[class*="five column"].grid > .row > .column,
-.ui[class*="five column"].grid > .column:not(.row) {
- width: @fiveColumn;
-}
-.ui[class*="six column"].grid > .row > .column,
-.ui[class*="six column"].grid > .column:not(.row) {
- width: @sixColumn;
-}
-.ui[class*="seven column"].grid > .row > .column,
-.ui[class*="seven column"].grid > .column:not(.row) {
- width: @sevenColumn;
-}
-.ui[class*="eight column"].grid > .row > .column,
-.ui[class*="eight column"].grid > .column:not(.row) {
- width: @eightColumn;
-}
-.ui[class*="nine column"].grid > .row > .column,
-.ui[class*="nine column"].grid > .column:not(.row) {
- width: @nineColumn;
-}
-.ui[class*="ten column"].grid > .row > .column,
-.ui[class*="ten column"].grid > .column:not(.row) {
- width: @tenColumn;
-}
-.ui[class*="eleven column"].grid > .row > .column,
-.ui[class*="eleven column"].grid > .column:not(.row) {
- width: @elevenColumn;
-}
-.ui[class*="twelve column"].grid > .row > .column,
-.ui[class*="twelve column"].grid > .column:not(.row) {
- width: @twelveColumn;
-}
-.ui[class*="thirteen column"].grid > .row > .column,
-.ui[class*="thirteen column"].grid > .column:not(.row) {
- width: @thirteenColumn;
-}
-.ui[class*="fourteen column"].grid > .row > .column,
-.ui[class*="fourteen column"].grid > .column:not(.row) {
- width: @fourteenColumn;
-}
-.ui[class*="fifteen column"].grid > .row > .column,
-.ui[class*="fifteen column"].grid > .column:not(.row) {
- width: @fifteenColumn;
-}
-.ui[class*="sixteen column"].grid > .row > .column,
-.ui[class*="sixteen column"].grid > .column:not(.row) {
- width: @sixteenColumn;
-}
-
-/* Row Based Overrides */
-.ui.grid > [class*="one column"].row > .column {
- width: @oneColumn !important;
-}
-.ui.grid > [class*="two column"].row > .column {
- width: @twoColumn !important;
-}
-.ui.grid > [class*="three column"].row > .column {
- width: @threeColumn !important;
-}
-.ui.grid > [class*="four column"].row > .column {
- width: @fourColumn !important;
-}
-.ui.grid > [class*="five column"].row > .column {
- width: @fiveColumn !important;
-}
-.ui.grid > [class*="six column"].row > .column {
- width: @sixColumn !important;
-}
-.ui.grid > [class*="seven column"].row > .column {
- width: @sevenColumn !important;
-}
-.ui.grid > [class*="eight column"].row > .column {
- width: @eightColumn !important;
-}
-.ui.grid > [class*="nine column"].row > .column {
- width: @nineColumn !important;
-}
-.ui.grid > [class*="ten column"].row > .column {
- width: @tenColumn !important;
-}
-.ui.grid > [class*="eleven column"].row > .column {
- width: @elevenColumn !important;
-}
-.ui.grid > [class*="twelve column"].row > .column {
- width: @twelveColumn !important;
-}
-.ui.grid > [class*="thirteen column"].row > .column {
- width: @thirteenColumn !important;
-}
-.ui.grid > [class*="fourteen column"].row > .column {
- width: @fourteenColumn !important;
-}
-.ui.grid > [class*="fifteen column"].row > .column {
- width: @fifteenColumn !important;
-}
-.ui.grid > [class*="sixteen column"].row > .column {
- width: @sixteenColumn !important;
-}
-
-& when (@variationGridCelled) and (@variationGridPage){
- /* Celled Page */
- .ui.celled.page.grid {
- box-shadow: none;
- }
-}
-
-/*-------------------
- Column Width
---------------------*/
-
-/* Sizing Combinations */
-.ui.grid > .row > [class*="one wide"].column,
-.ui.grid > .column.row > [class*="one wide"].column,
-.ui.grid > [class*="one wide"].column,
-.ui.column.grid > [class*="one wide"].column {
- width: @oneWide !important;
-}
-.ui.grid > .row > [class*="two wide"].column,
-.ui.grid > .column.row > [class*="two wide"].column,
-.ui.grid > [class*="two wide"].column,
-.ui.column.grid > [class*="two wide"].column {
- width: @twoWide !important;
-}
-.ui.grid > .row > [class*="three wide"].column,
-.ui.grid > .column.row > [class*="three wide"].column,
-.ui.grid > [class*="three wide"].column,
-.ui.column.grid > [class*="three wide"].column {
- width: @threeWide !important;
-}
-.ui.grid > .row > [class*="four wide"].column,
-.ui.grid > .column.row > [class*="four wide"].column,
-.ui.grid > [class*="four wide"].column,
-.ui.column.grid > [class*="four wide"].column {
- width: @fourWide !important;
-}
-.ui.grid > .row > [class*="five wide"].column,
-.ui.grid > .column.row > [class*="five wide"].column,
-.ui.grid > [class*="five wide"].column,
-.ui.column.grid > [class*="five wide"].column {
- width: @fiveWide !important;
-}
-.ui.grid > .row > [class*="six wide"].column,
-.ui.grid > .column.row > [class*="six wide"].column,
-.ui.grid > [class*="six wide"].column,
-.ui.column.grid > [class*="six wide"].column {
- width: @sixWide !important;
-}
-.ui.grid > .row > [class*="seven wide"].column,
-.ui.grid > .column.row > [class*="seven wide"].column,
-.ui.grid > [class*="seven wide"].column,
-.ui.column.grid > [class*="seven wide"].column {
- width: @sevenWide !important;
-}
-.ui.grid > .row > [class*="eight wide"].column,
-.ui.grid > .column.row > [class*="eight wide"].column,
-.ui.grid > [class*="eight wide"].column,
-.ui.column.grid > [class*="eight wide"].column {
- width: @eightWide !important;
-}
-.ui.grid > .row > [class*="nine wide"].column,
-.ui.grid > .column.row > [class*="nine wide"].column,
-.ui.grid > [class*="nine wide"].column,
-.ui.column.grid > [class*="nine wide"].column {
- width: @nineWide !important;
-}
-.ui.grid > .row > [class*="ten wide"].column,
-.ui.grid > .column.row > [class*="ten wide"].column,
-.ui.grid > [class*="ten wide"].column,
-.ui.column.grid > [class*="ten wide"].column {
- width: @tenWide !important;
-}
-.ui.grid > .row > [class*="eleven wide"].column,
-.ui.grid > .column.row > [class*="eleven wide"].column,
-.ui.grid > [class*="eleven wide"].column,
-.ui.column.grid > [class*="eleven wide"].column {
- width: @elevenWide !important;
-}
-.ui.grid > .row > [class*="twelve wide"].column,
-.ui.grid > .column.row > [class*="twelve wide"].column,
-.ui.grid > [class*="twelve wide"].column,
-.ui.column.grid > [class*="twelve wide"].column {
- width: @twelveWide !important;
-}
-.ui.grid > .row > [class*="thirteen wide"].column,
-.ui.grid > .column.row > [class*="thirteen wide"].column,
-.ui.grid > [class*="thirteen wide"].column,
-.ui.column.grid > [class*="thirteen wide"].column {
- width: @thirteenWide !important;
-}
-.ui.grid > .row > [class*="fourteen wide"].column,
-.ui.grid > .column.row > [class*="fourteen wide"].column,
-.ui.grid > [class*="fourteen wide"].column,
-.ui.column.grid > [class*="fourteen wide"].column {
- width: @fourteenWide !important;
-}
-.ui.grid > .row > [class*="fifteen wide"].column,
-.ui.grid > .column.row > [class*="fifteen wide"].column,
-.ui.grid > [class*="fifteen wide"].column,
-.ui.column.grid > [class*="fifteen wide"].column {
- width: @fifteenWide !important;
-}
-.ui.grid > .row > [class*="sixteen wide"].column,
-.ui.grid > .column.row > [class*="sixteen wide"].column,
-.ui.grid > [class*="sixteen wide"].column,
-.ui.column.grid > [class*="sixteen wide"].column {
- width: @sixteenWide !important;
-}
-
-/*----------------------
- Width per Device
------------------------*/
-
-/* Mobile Sizing Combinations */
-@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
- .ui.grid > .row > [class*="one wide mobile"].column,
- .ui.grid > .column.row > [class*="one wide mobile"].column,
- .ui.grid > [class*="one wide mobile"].column,
- .ui.column.grid > [class*="one wide mobile"].column {
- width: @oneWide !important;
- }
- .ui.grid > .row > [class*="two wide mobile"].column,
- .ui.grid > .column.row > [class*="two wide mobile"].column,
- .ui.grid > [class*="two wide mobile"].column,
- .ui.column.grid > [class*="two wide mobile"].column {
- width: @twoWide !important;
- }
- .ui.grid > .row > [class*="three wide mobile"].column,
- .ui.grid > .column.row > [class*="three wide mobile"].column,
- .ui.grid > [class*="three wide mobile"].column,
- .ui.column.grid > [class*="three wide mobile"].column {
- width: @threeWide !important;
- }
- .ui.grid > .row > [class*="four wide mobile"].column,
- .ui.grid > .column.row > [class*="four wide mobile"].column,
- .ui.grid > [class*="four wide mobile"].column,
- .ui.column.grid > [class*="four wide mobile"].column {
- width: @fourWide !important;
- }
- .ui.grid > .row > [class*="five wide mobile"].column,
- .ui.grid > .column.row > [class*="five wide mobile"].column,
- .ui.grid > [class*="five wide mobile"].column,
- .ui.column.grid > [class*="five wide mobile"].column {
- width: @fiveWide !important;
- }
- .ui.grid > .row > [class*="six wide mobile"].column,
- .ui.grid > .column.row > [class*="six wide mobile"].column,
- .ui.grid > [class*="six wide mobile"].column,
- .ui.column.grid > [class*="six wide mobile"].column {
- width: @sixWide !important;
- }
- .ui.grid > .row > [class*="seven wide mobile"].column,
- .ui.grid > .column.row > [class*="seven wide mobile"].column,
- .ui.grid > [class*="seven wide mobile"].column,
- .ui.column.grid > [class*="seven wide mobile"].column {
- width: @sevenWide !important;
- }
- .ui.grid > .row > [class*="eight wide mobile"].column,
- .ui.grid > .column.row > [class*="eight wide mobile"].column,
- .ui.grid > [class*="eight wide mobile"].column,
- .ui.column.grid > [class*="eight wide mobile"].column {
- width: @eightWide !important;
- }
- .ui.grid > .row > [class*="nine wide mobile"].column,
- .ui.grid > .column.row > [class*="nine wide mobile"].column,
- .ui.grid > [class*="nine wide mobile"].column,
- .ui.column.grid > [class*="nine wide mobile"].column {
- width: @nineWide !important;
- }
- .ui.grid > .row > [class*="ten wide mobile"].column,
- .ui.grid > .column.row > [class*="ten wide mobile"].column,
- .ui.grid > [class*="ten wide mobile"].column,
- .ui.column.grid > [class*="ten wide mobile"].column {
- width: @tenWide !important;
- }
- .ui.grid > .row > [class*="eleven wide mobile"].column,
- .ui.grid > .column.row > [class*="eleven wide mobile"].column,
- .ui.grid > [class*="eleven wide mobile"].column,
- .ui.column.grid > [class*="eleven wide mobile"].column {
- width: @elevenWide !important;
- }
- .ui.grid > .row > [class*="twelve wide mobile"].column,
- .ui.grid > .column.row > [class*="twelve wide mobile"].column,
- .ui.grid > [class*="twelve wide mobile"].column,
- .ui.column.grid > [class*="twelve wide mobile"].column {
- width: @twelveWide !important;
- }
- .ui.grid > .row > [class*="thirteen wide mobile"].column,
- .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
- .ui.grid > [class*="thirteen wide mobile"].column,
- .ui.column.grid > [class*="thirteen wide mobile"].column {
- width: @thirteenWide !important;
- }
- .ui.grid > .row > [class*="fourteen wide mobile"].column,
- .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
- .ui.grid > [class*="fourteen wide mobile"].column,
- .ui.column.grid > [class*="fourteen wide mobile"].column {
- width: @fourteenWide !important;
- }
- .ui.grid > .row > [class*="fifteen wide mobile"].column,
- .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
- .ui.grid > [class*="fifteen wide mobile"].column,
- .ui.column.grid > [class*="fifteen wide mobile"].column {
- width: @fifteenWide !important;
- }
- .ui.grid > .row > [class*="sixteen wide mobile"].column,
- .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
- .ui.grid > [class*="sixteen wide mobile"].column,
- .ui.column.grid > [class*="sixteen wide mobile"].column {
- width: @sixteenWide !important;
- }
-}
-
-/* Tablet Sizing Combinations */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.grid > .row > [class*="one wide tablet"].column,
- .ui.grid > .column.row > [class*="one wide tablet"].column,
- .ui.grid > [class*="one wide tablet"].column,
- .ui.column.grid > [class*="one wide tablet"].column {
- width: @oneWide !important;
- }
- .ui.grid > .row > [class*="two wide tablet"].column,
- .ui.grid > .column.row > [class*="two wide tablet"].column,
- .ui.grid > [class*="two wide tablet"].column,
- .ui.column.grid > [class*="two wide tablet"].column {
- width: @twoWide !important;
- }
- .ui.grid > .row > [class*="three wide tablet"].column,
- .ui.grid > .column.row > [class*="three wide tablet"].column,
- .ui.grid > [class*="three wide tablet"].column,
- .ui.column.grid > [class*="three wide tablet"].column {
- width: @threeWide !important;
- }
- .ui.grid > .row > [class*="four wide tablet"].column,
- .ui.grid > .column.row > [class*="four wide tablet"].column,
- .ui.grid > [class*="four wide tablet"].column,
- .ui.column.grid > [class*="four wide tablet"].column {
- width: @fourWide !important;
- }
- .ui.grid > .row > [class*="five wide tablet"].column,
- .ui.grid > .column.row > [class*="five wide tablet"].column,
- .ui.grid > [class*="five wide tablet"].column,
- .ui.column.grid > [class*="five wide tablet"].column {
- width: @fiveWide !important;
- }
- .ui.grid > .row > [class*="six wide tablet"].column,
- .ui.grid > .column.row > [class*="six wide tablet"].column,
- .ui.grid > [class*="six wide tablet"].column,
- .ui.column.grid > [class*="six wide tablet"].column {
- width: @sixWide !important;
- }
- .ui.grid > .row > [class*="seven wide tablet"].column,
- .ui.grid > .column.row > [class*="seven wide tablet"].column,
- .ui.grid > [class*="seven wide tablet"].column,
- .ui.column.grid > [class*="seven wide tablet"].column {
- width: @sevenWide !important;
- }
- .ui.grid > .row > [class*="eight wide tablet"].column,
- .ui.grid > .column.row > [class*="eight wide tablet"].column,
- .ui.grid > [class*="eight wide tablet"].column,
- .ui.column.grid > [class*="eight wide tablet"].column {
- width: @eightWide !important;
- }
- .ui.grid > .row > [class*="nine wide tablet"].column,
- .ui.grid > .column.row > [class*="nine wide tablet"].column,
- .ui.grid > [class*="nine wide tablet"].column,
- .ui.column.grid > [class*="nine wide tablet"].column {
- width: @nineWide !important;
- }
- .ui.grid > .row > [class*="ten wide tablet"].column,
- .ui.grid > .column.row > [class*="ten wide tablet"].column,
- .ui.grid > [class*="ten wide tablet"].column,
- .ui.column.grid > [class*="ten wide tablet"].column {
- width: @tenWide !important;
- }
- .ui.grid > .row > [class*="eleven wide tablet"].column,
- .ui.grid > .column.row > [class*="eleven wide tablet"].column,
- .ui.grid > [class*="eleven wide tablet"].column,
- .ui.column.grid > [class*="eleven wide tablet"].column {
- width: @elevenWide !important;
- }
- .ui.grid > .row > [class*="twelve wide tablet"].column,
- .ui.grid > .column.row > [class*="twelve wide tablet"].column,
- .ui.grid > [class*="twelve wide tablet"].column,
- .ui.column.grid > [class*="twelve wide tablet"].column {
- width: @twelveWide !important;
- }
- .ui.grid > .row > [class*="thirteen wide tablet"].column,
- .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
- .ui.grid > [class*="thirteen wide tablet"].column,
- .ui.column.grid > [class*="thirteen wide tablet"].column {
- width: @thirteenWide !important;
- }
- .ui.grid > .row > [class*="fourteen wide tablet"].column,
- .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
- .ui.grid > [class*="fourteen wide tablet"].column,
- .ui.column.grid > [class*="fourteen wide tablet"].column {
- width: @fourteenWide !important;
- }
- .ui.grid > .row > [class*="fifteen wide tablet"].column,
- .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
- .ui.grid > [class*="fifteen wide tablet"].column,
- .ui.column.grid > [class*="fifteen wide tablet"].column {
- width: @fifteenWide !important;
- }
- .ui.grid > .row > [class*="sixteen wide tablet"].column,
- .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
- .ui.grid > [class*="sixteen wide tablet"].column,
- .ui.column.grid > [class*="sixteen wide tablet"].column {
- width: @sixteenWide !important;
- }
-}
-
-/* Computer/Desktop Sizing Combinations */
-@media only screen and (min-width: @computerBreakpoint) {
- .ui.grid > .row > [class*="one wide computer"].column,
- .ui.grid > .column.row > [class*="one wide computer"].column,
- .ui.grid > [class*="one wide computer"].column,
- .ui.column.grid > [class*="one wide computer"].column {
- width: @oneWide !important;
- }
- .ui.grid > .row > [class*="two wide computer"].column,
- .ui.grid > .column.row > [class*="two wide computer"].column,
- .ui.grid > [class*="two wide computer"].column,
- .ui.column.grid > [class*="two wide computer"].column {
- width: @twoWide !important;
- }
- .ui.grid > .row > [class*="three wide computer"].column,
- .ui.grid > .column.row > [class*="three wide computer"].column,
- .ui.grid > [class*="three wide computer"].column,
- .ui.column.grid > [class*="three wide computer"].column {
- width: @threeWide !important;
- }
- .ui.grid > .row > [class*="four wide computer"].column,
- .ui.grid > .column.row > [class*="four wide computer"].column,
- .ui.grid > [class*="four wide computer"].column,
- .ui.column.grid > [class*="four wide computer"].column {
- width: @fourWide !important;
- }
- .ui.grid > .row > [class*="five wide computer"].column,
- .ui.grid > .column.row > [class*="five wide computer"].column,
- .ui.grid > [class*="five wide computer"].column,
- .ui.column.grid > [class*="five wide computer"].column {
- width: @fiveWide !important;
- }
- .ui.grid > .row > [class*="six wide computer"].column,
- .ui.grid > .column.row > [class*="six wide computer"].column,
- .ui.grid > [class*="six wide computer"].column,
- .ui.column.grid > [class*="six wide computer"].column {
- width: @sixWide !important;
- }
- .ui.grid > .row > [class*="seven wide computer"].column,
- .ui.grid > .column.row > [class*="seven wide computer"].column,
- .ui.grid > [class*="seven wide computer"].column,
- .ui.column.grid > [class*="seven wide computer"].column {
- width: @sevenWide !important;
- }
- .ui.grid > .row > [class*="eight wide computer"].column,
- .ui.grid > .column.row > [class*="eight wide computer"].column,
- .ui.grid > [class*="eight wide computer"].column,
- .ui.column.grid > [class*="eight wide computer"].column {
- width: @eightWide !important;
- }
- .ui.grid > .row > [class*="nine wide computer"].column,
- .ui.grid > .column.row > [class*="nine wide computer"].column,
- .ui.grid > [class*="nine wide computer"].column,
- .ui.column.grid > [class*="nine wide computer"].column {
- width: @nineWide !important;
- }
- .ui.grid > .row > [class*="ten wide computer"].column,
- .ui.grid > .column.row > [class*="ten wide computer"].column,
- .ui.grid > [class*="ten wide computer"].column,
- .ui.column.grid > [class*="ten wide computer"].column {
- width: @tenWide !important;
- }
- .ui.grid > .row > [class*="eleven wide computer"].column,
- .ui.grid > .column.row > [class*="eleven wide computer"].column,
- .ui.grid > [class*="eleven wide computer"].column,
- .ui.column.grid > [class*="eleven wide computer"].column {
- width: @elevenWide !important;
- }
- .ui.grid > .row > [class*="twelve wide computer"].column,
- .ui.grid > .column.row > [class*="twelve wide computer"].column,
- .ui.grid > [class*="twelve wide computer"].column,
- .ui.column.grid > [class*="twelve wide computer"].column {
- width: @twelveWide !important;
- }
- .ui.grid > .row > [class*="thirteen wide computer"].column,
- .ui.grid > .column.row > [class*="thirteen wide computer"].column,
- .ui.grid > [class*="thirteen wide computer"].column,
- .ui.column.grid > [class*="thirteen wide computer"].column {
- width: @thirteenWide !important;
- }
- .ui.grid > .row > [class*="fourteen wide computer"].column,
- .ui.grid > .column.row > [class*="fourteen wide computer"].column,
- .ui.grid > [class*="fourteen wide computer"].column,
- .ui.column.grid > [class*="fourteen wide computer"].column {
- width: @fourteenWide !important;
- }
- .ui.grid > .row > [class*="fifteen wide computer"].column,
- .ui.grid > .column.row > [class*="fifteen wide computer"].column,
- .ui.grid > [class*="fifteen wide computer"].column,
- .ui.column.grid > [class*="fifteen wide computer"].column {
- width: @fifteenWide !important;
- }
- .ui.grid > .row > [class*="sixteen wide computer"].column,
- .ui.grid > .column.row > [class*="sixteen wide computer"].column,
- .ui.grid > [class*="sixteen wide computer"].column,
- .ui.column.grid > [class*="sixteen wide computer"].column {
- width: @sixteenWide !important;
- }
-}
-
-/* Large Monitor Sizing Combinations */
-@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){
- .ui.grid > .row > [class*="one wide large screen"].column,
- .ui.grid > .column.row > [class*="one wide large screen"].column,
- .ui.grid > [class*="one wide large screen"].column,
- .ui.column.grid > [class*="one wide large screen"].column {
- width: @oneWide !important;
- }
- .ui.grid > .row > [class*="two wide large screen"].column,
- .ui.grid > .column.row > [class*="two wide large screen"].column,
- .ui.grid > [class*="two wide large screen"].column,
- .ui.column.grid > [class*="two wide large screen"].column {
- width: @twoWide !important;
- }
- .ui.grid > .row > [class*="three wide large screen"].column,
- .ui.grid > .column.row > [class*="three wide large screen"].column,
- .ui.grid > [class*="three wide large screen"].column,
- .ui.column.grid > [class*="three wide large screen"].column {
- width: @threeWide !important;
- }
- .ui.grid > .row > [class*="four wide large screen"].column,
- .ui.grid > .column.row > [class*="four wide large screen"].column,
- .ui.grid > [class*="four wide large screen"].column,
- .ui.column.grid > [class*="four wide large screen"].column {
- width: @fourWide !important;
- }
- .ui.grid > .row > [class*="five wide large screen"].column,
- .ui.grid > .column.row > [class*="five wide large screen"].column,
- .ui.grid > [class*="five wide large screen"].column,
- .ui.column.grid > [class*="five wide large screen"].column {
- width: @fiveWide !important;
- }
- .ui.grid > .row > [class*="six wide large screen"].column,
- .ui.grid > .column.row > [class*="six wide large screen"].column,
- .ui.grid > [class*="six wide large screen"].column,
- .ui.column.grid > [class*="six wide large screen"].column {
- width: @sixWide !important;
- }
- .ui.grid > .row > [class*="seven wide large screen"].column,
- .ui.grid > .column.row > [class*="seven wide large screen"].column,
- .ui.grid > [class*="seven wide large screen"].column,
- .ui.column.grid > [class*="seven wide large screen"].column {
- width: @sevenWide !important;
- }
- .ui.grid > .row > [class*="eight wide large screen"].column,
- .ui.grid > .column.row > [class*="eight wide large screen"].column,
- .ui.grid > [class*="eight wide large screen"].column,
- .ui.column.grid > [class*="eight wide large screen"].column {
- width: @eightWide !important;
- }
- .ui.grid > .row > [class*="nine wide large screen"].column,
- .ui.grid > .column.row > [class*="nine wide large screen"].column,
- .ui.grid > [class*="nine wide large screen"].column,
- .ui.column.grid > [class*="nine wide large screen"].column {
- width: @nineWide !important;
- }
- .ui.grid > .row > [class*="ten wide large screen"].column,
- .ui.grid > .column.row > [class*="ten wide large screen"].column,
- .ui.grid > [class*="ten wide large screen"].column,
- .ui.column.grid > [class*="ten wide large screen"].column {
- width: @tenWide !important;
- }
- .ui.grid > .row > [class*="eleven wide large screen"].column,
- .ui.grid > .column.row > [class*="eleven wide large screen"].column,
- .ui.grid > [class*="eleven wide large screen"].column,
- .ui.column.grid > [class*="eleven wide large screen"].column {
- width: @elevenWide !important;
- }
- .ui.grid > .row > [class*="twelve wide large screen"].column,
- .ui.grid > .column.row > [class*="twelve wide large screen"].column,
- .ui.grid > [class*="twelve wide large screen"].column,
- .ui.column.grid > [class*="twelve wide large screen"].column {
- width: @twelveWide !important;
- }
- .ui.grid > .row > [class*="thirteen wide large screen"].column,
- .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
- .ui.grid > [class*="thirteen wide large screen"].column,
- .ui.column.grid > [class*="thirteen wide large screen"].column {
- width: @thirteenWide !important;
- }
- .ui.grid > .row > [class*="fourteen wide large screen"].column,
- .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
- .ui.grid > [class*="fourteen wide large screen"].column,
- .ui.column.grid > [class*="fourteen wide large screen"].column {
- width: @fourteenWide !important;
- }
- .ui.grid > .row > [class*="fifteen wide large screen"].column,
- .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
- .ui.grid > [class*="fifteen wide large screen"].column,
- .ui.column.grid > [class*="fifteen wide large screen"].column {
- width: @fifteenWide !important;
- }
- .ui.grid > .row > [class*="sixteen wide large screen"].column,
- .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
- .ui.grid > [class*="sixteen wide large screen"].column,
- .ui.column.grid > [class*="sixteen wide large screen"].column {
- width: @sixteenWide !important;
- }
-}
-
-/* Widescreen Sizing Combinations */
-@media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui.grid > .row > [class*="one wide widescreen"].column,
- .ui.grid > .column.row > [class*="one wide widescreen"].column,
- .ui.grid > [class*="one wide widescreen"].column,
- .ui.column.grid > [class*="one wide widescreen"].column {
- width: @oneWide !important;
- }
- .ui.grid > .row > [class*="two wide widescreen"].column,
- .ui.grid > .column.row > [class*="two wide widescreen"].column,
- .ui.grid > [class*="two wide widescreen"].column,
- .ui.column.grid > [class*="two wide widescreen"].column {
- width: @twoWide !important;
- }
- .ui.grid > .row > [class*="three wide widescreen"].column,
- .ui.grid > .column.row > [class*="three wide widescreen"].column,
- .ui.grid > [class*="three wide widescreen"].column,
- .ui.column.grid > [class*="three wide widescreen"].column {
- width: @threeWide !important;
- }
- .ui.grid > .row > [class*="four wide widescreen"].column,
- .ui.grid > .column.row > [class*="four wide widescreen"].column,
- .ui.grid > [class*="four wide widescreen"].column,
- .ui.column.grid > [class*="four wide widescreen"].column {
- width: @fourWide !important;
- }
- .ui.grid > .row > [class*="five wide widescreen"].column,
- .ui.grid > .column.row > [class*="five wide widescreen"].column,
- .ui.grid > [class*="five wide widescreen"].column,
- .ui.column.grid > [class*="five wide widescreen"].column {
- width: @fiveWide !important;
- }
- .ui.grid > .row > [class*="six wide widescreen"].column,
- .ui.grid > .column.row > [class*="six wide widescreen"].column,
- .ui.grid > [class*="six wide widescreen"].column,
- .ui.column.grid > [class*="six wide widescreen"].column {
- width: @sixWide !important;
- }
- .ui.grid > .row > [class*="seven wide widescreen"].column,
- .ui.grid > .column.row > [class*="seven wide widescreen"].column,
- .ui.grid > [class*="seven wide widescreen"].column,
- .ui.column.grid > [class*="seven wide widescreen"].column {
- width: @sevenWide !important;
- }
- .ui.grid > .row > [class*="eight wide widescreen"].column,
- .ui.grid > .column.row > [class*="eight wide widescreen"].column,
- .ui.grid > [class*="eight wide widescreen"].column,
- .ui.column.grid > [class*="eight wide widescreen"].column {
- width: @eightWide !important;
- }
- .ui.grid > .row > [class*="nine wide widescreen"].column,
- .ui.grid > .column.row > [class*="nine wide widescreen"].column,
- .ui.grid > [class*="nine wide widescreen"].column,
- .ui.column.grid > [class*="nine wide widescreen"].column {
- width: @nineWide !important;
- }
- .ui.grid > .row > [class*="ten wide widescreen"].column,
- .ui.grid > .column.row > [class*="ten wide widescreen"].column,
- .ui.grid > [class*="ten wide widescreen"].column,
- .ui.column.grid > [class*="ten wide widescreen"].column {
- width: @tenWide !important;
- }
- .ui.grid > .row > [class*="eleven wide widescreen"].column,
- .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
- .ui.grid > [class*="eleven wide widescreen"].column,
- .ui.column.grid > [class*="eleven wide widescreen"].column {
- width: @elevenWide !important;
- }
- .ui.grid > .row > [class*="twelve wide widescreen"].column,
- .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
- .ui.grid > [class*="twelve wide widescreen"].column,
- .ui.column.grid > [class*="twelve wide widescreen"].column {
- width: @twelveWide !important;
- }
- .ui.grid > .row > [class*="thirteen wide widescreen"].column,
- .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
- .ui.grid > [class*="thirteen wide widescreen"].column,
- .ui.column.grid > [class*="thirteen wide widescreen"].column {
- width: @thirteenWide !important;
- }
- .ui.grid > .row > [class*="fourteen wide widescreen"].column,
- .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
- .ui.grid > [class*="fourteen wide widescreen"].column,
- .ui.column.grid > [class*="fourteen wide widescreen"].column {
- width: @fourteenWide !important;
- }
- .ui.grid > .row > [class*="fifteen wide widescreen"].column,
- .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
- .ui.grid > [class*="fifteen wide widescreen"].column,
- .ui.column.grid > [class*="fifteen wide widescreen"].column {
- width: @fifteenWide !important;
- }
- .ui.grid > .row > [class*="sixteen wide widescreen"].column,
- .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
- .ui.grid > [class*="sixteen wide widescreen"].column,
- .ui.column.grid > [class*="sixteen wide widescreen"].column {
- width: @sixteenWide !important;
- }
-}
-
-& when (@variationGridCentered) {
- /*----------------------
- Centered
- -----------------------*/
-
- .ui.centered.grid,
- .ui.centered.grid > .row,
- .ui.grid > .centered.row {
- text-align: center;
- justify-content: center;
- }
- .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
- .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
- .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
- text-align: left;
- }
-
- .ui.grid > .centered.column,
- .ui.grid > .row > .centered.column {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
-}
-
-& when (@variationGridRelaxed) {
- /*----------------------
- Relaxed
- -----------------------*/
-
- .ui.relaxed.grid > .column:not(.row),
- .ui.relaxed.grid > .row > .column,
- .ui.grid > .relaxed.row > .column {
- padding-left: (@relaxedGutterWidth / 2);
- padding-right: (@relaxedGutterWidth / 2);
- }
-
- .ui[class*="very relaxed"].grid > .column:not(.row),
- .ui[class*="very relaxed"].grid > .row > .column,
- .ui.grid > [class*="very relaxed"].row > .column {
- padding-left: (@veryRelaxedGutterWidth / 2);
- padding-right: (@veryRelaxedGutterWidth / 2);
- }
-
- /* Coupling with UI Divider */
- .ui.relaxed.grid .row + .ui.divider,
- .ui.grid .relaxed.row + .ui.divider {
- margin-left: (@relaxedGutterWidth / 2);
- margin-right: (@relaxedGutterWidth / 2);
- }
- .ui[class*="very relaxed"].grid .row + .ui.divider,
- .ui.grid [class*="very relaxed"].row + .ui.divider {
- margin-left: (@veryRelaxedGutterWidth / 2);
- margin-right: (@veryRelaxedGutterWidth / 2);
- }
-}
-
-& when (@variationGridPadded) {
- /*----------------------
- Padded
- -----------------------*/
-
- .ui.padded.grid:not(.vertically):not(.horizontally) {
- margin: 0 !important;
- }
- [class*="horizontally padded"].ui.grid {
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
- [class*="vertically padded"].ui.grid {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- }
-}
-
-& when (@variationGridFloated) {
- /*----------------------
- "Floated"
- -----------------------*/
-
- .ui.grid [class*="left floated"].column {
- margin-right: auto;
- }
- .ui.grid [class*="right floated"].column {
- margin-left: auto;
- }
-}
-
-& when (@variationGridDivided) {
- /*----------------------
- Divided
- -----------------------*/
-
- .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
- .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
- box-shadow: @dividedBorder;
- }
-
- /* Swap from padding to margin on columns to have dividers align */
- .ui[class*="vertically divided"].grid > .column:not(.row),
- .ui[class*="vertically divided"].grid > .row > .column {
- margin-top: (@rowSpacing / 2);
- margin-bottom: (@rowSpacing / 2);
- padding-top: 0;
- padding-bottom: 0;
- }
- .ui[class*="vertically divided"].grid > .row {
- margin-top: 0;
- margin-bottom: 0;
- }
-
-
-
- /* No divider on first column on row */
- .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: none;
- }
-
- /* No space on top of first row */
- .ui[class*="vertically divided"].grid > .row:first-child > .column {
- margin-top: 0;
- }
-
-
- /* Divided Row */
- .ui.grid > .divided.row > .column {
- box-shadow: @dividedBorder;
- }
- .ui.grid > .divided.row > .column:first-child {
- box-shadow: none;
- }
-
- /* Vertically Divided */
- .ui[class*="vertically divided"].grid > .row {
- position: relative;
- }
- .ui[class*="vertically divided"].grid > .row:before {
- position: absolute;
- content: "";
- top: 0;
- left: 0;
-
- width: e(%("calc(100%% - %d)", @gutterWidth));
- height: 1px;
-
- margin: 0 (@gutterWidth / 2);
- box-shadow: @verticallyDividedBorder;
- }
-
- & when (@variationGridPadded) {
- /* Padded Horizontally Divided */
- [class*="horizontally padded"].ui.divided.grid,
- .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
- width: 100%;
- }
- }
- /* First Row Vertically Divided */
- .ui[class*="vertically divided"].grid > .row:first-child:before {
- box-shadow: none;
- }
- & when (@variationGridInverted) {
- /* Inverted Divided */
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
- box-shadow: @dividedInvertedBorder;
- }
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: none;
- }
- .ui.inverted[class*="vertically divided"].grid > .row:before {
- box-shadow: @verticallyDividedInvertedBorder;
- }
- }
- & when (@variationGridRelaxed) {
- /* Relaxed */
- .ui.relaxed[class*="vertically divided"].grid > .row:before {
- margin-left: (@relaxedGutterWidth / 2);
- margin-right: (@relaxedGutterWidth / 2);
- width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
- }
- .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
- margin-left: (@veryRelaxedGutterWidth / 2);
- margin-right: (@veryRelaxedGutterWidth / 2);
- width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
- }
- }
-}
-
-& when (@variationGridCelled) {
- /*----------------------
- Celled
- -----------------------*/
-
- .ui.celled.grid {
- width: 100%;
- margin: @celledMargin;
- box-shadow: @celledGridDivider;
- }
-
- .ui.celled.grid > .row {
- width: 100% !important;
- margin: 0;
- padding: 0;
- box-shadow: @celledRowDivider;
- }
- .ui.celled.grid > .column:not(.row),
- .ui.celled.grid > .row > .column {
- box-shadow: @celledColumnDivider;
- }
-
- .ui.celled.grid > .column:first-child,
- .ui.celled.grid > .row > .column:first-child {
- box-shadow: none;
- }
-
- .ui.celled.grid > .column:not(.row),
- .ui.celled.grid > .row > .column {
- padding: @celledPadding;
- }
- & when (@variationGridRelaxed) {
- .ui.relaxed.celled.grid > .column:not(.row),
- .ui.relaxed.celled.grid > .row > .column {
- padding: @celledRelaxedPadding;
- }
- .ui[class*="very relaxed"].celled.grid > .column:not(.row),
- .ui[class*="very relaxed"].celled.grid > .row > .column {
- padding: @celledVeryRelaxedPadding;
- }
- }
- /* Internally Celled */
- .ui[class*="internally celled"].grid {
- box-shadow: none;
- margin: 0;
- }
- .ui[class*="internally celled"].grid > .row:first-child {
- box-shadow: none;
- }
- .ui[class*="internally celled"].grid > .row > .column:first-child {
- box-shadow: none;
- }
-}
-
-& when (@variationGridAligned) {
- /*----------------------
- Vertically Aligned
- -----------------------*/
-
- /* Top Aligned */
- .ui[class*="top aligned"].grid > .column:not(.row),
- .ui[class*="top aligned"].grid > .row > .column,
- .ui.grid > [class*="top aligned"].row > .column,
- .ui.grid > [class*="top aligned"].column:not(.row),
- .ui.grid > .row > [class*="top aligned"].column {
- flex-direction: column;
- vertical-align: top;
- align-self: flex-start !important;
- }
-
- /* Middle Aligned */
- .ui[class*="middle aligned"].grid > .column:not(.row),
- .ui[class*="middle aligned"].grid > .row > .column,
- .ui.grid > [class*="middle aligned"].row > .column,
- .ui.grid > [class*="middle aligned"].column:not(.row),
- .ui.grid > .row > [class*="middle aligned"].column {
- flex-direction: column;
- vertical-align: middle;
- align-self: center !important;
- }
-
- /* Bottom Aligned */
- .ui[class*="bottom aligned"].grid > .column:not(.row),
- .ui[class*="bottom aligned"].grid > .row > .column,
- .ui.grid > [class*="bottom aligned"].row > .column,
- .ui.grid > [class*="bottom aligned"].column:not(.row),
- .ui.grid > .row > [class*="bottom aligned"].column {
- flex-direction: column;
- vertical-align: bottom;
- align-self: flex-end !important;
- }
-}
-
-& when (@variationGridStretched) {
- /* Stretched */
- .ui.stretched.grid > .row > .column,
- .ui.stretched.grid > .column,
- .ui.grid > .stretched.row > .column,
- .ui.grid > .stretched.column:not(.row),
- .ui.grid > .row > .stretched.column {
- display: inline-flex !important;
- align-self: stretch;
- flex-direction: column;
- }
-
- .ui.stretched.grid > .row > .column > *,
- .ui.stretched.grid > .column > *,
- .ui.grid > .stretched.row > .column > *,
- .ui.grid > .stretched.column:not(.row) > *,
- .ui.grid > .row > .stretched.column > * {
- flex-grow: 1;
- }
-}
-
-& when (@variationGridAligned) {
- /*----------------------
- Horizontally Centered
- -----------------------*/
-
- /* Left Aligned */
-
- .ui[class*="left aligned"].grid > .column,
- .ui[class*="left aligned"].grid > .row > .column,
- .ui.grid > [class*="left aligned"].row > .column,
- .ui.grid > [class*="left aligned"].column.column,
- .ui.grid > .row > [class*="left aligned"].column.column {
- text-align: left;
- align-self: inherit;
- }
-
- /* Center Aligned */
-
- .ui[class*="center aligned"].grid > .column,
- .ui[class*="center aligned"].grid > .row > .column,
- .ui.grid > [class*="center aligned"].row > .column,
- .ui.grid > [class*="center aligned"].column.column,
- .ui.grid > .row > [class*="center aligned"].column.column {
- text-align: center;
- align-self: inherit;
- }
-
- .ui[class*="center aligned"].grid {
- justify-content: center;
- }
-
- /* Right Aligned */
-
- .ui[class*="right aligned"].grid > .column,
- .ui[class*="right aligned"].grid > .row > .column,
- .ui.grid > [class*="right aligned"].row > .column,
- .ui.grid > [class*="right aligned"].column.column,
- .ui.grid > .row > [class*="right aligned"].column.column {
- text-align: right;
- align-self: inherit;
- }
-}
-
-& when (@variationGridJustified) {
- /* Justified */
- .ui.justified.grid > .column,
- .ui.justified.grid > .row > .column,
- .ui.grid > .justified.row > .column,
- .ui.grid > .justified.column.column,
- .ui.grid > .row > .justified.column.column {
- text-align: justify;
- hyphens: auto;
- }
-}
-
-/*----------------------
- Colored
------------------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
-
- .ui.grid > .@{color}.row,
- .ui.grid > .@{color}.column,
- .ui.grid > .row > .@{color}.column {
- background-color: @c;
- color: @white;
- }
-})
-
-
-/*----------------------
- Equal Width
------------------------*/
-
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
- display: inline-block;
- flex-grow: 1;
-}
-.ui[class*="equal width"].grid > .wide.column,
-.ui[class*="equal width"].grid > .row > .wide.column,
-.ui.grid > [class*="equal width"].row > .wide.column {
- flex-grow: 0;
-}
-
-& when (@variationGridReversed) {
- /*----------------------
- Reverse
- -----------------------*/
-
-
- /* Mobile */
- @media only screen and (max-width: @largestMobileScreen) {
- .ui[class*="mobile reversed"].grid,
- .ui[class*="mobile reversed"].grid > .row,
- .ui.grid > [class*="mobile reversed"].row {
- flex-direction: row-reverse;
- }
- .ui[class*="mobile vertically reversed"].grid,
- .ui.stackable[class*="mobile reversed"] {
- flex-direction: column-reverse;
- }
- & when (@variationGridDivided) {
- /* Divided Reversed */
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: @dividedBorder;
- }
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
- box-shadow: none;
- }
- /* Vertically Divided Reversed */
- .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
- box-shadow: @verticallyDividedBorder;
- }
- .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
- box-shadow: none;
- }
- }
- & when (@variationGridCelled) {
- /* Celled Reversed */
- .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
- box-shadow: @celledColumnDivider;
- }
- .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
- box-shadow: none;
- }
- }
- }
-
- /* Tablet */
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui[class*="tablet reversed"].grid,
- .ui[class*="tablet reversed"].grid > .row,
- .ui.grid > [class*="tablet reversed"].row {
- flex-direction: row-reverse;
- }
- .ui[class*="tablet vertically reversed"].grid {
- flex-direction: column-reverse;
- }
- & when (@variationGridDivided) {
- /* Divided Reversed */
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: @dividedBorder;
- }
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
- box-shadow: none;
- }
- /* Vertically Divided Reversed */
- .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
- box-shadow: @verticallyDividedBorder;
- }
- .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
- box-shadow: none;
- }
- }
- & when (@variationGridCelled) {
- /* Celled Reversed */
- .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
- box-shadow: @celledColumnDivider;
- }
- .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
- box-shadow: none;
- }
- }
- }
-
- /* Computer */
- @media only screen and (min-width: @computerBreakpoint) {
- .ui[class*="computer reversed"].grid,
- .ui[class*="computer reversed"].grid > .row,
- .ui.grid > [class*="computer reversed"].row {
- flex-direction: row-reverse;
- }
- .ui[class*="computer vertically reversed"].grid {
- flex-direction: column-reverse;
- }
- & when (@variationGridDivided) {
- /* Divided Reversed */
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
- box-shadow: @dividedBorder;
- }
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
- box-shadow: none;
- }
- /* Vertically Divided Reversed */
- .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
- box-shadow: @verticallyDividedBorder;
- }
- .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
- box-shadow: none;
- }
- }
- & when (@variationGridCelled) {
- /* Celled Reversed */
- .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
- box-shadow: @celledColumnDivider;
- }
- .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
- box-shadow: none;
- }
- }
- }
-}
-
-& when (@variationGridDoubling) {
- /*-------------------
- Doubling
- --------------------*/
-
- /* Tablet Only */
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.doubling.grid {
- width: auto;
- }
- .ui.grid > .doubling.row,
- .ui.doubling.grid > .row {
- margin: 0 !important;
- padding: 0 !important;
- }
- .ui.grid > .doubling.row > .column,
- .ui.doubling.grid > .row > .column {
- display: inline-block !important;
- padding-top: (@rowSpacing / 2) !important;
- padding-bottom: (@rowSpacing / 2) !important;
- box-shadow: none !important;
- margin: 0;
- }
- .ui[class*="two column"].doubling.grid > .row > .column,
- .ui[class*="two column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="two column"].doubling.row.row > .column {
- width: @oneColumn !important;
- }
- .ui[class*="three column"].doubling.grid > .row > .column,
- .ui[class*="three column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="three column"].doubling.row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="four column"].doubling.grid > .row > .column,
- .ui[class*="four column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="four column"].doubling.row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="five column"].doubling.grid > .row > .column,
- .ui[class*="five column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="five column"].doubling.row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="six column"].doubling.grid > .row > .column,
- .ui[class*="six column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="six column"].doubling.row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="seven column"].doubling.grid > .row > .column,
- .ui[class*="seven column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="seven column"].doubling.row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="eight column"].doubling.grid > .row > .column,
- .ui[class*="eight column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="eight column"].doubling.row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="nine column"].doubling.grid > .row > .column,
- .ui[class*="nine column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="nine column"].doubling.row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="ten column"].doubling.grid > .row > .column,
- .ui[class*="ten column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="ten column"].doubling.row.row > .column {
- width: @fiveColumn !important;
- }
- .ui[class*="eleven column"].doubling.grid > .row > .column,
- .ui[class*="eleven column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="eleven column"].doubling.row.row > .column {
- width: @fiveColumn !important;
- }
- .ui[class*="twelve column"].doubling.grid > .row > .column,
- .ui[class*="twelve column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="twelve column"].doubling.row.row > .column {
- width: @sixColumn !important;
- }
- .ui[class*="thirteen column"].doubling.grid > .row > .column,
- .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
- width: @sixColumn !important;
- }
- .ui[class*="fourteen column"].doubling.grid > .row > .column,
- .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
- width: @sevenColumn !important;
- }
- .ui[class*="fifteen column"].doubling.grid > .row > .column,
- .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
- width: @sevenColumn !important;
- }
- .ui[class*="sixteen column"].doubling.grid > .row > .column,
- .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
- .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
- width: @eightColumn !important;
- }
- }
-
- /* Mobile Only */
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.grid > .doubling.row,
- .ui.doubling.grid > .row {
- margin: 0 !important;
- padding: 0 !important;
- }
- .ui.grid > .doubling.row > .column,
- .ui.doubling.grid > .row > .column {
- padding-top: (@rowSpacing / 2) !important;
- padding-bottom: (@rowSpacing / 2) !important;
- margin: 0 !important;
- box-shadow: none !important;
- }
- .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
- width: @oneColumn !important;
- }
- .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
- width: @twoColumn !important;
- }
- .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
- width: @threeColumn !important;
- }
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
- width: @fourColumn !important;
- }
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
- .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
- width: @fourColumn !important;
- }
- }
-}
-
-& when (@variationGridStackable) {
- /*-------------------
- Stackable
- --------------------*/
-
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.stackable.grid {
- width: auto;
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
- .ui.stackable.grid > .row > .wide.column,
- .ui.stackable.grid > .wide.column,
- .ui.stackable.grid > .column.grid > .column,
- .ui.stackable.grid > .column.row > .column,
- .ui.stackable.grid > .row > .column,
- .ui.stackable.grid > .column:not(.row),
- .ui.grid > .stackable.stackable.stackable.row > .column {
- width: 100% !important;
- margin: 0 0 !important;
- box-shadow: none !important;
- padding: (@stackableRowSpacing / 2) (@stackableGutter / 2);
- }
- .ui.stackable.grid:not(.vertically) > .row {
- margin: 0;
- padding: 0;
- }
-
- /* Coupling */
- .ui.container > .ui.stackable.grid > .column,
- .ui.container > .ui.stackable.grid > .row > .column {
- padding-left: 0 !important;
- padding-right: 0 !important;
- }
-
- /* Don't pad inside segment or nested grid */
- .ui.grid .ui.stackable.grid,
- .ui.segment:not(.vertical) .ui.stackable.page.grid {
- margin-left: -(@stackableGutter / 2) !important;
- margin-right: -(@stackableGutter / 2) !important;
- }
-
- /* Divided Stackable */
- .ui.stackable.divided.grid > .row:first-child > .column:first-child,
- .ui.stackable.celled.grid > .row:first-child > .column:first-child,
- .ui.stackable.divided.grid > .column:not(.row):first-child,
- .ui.stackable.celled.grid > .column:not(.row):first-child {
- border-top: none !important;
- }
- & when (@variationGridInverted) {
- .ui.inverted.stackable.celled.grid > .column:not(.row),
- .ui.inverted.stackable.divided.grid > .column:not(.row),
- .ui.inverted.stackable.celled.grid > .row > .column,
- .ui.inverted.stackable.divided.grid > .row > .column {
- border-top: @stackableInvertedMobileBorder;
- }
- }
- .ui.stackable.celled.grid > .column:not(.row),
- .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
- .ui.stackable.celled.grid > .row > .column,
- .ui.stackable.divided:not(.vertically).grid > .row > .column {
- border-top: @stackableMobileBorder;
- box-shadow: none !important;
- padding-top: @stackableRowSpacing !important;
- padding-bottom: @stackableRowSpacing !important;
- }
- & when (@variationGridCelled) {
- .ui.stackable.celled.grid > .row {
- box-shadow: none !important;
- }
- }
- & when (@variationGridDivided) {
- .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
- .ui.stackable.divided:not(.vertically).grid > .row > .column {
- padding-left: 0 !important;
- padding-right: 0 !important;
- }
- }
- }
-
-}
-
-/*----------------------
- Only (Device)
------------------------*/
-
-
-/* These include arbitrary class repetitions for forced specificity */
-
-/* Mobile Only Hide */
-@media only screen and (max-width: @largestMobileScreen) {
- .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
- display: none !important;
- }
- .ui[class*="computer only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
- display: none !important;
- }
- .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
- display: none !important;
- }
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
- display: none !important;
- }
-}
-/* Tablet Only Hide */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
- display: none !important;
- }
- .ui[class*="computer only"].grid.grid.grid:not(.tablet),
- .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
- .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
- .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
- display: none !important;
- }
- .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
- display: none !important;
- }
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
- display: none !important;
- }
-}
-
-/* Computer Only Hide */
-@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
- .ui[class*="mobile only"].grid.grid.grid:not(.computer),
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
- display: none !important;
- }
- .ui[class*="tablet only"].grid.grid.grid:not(.computer),
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
- display: none !important;
- }
- .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
- display: none !important;
- }
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
- display: none !important;
- }
-}
-
-/* Large Screen Only Hide */
-@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
- .ui[class*="mobile only"].grid.grid.grid:not(.computer),
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
- display: none !important;
- }
- .ui[class*="tablet only"].grid.grid.grid:not(.computer),
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
- display: none !important;
- }
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
- display: none !important;
- }
-}
-
-/* Widescreen Only Hide */
-@media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui[class*="mobile only"].grid.grid.grid:not(.computer),
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
- display: none !important;
- }
- .ui[class*="tablet only"].grid.grid.grid:not(.computer),
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
- display: none !important;
- }
-}
-
-& when (@variationGridCompact) {
- /*-----------------
- Compact
- -----------------*/
-
- .ui.ui.ui.compact.grid > .column:not(.row),
- .ui.ui.ui.compact.grid > .row > .column {
- padding-left: (@compactGutterWidth / 2);
- padding-right: (@compactGutterWidth / 2);
- }
-
- .ui.ui.ui.compact.grid > * {
- padding-left: (@compactGutterWidth / 2);
- padding-right: (@compactGutterWidth / 2);
- }
-
- /* Row */
- .ui.ui.ui.compact.grid > .row {
- padding-top: (@compactRowSpacing / 2);
- padding-bottom: (@compactRowSpacing / 2);
- }
-
- /* Columns */
- .ui.ui.ui.compact.grid > .column:not(.row) {
- padding-top: (@compactRowSpacing / 2);
- padding-bottom: (@compactRowSpacing / 2);
- }
- & when (@variationGridRelaxed) and (@variationGridCelled) {
- /* Relaxed + Celled */
- .ui.compact.relaxed.celled.grid > .column:not(.row),
- .ui.compact.relaxed.celled.grid > .row > .column {
- padding: @compactCelledRelaxedPadding;
- }
- .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
- .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
- padding: @compactCelledVeryRelaxedPadding;
- }
- }
-
- /*-----------------
- Very compact
- -----------------*/
-
- .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
- .ui.ui.ui[class*="very compact"].grid > .row > .column {
- padding-left: (@veryCompactGutterWidth / 2);
- padding-right: (@veryCompactGutterWidth / 2);
- }
-
- .ui.ui.ui[class*="very compact"].grid > * {
- padding-left: (@veryCompactGutterWidth / 2);
- padding-right: (@veryCompactGutterWidth / 2);
- }
-
- /* Row */
- .ui.ui.ui[class*="very compact"].grid > .row {
- padding-top: (@veryCompactRowSpacing / 2);
- padding-bottom: (@veryCompactRowSpacing / 2);
- padding-left: (@veryCompactGutterWidth * 1.5);
- padding-right: (@veryCompactGutterWidth * 1.5);
- }
-
- /* Columns */
- .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
- padding-top: (@veryCompactRowSpacing / 2);
- padding-bottom: (@veryCompactRowSpacing / 2);
- }
- & when (@variationGridRelaxed) and (@variationGridCelled) {
- /* Relaxed + Celled */
- .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
- .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
- padding: @veryCompactCelledRelaxedPadding;
- }
- .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
- .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
- padding: @veryCompactCelledVeryRelaxedPadding;
- }
- }
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/menu.less b/semantic/src/definitions/collections/menu.less
deleted file mode 100644
index 3d712ed..0000000
--- a/semantic/src/definitions/collections/menu.less
+++ /dev/null
@@ -1,1939 +0,0 @@
-/*
- * # Fomantic - Menu
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Copyright 2015 Contributor
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'collection';
-@element : 'menu';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Standard
-*******************************/
-
-/*--------------
- Menu
----------------*/
-
-.ui.menu {
- display: flex;
- margin: @margin;
- font-family: @fontFamily;
- background: @background;
- font-weight: @fontWeight;
- border: @border;
- box-shadow: @boxShadow;
- border-radius: @borderRadius;
- min-height: @minHeight;
-}
-
-.ui.menu:after {
- content: '';
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
-}
-
-.ui.menu:first-child {
- margin-top: 0;
-}
-.ui.menu:last-child {
- margin-bottom: 0;
-}
-
-
-/*--------------
- Sub-Menu
----------------*/
-
-.ui.menu .menu {
- margin: 0;
-}
-
-.ui.menu:not(.vertical) > .menu {
- display: flex;
-}
-
-/*--------------
- Item
----------------*/
-
-.ui.menu:not(.vertical) .item {
- display: flex;
- align-items: center;
-}
-
-.ui.menu .item {
- position: relative;
- vertical-align: middle;
- line-height: 1;
- text-decoration: none;
- -webkit-tap-highlight-color: transparent;
- flex: 0 0 auto;
- user-select: none;
-
- background: @itemBackground;
- padding: @itemVerticalPadding @itemHorizontalPadding;
- text-transform: @itemTextTransform;
- color: @itemTextColor;
- font-weight: @itemFontWeight;
- transition: @itemTransition;
-}
-
-.ui.menu > .item:first-child {
- border-radius: @borderRadius 0 0 @borderRadius;
-}
-
-/* Border */
-.ui.menu .item:before {
- position: absolute;
- content: '';
- top: 0;
- right: 0;
- height: 100%;
-
- width: @dividerSize;
- background: @dividerBackground;
-}
-
-/*--------------
- Text Content
----------------*/
-
-.ui.menu .text.item > *,
-.ui.menu .item > a:not(.ui),
-.ui.menu .item > p:only-child {
- user-select: text;
- line-height: @textLineHeight;
-}
-.ui.menu .item > p:first-child {
- margin-top: 0;
-}
-.ui.menu .item > p:last-child {
- margin-bottom: 0;
-}
-
-/*--------------
- Icons
----------------*/
-
-.ui.menu .item > i.icon {
- opacity: @iconOpacity;
- float: @iconFloat;
- margin: @iconMargin;
-}
-
-/*--------------
- Button
----------------*/
-
-.ui.menu:not(.vertical) .item > .button {
- position: relative;
- top: @buttonOffset;
- margin: @buttonMargin;
- padding-bottom: @buttonVerticalPadding;
- padding-top: @buttonVerticalPadding;
- font-size: @buttonSize;
-}
-
-/*----------------
- Grid / Container
------------------*/
-
-.ui.menu > .grid,
-.ui.menu > .container {
- display: flex;
- align-items: inherit;
- flex-direction: inherit;
-}
-
-/*--------------
- Inputs
----------------*/
-
-.ui.menu .item > .input {
- width: 100%;
-}
-.ui.menu:not(.vertical) .item > .input {
- position: relative;
- top: @inputOffset;
- margin: @inputVerticalMargin 0;
-}
-.ui.menu .item > .input input {
- font-size: @inputSize;
- padding-top: @inputVerticalPadding;
- padding-bottom: @inputVerticalPadding;
-}
-
-
-/*--------------
- Header
----------------*/
-
-.ui.menu .header.item,
-.ui.vertical.menu .header.item {
- margin: 0;
- background: @headerBackground;
- text-transform: @headerTextTransform;
- font-weight: @headerWeight;
-}
-
-& when (@variationMenuVertical) {
- .ui.vertical.menu .item > .header:not(.ui) {
- margin: @verticalHeaderMargin;
- font-size: @verticalHeaderFontSize;
- font-weight: @verticalHeaderFontWeight;
- }
-}
-
-/*--------------
- Dropdowns
----------------*/
-
-
-/* Dropdown Icon */
-.ui.menu .item > i.dropdown.icon {
- padding: 0;
- float: @dropdownIconFloat;
- margin: 0 0 0 @dropdownIconDistance;
-}
-
-/* Menu */
-.ui.menu .dropdown.item .menu {
- min-width: e("calc(100% - 1px)");
- border-radius: 0 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
- background: @dropdownBackground;
- margin: @dropdownMenuDistance 0 0;
- box-shadow: @dropdownMenuBoxShadow;
- flex-direction: column !important;
-}
-
-
-/* Menu Items */
-.ui.menu .ui.dropdown .menu > .item {
- margin: 0;
- text-align: left;
- font-size: @dropdownItemFontSize !important;
- padding: @dropdownItemPadding !important;
- background: @dropdownItemBackground !important;
- color: @dropdownItemColor !important;
- text-transform: @dropdownItemTextTransform !important;
- font-weight: @dropdownItemFontWeight !important;
- box-shadow: @dropdownItemBoxShadow !important;
- transition: @dropdownItemTransition !important;
-}
-.ui.menu .ui.dropdown .menu > .item:hover {
- background: @dropdownHoveredItemBackground !important;
- color: @dropdownHoveredItemColor !important;
-}
-.ui.menu .ui.dropdown .menu > .selected.item {
- background: @dropdownSelectedItemBackground !important;
- color: @dropdownSelectedItemColor !important;
-}
-.ui.menu .ui.dropdown .menu > .active.item {
- background: @dropdownActiveItemBackground !important;
- font-weight: @dropdownActiveItemFontWeight !important;
- color: @dropdownActiveItemColor !important;
-}
-
-.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
- display: block;
-}
-.ui.menu .ui.dropdown .menu > .item > .icons,
-.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
- display: inline-block;
- font-size: @dropdownItemIconFontSize !important;
- float: @dropdownItemIconFloat;
- margin: @dropdownItemIconMargin !important;
-}
-
-& when (@variationMenuSecondary) or (@variationMenuText) {
- /* Secondary */
- .ui.secondary.menu .dropdown.item > .menu,
- .ui.text.menu .dropdown.item > .menu {
- border-radius: @dropdownMenuBorderRadius;
- margin-top: @secondaryDropdownMenuDistance;
- }
-}
-
-/* Pointing */
-.ui.menu .pointing.dropdown.item .menu {
- margin-top: @pointingDropdownMenuDistance;
-}
-
-& when (@variationMenuInverted) {
- /* Inverted */
- .ui.inverted.menu .search.dropdown.item > .search,
- .ui.inverted.menu .search.dropdown.item > .text {
- color: @invertedSelectionDropdownColor;
- }
-}
-
-& when (@variationMenuVertical) {
- /* Vertical */
- .ui.vertical.menu .dropdown.item > i.icon {
- float: right;
- content: "\f0da";
- margin-left: 1em;
- }
- .ui.vertical.menu .dropdown.item .menu {
- left: 100%;
- /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
- min-width: 0;
- min-width: max-content;
- margin: 0 0 0 @dropdownMenuDistance;
- box-shadow: @dropdownVerticalMenuBoxShadow;
- border-radius: 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
- }
- .ui.vertical.menu .dropdown.item.upward .menu {
- bottom: 0;
- }
- .ui.vertical.menu .dropdown.item:not(.upward) .menu {
- top: 0;
- }
- .ui.vertical.menu .active.dropdown.item {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- .ui.vertical.menu .dropdown.active.item {
- box-shadow: none;
- }
-}
-
-/* Evenly Divided */
-.ui.item.menu .dropdown .menu .item {
- width: 100%;
-}
-
-/*--------------
- Labels
----------------*/
-
-.ui.menu .item > .label:not(.floating) {
- margin-left: @labelTextMargin;
- padding: @labelVerticalPadding @labelHorizontalPadding;
-}
-& when (@variationMenuVertical) {
- .ui.vertical.menu .item > .label {
- margin-top: @labelOffset;
- margin-bottom: @labelOffset;
- padding: @labelVerticalPadding @labelHorizontalPadding;
- }
-}
-.ui.menu .item > .floating.label {
- padding: @labelVerticalPadding @labelHorizontalPadding;
-}
-.ui.menu .item > .label {
- background: @labelBackground;
- color: @labelTextColor;
-}
-.ui.menu .item > .image.label img {
- margin: @imageLabelImageMargin;
- height: @imageLabelHeight;
-}
-/*--------------
- Images
----------------*/
-
-.ui.menu .item > img:not(.ui) {
- display: inline-block;
- vertical-align: middle;
- margin: @imageMargin;
- width: @imageWidth;
-}
-& when (@variationMenuVertical) {
- .ui.vertical.menu .item > img:not(.ui):only-child {
- display: block;
- max-width: 100%;
- width: @verticalImageWidth;
- }
-}
-
-/*******************************
- Coupling
-*******************************/
-
-/*--------------
- List
----------------*/
-
-/* Menu divider shouldnt apply */
-.ui.menu .list .item:before {
- background: none !important;
-}
-
-& when (@variationMenuVertical) {
- /*--------------
- Sidebar
- ---------------*/
-
- /* Show vertical dividers below last */
-
- .ui.vertical.sidebar.menu > .item:first-child:before {
- display: block !important;
- }
- .ui.vertical.sidebar.menu > .item::before {
- top: auto;
- bottom: 0;
- }
-}
-
-/*--------------
- Container
----------------*/
-
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.menu > .ui.container {
- width: 100% !important;
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
-}
-@media only screen and (min-width: @tabletBreakpoint) {
- .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
- border-left: @dividerSize solid @dividerBackground;
- }
- .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
- .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
- border-right: @dividerSize solid @dividerBackground;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-/*--------------
- Hover
----------------*/
-
-
-.ui.link.menu .item:hover,
-.ui.menu .dropdown.item:hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover {
- cursor: pointer;
- background: @hoverItemBackground;
- color: @hoverItemTextColor;
-}
-
-
-/*--------------
- Pressed
----------------*/
-
-.ui.link.menu .item:active,
-.ui.menu .link.item:active,
-.ui.menu a.item:active {
- background: @pressedItemBackground;
- color: @pressedItemTextColor;
-}
-
-
-/*--------------
- Active
----------------*/
-
-.ui.menu .active.item {
- background: @activeItemBackground;
- color: @activeItemTextColor;
- font-weight: @activeItemFontWeight;
- box-shadow: @activeItemBoxShadow;
-}
-.ui.menu .active.item > i.icon {
- opacity: @activeIconOpacity;
-}
-
-/*--------------
- Active Hover
----------------*/
-
-.ui.menu .active.item:hover,
-.ui.vertical.menu .active.item:hover {
- background-color: @activeHoverItemBackground;
- color: @activeHoverItemColor;
-}
-
-
-/*--------------
- Disabled
----------------*/
-
-.ui.ui.menu .item.disabled {
- cursor: default;
- background-color: transparent;
- color: @disabledTextColor;
- pointer-events: none;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-/*------------------
-Floated Menu / Item
--------------------*/
-
-/* Left Floated */
-.ui.menu:not(.vertical) .left.item,
-.ui.menu:not(.vertical) .left.menu {
- display: flex;
- margin-right: auto !important;
-}
-/* Right Floated */
-.ui.menu:not(.vertical) .right.item,
-.ui.menu:not(.vertical) .right.menu {
- display: flex;
- margin-left: auto !important;
-}
-
-.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
-.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
- display: inherit;
-}
-
-/* Center */
-.ui.menu:not(.vertical) .center.item,
-.ui.menu:not(.vertical) .center.menu {
- display: flex;
- margin-left: auto !important;
- margin-right: auto !important;
-}
-
-/* Swapped Borders */
-.ui.menu .right.item::before,
-.ui.menu .right.menu > .item::before {
- right: auto;
- left: 0;
-}
-
-/* Remove Outer Borders */
-.ui.menu .center.item:last-child::before,
-.ui.menu .center.menu > .item:last-child::before {
- display: none;
-}
-
-& when (@variationMenuVertical) {
- /*--------------
- Vertical
- ---------------*/
-
- .ui.vertical.menu {
- display: block;
- flex-direction: column;
- background: @verticalBackground;
- box-shadow: @verticalBoxShadow;
- }
-
- /*--- Item ---*/
- .ui.vertical.menu .item {
- display: block;
- background: @verticalItemBackground;
- border-top: none;
- border-right: none;
- }
- .ui.vertical.menu > .item:first-child {
- border-radius: @borderRadius @borderRadius 0 0;
- }
- .ui.vertical.menu > .item:last-child {
- border-radius: 0 0 @borderRadius @borderRadius;
- }
-
- /*--- Label ---*/
- .ui.vertical.menu .item > .label {
- float: right;
- text-align: center;
- }
-
- /*--- Icon ---*/
- .ui.vertical.menu .item > i.icon,
- .ui.vertical.menu .item > i.icons {
- width: @iconWidth;
- float: @verticalIconFloat;
- margin: @verticalIconMargin;
- }
- .ui.vertical.menu .item > .label + i.icon {
- float: @labelAndIconFloat;
- margin: @labelAndIconMargin;
- }
-
-
- /*--- Border ---*/
- .ui.vertical.menu .item:before {
- position: absolute;
- content: '';
- top: 0;
- left: 0;
- width: 100%;
- height: @dividerSize;
- background: @verticalDividerBackground;
- }
-
- .ui.vertical.menu .item:first-child:before {
- display: none !important;
- }
-
-
- /*--- Sub Menu ---*/
- .ui.vertical.menu .item > .menu {
- margin: @subMenuMargin;
- }
- .ui.vertical.menu .menu .item {
- background: none;
- padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
- font-size: @subMenuFontSize;
- color: @subMenuTextColor;
- }
- .ui.vertical.menu .item .menu a.item:hover,
- .ui.vertical.menu .item .menu .link.item:hover {
- color: @darkTextColor;
- }
- .ui.vertical.menu .menu .item:before {
- display: none;
- }
-
- /* Vertical Active */
- .ui.vertical.menu .active.item {
- background: @activeItemBackground;
- border-radius: 0;
- box-shadow: @verticalActiveBoxShadow;
- }
- .ui.vertical.menu > .active.item:first-child {
- border-radius: @borderRadius @borderRadius 0 0;
- }
- .ui.vertical.menu > .active.item:last-child {
- border-radius: 0 0 @borderRadius @borderRadius;
- }
- .ui.vertical.menu > .active.item:only-child {
- border-radius: @borderRadius;
- }
- .ui.vertical.menu .active.item .menu .active.item {
- border-left: none;
- }
- .ui.vertical.menu .item .menu .active.item {
- background-color: @subMenuActiveBackground;
- font-weight: @subMenuActiveFontWeight;
- color: @subMenuActiveTextColor;
- }
-}
-
-& when (@variationMenuTabular) {
- /*--------------
- Tabular
- ---------------*/
-
- .ui.tabular.menu {
- border-radius: 0;
- box-shadow: none !important;
- border: none;
- background: @tabularBackground;
- border-bottom: @tabularBorderWidth solid @tabularBorderColor;
- }
- .ui.tabular.fluid.menu {
- width: @tabularFluidWidth !important;
- }
- .ui.tabular.menu .item {
- background: transparent;
- border-bottom: none;
-
- border-left: @tabularBorderWidth solid transparent;
- border-right: @tabularBorderWidth solid transparent;
- border-top: @tabularOppositeBorderWidth solid transparent;
- padding: @tabularVerticalPadding @tabularHorizontalPadding;
- color: @tabularTextColor;
- }
- .ui.tabular.menu .item:before {
- display: none;
- }
-
- /* Hover */
- .ui.tabular.menu .item:hover {
- background-color: transparent;
- color: @tabularHoveredTextColor;
- }
-
- /* Active */
- .ui.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-top-width: @tabularBorderWidth;
- border-color: @tabularBorderColor;
- font-weight: @tabularActiveWeight;
- margin-bottom: -@tabularBorderWidth;
- box-shadow: @tabularActiveBoxShadow;
- border-radius: @tabularBorderRadius @tabularBorderRadius 0 0 !important;
- }
-
- /* Coupling with segment for attachment */
- .ui.tabular.menu + .attached:not(.top).segment,
- .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
- border-top: none;
- margin-left: 0;
- margin-top: 0;
- margin-right: 0;
- width: 100%;
- }
- .top.attached.segment + .ui.bottom.tabular.menu {
- position: relative;
- width: @tabularFluidWidth;
- left: -@tabularFluidOffset;
- }
-
- /* Bottom Vertical Tabular */
- .ui.bottom.tabular.menu {
- background: @tabularBackground;
- border-radius: 0;
- box-shadow: none !important;
- border-bottom: none;
- border-top: @tabularBorderWidth solid @tabularBorderColor;
- }
- .ui.bottom.tabular.menu .item {
- background: none;
- border-left: @tabularBorderWidth solid transparent;
- border-right: @tabularBorderWidth solid transparent;
- border-bottom: @tabularBorderWidth solid transparent;
- border-top: none;
- }
- .ui.bottom.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-color: @tabularBorderColor;
- margin: -@tabularBorderWidth 0 0 0;
- border-radius: 0 0 @tabularBorderRadius @tabularBorderRadius !important;
- }
- & when (@variationMenuVertical) {
- /* Vertical Tabular (Left) */
- .ui.vertical.tabular.menu {
- background: @tabularVerticalBackground;
- border-radius: 0;
- box-shadow: none !important;
- border-bottom: none;
- border-right: @tabularBorderWidth solid @tabularBorderColor;
- }
- .ui.vertical.tabular.menu .item {
- background: none;
- border-left: @tabularBorderWidth solid transparent;
- border-bottom: @tabularBorderWidth solid transparent;
- border-top: @tabularBorderWidth solid transparent;
- border-right: none;
- }
- .ui.vertical.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-color: @tabularBorderColor;
- margin: 0 -@tabularBorderWidth 0 0;
- border-radius: @tabularBorderRadius 0 0 @tabularBorderRadius !important;
- }
-
- /* Vertical Right Tabular */
- .ui.vertical.right.tabular.menu {
- background: @tabularVerticalBackground;
- border-radius: 0;
- box-shadow: none !important;
- border-bottom: none;
- border-right: none;
- border-left: @tabularBorderWidth solid @tabularBorderColor;
- }
- .ui.vertical.right.tabular.menu .item {
- background: none;
- border-right: @tabularBorderWidth solid transparent;
- border-bottom: @tabularBorderWidth solid transparent;
- border-top: @tabularBorderWidth solid transparent;
- border-left: none;
- }
- .ui.vertical.right.tabular.menu .active.item {
- background: @tabularActiveBackground;
- color: @tabularActiveColor;
- border-color: @tabularBorderColor;
- margin: 0 0 0 -@tabularBorderWidth;
- border-radius: 0 @tabularBorderRadius @tabularBorderRadius 0 !important;
- }
- }
- /* Dropdown */
- .ui.tabular.menu .active.dropdown.item {
- margin-bottom: 0;
- border-left: @tabularBorderWidth solid transparent;
- border-right: @tabularBorderWidth solid transparent;
- border-top: @tabularOppositeBorderWidth solid transparent;
- border-bottom: none;
- }
-}
-
-
-& when (@variationMenuPagination) {
- /*--------------
- Pagination
- ---------------*/
-
- .ui.pagination.menu {
- margin: 0;
- display: inline-flex;
- vertical-align: middle;
- }
- .ui.pagination.menu .item:last-child {
- border-radius: 0 @borderRadius @borderRadius 0;
- }
- .ui.compact.menu .item:last-child {
- border-radius: 0 @borderRadius @borderRadius 0;
- }
- .ui.pagination.menu .item:last-child:before {
- display: none;
- }
-
- .ui.pagination.menu .item {
- min-width: @paginationMinWidth;
- text-align: center;
- }
- .ui.pagination.menu .icon.item i.icon {
- vertical-align: top;
- }
-
- /* Active */
- .ui.pagination.menu .active.item {
- border-top: none;
- padding-top: @itemVerticalPadding;
- background-color: @paginationActiveBackground;
- color: @paginationActiveTextColor;
- box-shadow: none;
- }
-}
-
-& when (@variationMenuSecondary) {
- /*--------------
- Secondary
- ---------------*/
-
- .ui.secondary.menu {
- background: @secondaryBackground;
- margin-left: -@secondaryItemSpacing;
- margin-right: -@secondaryItemSpacing;
- border-radius: 0;
- border: none;
- box-shadow: none;
- }
-
- /* Item */
- .ui.secondary.menu .item {
- align-self: center;
- box-shadow: none;
- border: none;
- padding: @secondaryItemPadding;
- margin: @secondaryItemMargin;
- background: @secondaryItemBackground;
- transition: @secondaryItemTransition;
- border-radius: @secondaryItemBorderRadius;
- }
-
- /* No Divider */
- .ui.secondary.menu .item:before {
- display: none !important;
- }
-
- /* Header */
- .ui.secondary.menu .header.item {
- border-radius: 0;
- border-right: @secondaryHeaderBorder;
- background: @secondaryHeaderBackground;
- }
-
- /* Image */
- .ui.secondary.menu .item > img:not(.ui) {
- margin: 0;
- }
-
- /* Hover */
- .ui.secondary.menu .dropdown.item:hover,
- .ui.secondary.menu .link.item:hover,
- .ui.secondary.menu a.item:hover {
- background: @secondaryHoverItemBackground;
- color: @secondaryHoverItemColor;
- }
-
- /* Active */
- .ui.secondary.menu .active.item {
- box-shadow: none;
- background: @secondaryActiveItemBackground;
- color: @secondaryActiveItemColor;
- border-radius: @secondaryItemBorderRadius;
- }
-
- /* Active Hover */
- .ui.secondary.menu .active.item:hover {
- box-shadow: none;
- background: @secondaryActiveHoverItemBackground;
- color: @secondaryActiveHoverItemColor;
- }
-
- & when (@variationMenuInverted) {
- /* Inverted */
- .ui.secondary.inverted.menu .link.item:not(.disabled),
- .ui.secondary.inverted.menu a.item:not(.disabled) {
- color: @secondaryInvertedColor;
- }
- .ui.secondary.inverted.menu .dropdown.item:hover,
- .ui.secondary.inverted.menu .link.item:hover,
- .ui.secondary.inverted.menu a.item:hover {
- background: @secondaryInvertedHoverBackground;
- color: @secondaryInvertedHoverColor;
- }
- .ui.secondary.inverted.menu .active.item {
- background: @secondaryInvertedActiveBackground;
- color: @secondaryInvertedActiveColor;
- }
- }
- /* Fix item margins */
- .ui.secondary.item.menu {
- margin-left: 0;
- margin-right: 0;
- }
- .ui.secondary.item.menu .item:last-child {
- margin-right: 0;
- }
- & when (@variationMenuAttached) {
- .ui.secondary.attached.menu {
- box-shadow: none;
- }
- }
- & when (@variationMenuVertical) {
- /*---------------------
- Secondary Vertical
- -----------------------*/
-
- /* Sub Menu */
- .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
- margin: @secondaryMenuSubMenuMargin;
- }
- .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
- margin: @secondaryMenuSubMenuItemMargin;
- padding: @secondaryMenuSubMenuItemPadding;
- }
-
-
- .ui.secondary.vertical.menu > .item {
- border: none;
- margin: @secondaryVerticalItemMargin;
- border-radius: @secondaryVerticalItemBorderRadius !important;
- }
- .ui.secondary.vertical.menu > .header.item {
- border-radius: 0;
- }
-
- /* Sub Menu */
- .ui.vertical.secondary.menu .item > .menu .item {
- background-color: transparent;
- }
-
- /* Inverted */
- .ui.secondary.inverted.menu {
- background-color: transparent;
- }
- }
-
- & when (@variationMenuPointing) {
- /*---------------------
- Secondary Pointing
- -----------------------*/
-
- .ui.secondary.pointing.menu {
- margin-left: 0;
- margin-right: 0;
- border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
- }
-
- .ui.secondary.pointing.menu .item {
- border-bottom-color: transparent;
- border-bottom-style: solid;
- border-radius: 0;
- align-self: flex-end;
-
- margin: 0 0 -@secondaryPointingBorderWidth;
- padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
- border-bottom-width: @secondaryPointingBorderWidth;
- transition: @secondaryItemTransition;
- }
- .ui.secondary.pointing.menu .ui.dropdown .menu .item {
- border-bottom-width: 0;
- }
-
- .ui.secondary.pointing.menu .item > .label:not(.floating) {
- margin-top: -@labelVerticalPadding;
- margin-bottom: -@labelVerticalPadding;
- }
- .ui.secondary.pointing.menu .item > .circular.label {
- margin-top: -@circularLabelVerticalPadding;
- margin-bottom: -@circularLabelVerticalPadding;
- }
-
- /* Item Types */
- .ui.secondary.pointing.menu .header.item {
- color: @secondaryPointingHeaderColor !important;
- }
- .ui.secondary.pointing.menu .text.item {
- box-shadow: none !important;
- }
- .ui.secondary.pointing.menu .item:after {
- display: none;
- }
-
- /* Hover */
- .ui.secondary.pointing.menu .dropdown.item:hover,
- .ui.secondary.pointing.menu .link.item:hover,
- .ui.secondary.pointing.menu a.item:hover {
- background-color: transparent;
- color: @secondaryPointingHoverTextColor;
- }
-
- /* Pressed */
- .ui.secondary.pointing.menu .dropdown.item:active,
- .ui.secondary.pointing.menu .link.item:active,
- .ui.secondary.pointing.menu a.item:active {
- background-color: transparent;
- border-color: @secondaryPointingBorderColor;
- }
-
- /* Active */
- .ui.secondary.pointing.menu .active.item {
- background-color: transparent;
- box-shadow: none;
- border-color: @secondaryPointingActiveBorderColor;
- font-weight: @secondaryPointingActiveFontWeight;
- color: @secondaryPointingActiveTextColor;
- }
-
- /* Active Hover */
- .ui.secondary.pointing.menu .active.item:hover {
- border-color: @secondaryPointingActiveHoverBorderColor;
- color: @secondaryPointingActiveHoverTextColor;
- }
-
- /* Active Dropdown */
- .ui.secondary.pointing.menu .active.dropdown.item {
- border-color: @secondaryPointingActiveDropdownBorderColor;
- }
- & when (@variationMenuVertical) {
- /* Vertical Pointing */
- .ui.secondary.vertical.pointing.menu {
- border-bottom-width: 0;
- border-right-width: @secondaryPointingBorderWidth;
- border-right-style: solid;
- border-right-color: @secondaryPointingBorderColor;
- }
- .ui.secondary.vertical.pointing.menu .item {
- border-bottom: none;
- border-right-style: solid;
- border-right-color: transparent;
- border-radius: 0 !important;
- margin: @secondaryVerticalPointingItemMargin;
- border-right-width: @secondaryPointingBorderWidth;
- }
-
- /* Vertical Active */
- .ui.secondary.vertical.pointing.menu .active.item {
- border-color: @secondaryPointingActiveBorderColor;
- }
- }
- & when (@variationMenuInverted) {
- /* Inverted */
- .ui.secondary.inverted.pointing.menu {
- border-color: @secondaryPointingInvertedBorderColor;
- }
-
- .ui.secondary.inverted.pointing.menu .item:not(.disabled) {
- color: @secondaryPointingInvertedItemTextColor;
- }
- .ui.secondary.inverted.pointing.menu .header.item {
- color: @secondaryPointingInvertedItemHeaderColor !important;
- }
-
- /* Hover */
- .ui.secondary.inverted.pointing.menu .link.item:hover,
- .ui.secondary.inverted.pointing.menu a.item:hover {
- color: @secondaryPointingInvertedItemHoverTextColor;
- }
-
-
- /* Active */
- .ui.ui.secondary.inverted.pointing.menu .active.item {
- border-color: @secondaryPointingInvertedActiveBorderColor;
- color: @secondaryPointingInvertedActiveColor;
- background-color: transparent;
- }
- }
- }
-}
-
-& when (@variationMenuText) {
- /*--------------
- Text Menu
- ---------------*/
-
- .ui.text.menu {
- background: none transparent;
- border-radius: 0;
- box-shadow: none;
- border: none;
-
- margin: @textMenuMargin;
- }
- .ui.text.menu .item {
- border-radius: 0;
- box-shadow: none;
- align-self: center;
- margin: @textMenuItemMargin;
- padding: @textMenuItemPadding;
- font-weight: @textMenuItemFontWeight;
- color: @textMenuItemColor;
- transition: @textMenuItemTransition;
- }
-
- /* Border */
- .ui.text.menu .item:before,
- .ui.text.menu .menu .item:before {
- display: none !important;
- }
-
- /* Header */
- .ui.text.menu .header.item {
- background-color: transparent;
- opacity: 1;
- color: @textMenuHeaderColor;
- font-size: @textMenuHeaderSize;
- text-transform: @textMenuHeaderTextTransform;
- font-weight: @textMenuHeaderFontWeight;
- }
-
- /* Image */
- .ui.text.menu .item > img:not(.ui) {
- margin: 0;
- }
-
- /*--- fluid text ---*/
- .ui.text.item.menu .item {
- margin: 0;
- }
- & when (@variationMenuVertical) {
- /*--- vertical text ---*/
- .ui.vertical.text.menu {
- margin: @textVerticalMenuMargin;
- }
- .ui.vertical.text.menu:first-child {
- margin-top: 0;
- }
- .ui.vertical.text.menu:last-child {
- margin-bottom: 0;
- }
- .ui.vertical.text.menu .item {
- margin: @textVerticalMenuItemMargin;
- padding-left: 0;
- padding-right: 0;
- }
- .ui.vertical.text.menu .item > i.icon {
- float: @textVerticalMenuIconFloat;
- margin: @iconMargin;
- }
- .ui.vertical.text.menu .header.item {
- margin: @textVerticalMenuHeaderMargin;
- }
-
- /* Vertical Sub Menu */
- .ui.vertical.text.menu .item:not(.dropdown) > .menu {
- margin: @textMenuSubMenuMargin;
- }
- .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
- margin: @textMenuSubMenuItemMargin;
- padding: @textMenuSubMenuItemPadding;
- }
- }
- /*--- hover ---*/
- .ui.text.menu .item:hover {
- opacity: 1;
- background-color: transparent;
- }
-
- /*--- active ---*/
- .ui.text.menu .active.item {
- background-color: transparent;
- border: none;
- box-shadow: none;
- font-weight: @textMenuActiveItemFontWeight;
- color: @textMenuActiveItemColor;
- }
-
- /*--- active hover ---*/
- .ui.text.menu .active.item:hover {
- background-color: transparent;
- }
- & when (@variationMenuPointing) {
- /* Disable Bariations */
- .ui.text.pointing.menu .active.item:after {
- box-shadow: none;
- }
- }
- & when (@variationMenuAttached) {
- .ui.text.attached.menu {
- box-shadow: none;
- }
- }
- & when (@variationMenuInverted) {
- /* Inverted */
- .ui.inverted.text.menu,
- .ui.inverted.text.menu .item,
- .ui.inverted.text.menu .item:hover,
- .ui.inverted.text.menu .active.item {
- background-color: transparent;
- }
- }
- & when (@variationMenuFluid) {
- /* Fluid */
- .ui.fluid.text.menu {
- margin-left: 0;
- margin-right: 0;
- }
- }
-}
-
-/*--------------
- Icon Only
----------------*/
-
-/* Vertical Menu */
-.ui.vertical.icon.menu {
- display: inline-block;
- width: auto;
-}
-
-/* Item */
-.ui.icon.menu .item {
- height: auto;
- text-align: @iconMenuTextAlign;
- color: @iconMenuItemColor;
-}
-
-/* Icon */
-.ui.icon.menu .item > i.icon:not(.dropdown) {
- margin: 0;
- opacity: 1;
-}
-
-/* Icon Gylph */
-.ui.icon.menu i.icon:before {
- opacity: 1;
-}
-
-/* (x) Item Icon */
-.ui.menu .icon.item > i.icon {
- width: auto;
- margin: 0 auto;
-}
-
-/* Vertical Icon */
-.ui.vertical.icon.menu .item > i.icon:not(.dropdown) {
- display: block;
- opacity: 1;
- margin: 0 auto;
- float: none;
-}
-
-/* Inverted */
-.ui.inverted.icon.menu .item {
- color: @iconMenuInvertedItemColor;
-}
-
-& when (@variationMenuLabeled) {
- /*--------------
- Labeled Icon
- ---------------*/
-
- /* Menu */
- .ui.labeled.icon.menu {
- text-align: center;
- }
-
- /* Item */
- .ui.labeled.icon.menu .item {
- min-width: @labeledIconMinWidth;
- flex-direction: column;
- }
-
- /* Icon */
- .ui.labeled.icon.menu > .item > i.icon:not(.dropdown) {
- height: 1em;
- display: block;
- font-size: @labeledIconSize !important;
- margin: 0 auto @labeledIconTextMargin !important;
- }
- & when (@variationMenuFluid) {
- /* Fluid */
- .ui.fluid.labeled.icon.menu > .item {
- min-width: 0;
- }
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationMenuStackable) {
- /*--------------
- Stackable
- ---------------*/
-
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.stackable.menu {
- flex-direction: column;
- }
- .ui.stackable.menu .item {
- width: 100% !important;
- }
- .ui.stackable.menu .item:before {
- position: absolute;
- content: '';
- top: auto;
- bottom: 0;
- left: 0;
- width: 100%;
- height: @dividerSize;
- background: @verticalDividerBackground;
- }
-
- .ui.stackable.menu .left.menu,
- .ui.stackable.menu .left.item {
- margin-right: 0 !important;
- }
- .ui.stackable.menu .right.menu,
- .ui.stackable.menu .right.item {
- margin-left: 0 !important;
- }
- .ui.stackable.menu .center.menu,
- .ui.stackable.menu .center.item {
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
-
- .ui.stackable.menu .right.menu,
- .ui.stackable.menu .center.menu,
- .ui.stackable.menu .left.menu {
- flex-direction: column;
- }
- }
-}
-
-/*--------------
- Colors
----------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
-
- & when not (@color=secondary) {
- .ui.ui.ui.menu .@{color}.active.item,
- .ui.ui.@{color}.menu .active.item:hover,
- .ui.ui.@{color}.menu .active.item {
- & when not (@secondaryPointingActiveBorderColor = currentColor) {
- border-color: @c;
- }
- color: @c;
- }
- }
-})
-
-& when (@variationMenuInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.menu {
- border: @invertedBorder;
- background: @invertedBackground;
- box-shadow: @invertedBoxShadow;
- }
-
- /* Menu Item */
- .ui.inverted.menu .item,
- .ui.inverted.menu .item > a:not(.ui) {
- background: @invertedItemBackground;
- color: @invertedItemTextColor;
- }
- .ui.inverted.menu .item.menu {
- background: @invertedSubMenuBackground;
- }
-
- /*--- Border ---*/
- .ui.inverted.menu .item:before {
- background: @invertedDividerBackground;
- }
- & when (@variationMenuVertical) {
- .ui.vertical.inverted.menu .item:before {
- background: @invertedVerticalDividerBackground;
- }
- /* Sub Menu */
- .ui.vertical.inverted.menu .menu .item,
- .ui.vertical.inverted.menu .menu .item a:not(.ui) {
- color: @invertedSubMenuColor;
- }
- }
- /* Header */
- .ui.inverted.menu .header.item {
- margin: 0;
- background: @invertedHeaderBackground;
- box-shadow: none;
- }
-
- /* Disabled */
- .ui.ui.inverted.menu .item.disabled {
- color: @invertedDisabledTextColor;
- }
-
- /*--- Hover ---*/
- .ui.link.inverted.menu .item:hover,
- .ui.inverted.menu .dropdown.item:hover,
- .ui.inverted.menu .link.item:hover,
- .ui.inverted.menu a.item:hover {
- background: @invertedHoverBackground;
- color: @invertedHoverColor;
- }
- & when (@variationMenuVertical) {
- .ui.vertical.inverted.menu .item .menu a.item:hover,
- .ui.vertical.inverted.menu .item .menu .link.item:hover {
- background: @invertedSubMenuBackground;
- color: @invertedSubMenuHoverColor;
- }
- }
- /*--- Pressed ---*/
- .ui.inverted.menu a.item:active,
- .ui.inverted.menu .link.item:active{
- background: @invertedMenuPressedBackground;
- color: @invertedMenuPressedColor;
- }
-
- /*--- Active ---*/
- .ui.inverted.menu .active.item {
- background: @invertedActiveBackground;
- color: @invertedActiveColor !important;
- }
- & when (@variationMenuVertical) {
- .ui.inverted.vertical.menu .item .menu .active.item {
- background: @invertedSubMenuActiveBackground;
- color: @invertedSubMenuActiveColor;
- }
- }
- & when (@variationMenuPointing) {
- .ui.inverted.pointing.menu .active.item:after {
- background: @invertedArrowActiveColor;
- margin: 0 !important;
- box-shadow: none !important;
- border: none !important;
- }
- }
-
- /*--- Active Hover ---*/
- .ui.inverted.menu .active.item:hover {
- background: @invertedActiveHoverBackground;
- color: @invertedActiveHoverColor !important;
- }
- & when (@variationMenuPointing) {
- .ui.inverted.pointing.menu .active.item:hover:after {
- background: @invertedArrowActiveHoverColor;
- }
- }
-}
-
-& when (@variationMenuFloated) {
- /*--------------
- Floated
- ---------------*/
-
- .ui.floated.menu {
- float: left;
- margin: 0 @floatedDistance 0 0;
- }
- .ui.floated.menu .item:last-child:before {
- display: none;
- }
-
- .ui.right.floated.menu {
- float: right;
- margin: 0 0 0 @floatedDistance;
- }
-}
-
-& when (@variationMenuInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @h: @colors[@@color][hover];
-
- & when not (@color=secondary) {
- .ui.ui.ui.inverted.menu .@{color}.active.item,
- .ui.ui.inverted.@{color}.menu {
- background-color: @c;
- }
- .ui.inverted.@{color}.menu .item:before {
- background-color: @invertedColoredDividerBackground;
- }
- .ui.ui.inverted.@{color}.menu .active.item {
- background-color: @invertedColoredActiveBackground;
- }
- & when (@variationMenuPointing) {
- .ui.inverted.pointing.@{color}.menu .active.item {
- background-color: @h;
- }
- }
- }
- })
-
- & when (@variationMenuPointing) {
- .ui.ui.ui.inverted.pointing.menu .active.item:after {
- background-color: inherit;
- }
- }
-}
-
-& when (@variationMenuFitted) {
- /*--------------
- Fitted
- ---------------*/
-
- .ui.fitted.menu .item,
- .ui.fitted.menu .item .menu .item,
- .ui.menu .fitted.item {
- padding: 0;
- }
- .ui.horizontally.fitted.menu .item,
- .ui.horizontally.fitted.menu .item .menu .item,
- .ui.menu .horizontally.fitted.item {
- padding-top: @itemVerticalPadding;
- padding-bottom: @itemVerticalPadding;
- }
- .ui.vertically.fitted.menu .item,
- .ui.vertically.fitted.menu .item .menu .item,
- .ui.menu .vertically.fitted.item {
- padding-left: @itemHorizontalPadding;
- padding-right: @itemHorizontalPadding;
- }
-}
-
-& when (@variationMenuBorderless) {
- /*--------------
- Borderless
- ---------------*/
-
- .ui.borderless.menu .item:before,
- .ui.borderless.menu .item .menu .item:before,
- .ui.menu .borderless.item:before {
- background: none !important;
- }
-}
-
-& when (@variationMenuCompact) {
- /*-------------------
- Compact
- --------------------*/
-
- .ui.compact.menu {
- display: inline-flex;
- margin: 0;
- vertical-align: middle;
- }
- & when (@variationMenuVertical) {
- .ui.compact.vertical.menu {
- /* IE hack to make dropdown icons appear inline */
- display: -ms-inline-flexbox !important;
- display: inline-block;
- }
- }
- .ui.compact.menu:not(.secondary) .item:last-child {
- border-radius: 0 @borderRadius @borderRadius 0;
- }
- .ui.compact.menu .item:last-child:before {
- display: none;
- }
- & when (@variationMenuVertical) {
- .ui.compact.vertical.menu {
- width: auto !important;
- }
- .ui.compact.vertical.menu .item:last-child::before {
- display: block;
- }
- }
-}
-
-& when (@variationMenuFluid) {
- /*-------------------
- Fluid
- --------------------*/
-
- .ui.menu.fluid,
- .ui.vertical.menu.fluid {
- width: 100% !important;
- }
-}
-
-
-/*-------------------
- Evenly Sized
---------------------*/
-
-.ui.item.menu,
-.ui.item.menu .item {
- width: 100%;
- padding-left: 0 !important;
- padding-right: 0 !important;
- margin-left: 0 !important;
- margin-right: 0 !important;
- text-align: center;
- justify-content: center;
-}
-.ui.attached.item.menu:not(.tabular) {
- margin: 0 @attachedHorizontalOffset !important;
-}
-
-.ui.item.menu .item:last-child:before {
- display: none;
-}
-
-.ui.menu.two.item .item {
- width: 50%;
-}
-.ui.menu.three.item .item {
- width: 33.333%;
-}
-.ui.menu.four.item .item {
- width: 25%;
-}
-.ui.menu.five.item .item {
- width: 20%;
-}
-.ui.menu.six.item .item {
- width: 16.666%;
-}
-.ui.menu.seven.item .item {
- width: 14.285%;
-}
-.ui.menu.eight.item .item {
- width: 12.500%;
-}
-.ui.menu.nine.item .item {
- width: 11.11%;
-}
-.ui.menu.ten.item .item {
- width: 10.0%;
-}
-.ui.menu.eleven.item .item {
- width: 9.09%;
-}
-.ui.menu.twelve.item .item {
- width: 8.333%;
-}
-
-& when (@variationMenuFixed) {
- /*--------------
- Fixed
- ---------------*/
-
- .ui.menu.fixed {
- position: fixed;
- z-index: 101;
- margin: 0;
- width: 100%;
- }
- .ui.menu.fixed,
- .ui.menu.fixed .item:first-child,
- .ui.menu.fixed .item:last-child {
- border-radius: 0 !important;
- }
-
- .ui.fixed.menu,
- .ui[class*="top fixed"].menu {
- top: 0;
- left: 0;
- right: auto;
- bottom: auto;
- }
- .ui[class*="top fixed"].menu {
- border-top: none;
- border-left: none;
- border-right: none;
- }
- .ui[class*="right fixed"].menu {
- border-top: none;
- border-bottom: none;
- border-right: none;
- top: 0;
- right: 0;
- left: auto;
- bottom: auto;
- width: auto;
- height: 100%;
- }
- .ui[class*="bottom fixed"].menu {
- border-bottom: none;
- border-left: none;
- border-right: none;
- bottom: 0;
- left: 0;
- top: auto;
- right: auto;
- }
- .ui[class*="left fixed"].menu {
- border-top: none;
- border-bottom: none;
- border-left: none;
- top: 0;
- left: 0;
- right: auto;
- bottom: auto;
- width: auto;
- height: 100%;
- }
-
- /* Coupling with Grid */
- .ui.fixed.menu + .ui.grid {
- padding-top: @fixedPrecedingGridMargin;
- }
-}
-
-& when (@variationMenuPointing) {
- /*-------------------
- Pointing
- --------------------*/
-
- .ui.pointing.menu .item:after {
- visibility: hidden;
- position: absolute;
- content: '';
- top: 100%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- background: none;
-
- margin: (@arrowBorderWidth / 2) 0 0;
- width: @arrowSize;
- height: @arrowSize;
-
- border: none;
- border-bottom: @arrowBorder;
- border-right: @arrowBorder;
-
- z-index: @arrowZIndex;
- transition: @arrowTransition;
- }
- & when (@variationMenuVertical) {
- .ui.vertical.pointing.menu .item:after {
- position: absolute;
- top: 50%;
- right: 0;
- bottom: auto;
- left: auto;
-
- transform: translateX(50%) translateY(-50%) rotate(45deg);
- margin: 0 -(@arrowBorderWidth / 2) 0 0;
-
- border: none;
- border-top: @arrowBorder;
- border-right: @arrowBorder;
- }
- }
- .ui.pointing.menu .ui.dropdown .menu .item:after,
- .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
- display: none;
- }
-
- /* Active */
- .ui.pointing.menu .active.item:after {
- visibility: visible;
- }
- .ui.pointing.menu .active.dropdown.item:after {
- visibility: hidden;
- }
-
- /* Don't double up pointers */
- .ui.pointing.menu .dropdown.active.item:after,
- .ui.pointing.menu .active.item .menu .active.item:after {
- display: none;
- }
-
- /* Colors */
- .ui.pointing.menu .active.item:hover:after {
- background-color: @arrowHoverColor;
- }
- .ui.pointing.menu .active.item:after {
- background-color: @arrowActiveColor;
- }
- .ui.pointing.menu .active.item:hover:after {
- background-color: @arrowActiveHoverColor;
- }
- & when (@variationMenuVertical) {
- .ui.vertical.pointing.menu .active.item:hover:after {
- background-color: @arrowVerticalHoverColor;
- }
- .ui.vertical.pointing.menu .active.item:after {
- background-color: @arrowVerticalActiveColor;
- }
- .ui.vertical.pointing.menu .menu .active.item:after {
- background-color: @arrowVerticalSubMenuColor;
- }
- }
-}
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
-
- .ui.inverted.pointing.menu .@{color}.active.item:after {
- background-color: @c;
- }
-})
-
-& when (@variationMenuAttached) {
- /*--------------
- Attached
- ---------------*/
-
- /* Middle */
- .ui.attached.menu {
- top: 0;
- bottom: 0;
- border-radius: 0;
- margin: 0 @attachedHorizontalOffset;
- width: @attachedWidth;
- max-width: @attachedWidth;
- box-shadow: @attachedBoxShadow;
- }
- .ui.attached + .ui.attached.menu:not(.top) {
- border-top: none;
- }
-
- /* Top */
- .ui[class*="top attached"].menu {
- bottom: 0;
- margin-bottom: 0;
- top: @attachedTopOffset;
- margin-top: @verticalMargin;
- border-radius: @borderRadius @borderRadius 0 0;
- }
- .ui.menu[class*="top attached"]:first-child {
- margin-top: 0;
- }
-
- /* Bottom */
- .ui[class*="bottom attached"].menu {
- bottom: 0;
- margin-top: 0;
- top: @attachedBottomOffset;
- margin-bottom: @verticalMargin;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0 0 @borderRadius @borderRadius;
- }
- .ui[class*="bottom attached"].menu:last-child {
- margin-bottom: 0;
- }
-
- /* Attached Menu Item */
- .ui.top.attached.menu > .item:first-child {
- border-radius: @borderRadius 0 0 0;
- }
- .ui.bottom.attached.menu > .item:first-child {
- border-radius: 0 0 0 @borderRadius;
- }
-
- /* Tabular Attached */
- .ui.attached.menu:not(.tabular) {
- border: @attachedBorder;
- }
- & when (@variationMenuInverted) {
- .ui.attached.inverted.menu {
- border: none;
- }
- }
- & when (@variationMenuTabular) {
- .ui.attached.tabular.menu {
- margin-left: 0;
- margin-right: 0;
- width: 100%;
- }
- }
-}
-
-/*--------------
- Sizes
----------------*/
-
-.ui.menu {
- font-size: @medium;
-}
-.ui.vertical.menu {
- width: @mediumWidth;
-}
-& when not (@variationMenuSizes = false) {
- each(@variationMenuSizes, {
- @w: @{value}Width;
- @s: @@value;
- .ui.@{value}.menu,
- .ui.@{value}.menu .dropdown,
- .ui.@{value}.menu .dropdown .menu > .item {
- font-size: @s;
- }
- .ui.@{value}.vertical.menu:not(.icon) {
- width: @@w;
- }
- })
-}
-
-/*-------------------
- Inverted dropdowns
---------------------*/
-.ui.menu .ui.inverted.inverted.dropdown.item .menu {
- background: @invertedDropdownBackground;
- box-shadow: @invertedDropdownMenuBoxShadow;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .item {
- color: @invertedDropdownItemColor !important;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .active.item {
- background: @invertedDropdownActiveItemBackground !important;
- color: @invertedDropdownActiveItemColor !important;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .item:hover {
- background: @invertedDropdownHoveredItemBackground !important;
- color: @invertedDropdownHoveredItemColor !important;
-}
-
-.ui.menu .ui.inverted.dropdown .menu > .selected.item {
- background: @invertedDropdownSelectedItemBackground !important;
- color: @invertedDropdownSelectedItemColor !important;
-}
-
-& when (@variationMenuVertical) {
- /* Vertical */
- .ui.vertical.menu .inverted.dropdown.item .menu {
- box-shadow: @invertedDropdownMenuBoxShadow;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/message.less b/semantic/src/definitions/collections/message.less
deleted file mode 100644
index e237277..0000000
--- a/semantic/src/definitions/collections/message.less
+++ /dev/null
@@ -1,414 +0,0 @@
-/*!
- * # Fomantic-UI - Message
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'collection';
-@element : 'message';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Message
-*******************************/
-
-.ui.message {
- position: relative;
- min-height: 1em;
- margin: @verticalMargin 0;
- background: @background;
- padding: @padding;
- line-height: @lineHeight;
- color: @textColor;
- transition: @transition;
- border-radius: @borderRadius;
- box-shadow: @boxShadow;
-}
-
-.ui.message:first-child {
- margin-top: 0;
-}
-.ui.message:last-child {
- margin-bottom: 0;
-}
-
-
-/*--------------
- Content
----------------*/
-
-/* Header */
-.ui.message .header {
- display: @headerDisplay;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- margin: @headerMargin;
-}
-
-/* Default font size */
-.ui.message .header:not(.ui) {
- font-size: @headerFontSize;
-}
-
-/* Paragraph */
-.ui.message p {
- opacity: @messageTextOpacity;
- margin: @messageParagraphMargin 0;
-}
-.ui.message p:first-child {
- margin-top: 0;
-}
-.ui.message p:last-child {
- margin-bottom: 0;
-}
-.ui.message .header + p {
- margin-top: @headerParagraphDistance;
-}
-
-/* List */
-.ui.message .list:not(.ui) {
- text-align: left;
- padding: 0;
- opacity: @listOpacity;
- list-style-position: @listStylePosition;
- margin: @listMargin 0 0;
-}
-.ui.message .list:not(.ui):first-child {
- margin-top: 0;
-}
-.ui.message .list:not(.ui):last-child {
- margin-bottom: 0;
-}
-.ui.message .list:not(.ui) li {
- position: relative;
- list-style-type: none;
- margin: 0 0 @listItemMargin @listItemIndent;
- padding: 0;
-}
-.ui.message .list:not(.ui) li:before {
- position: absolute;
- content: '•';
- left: -1em;
- height: 100%;
- vertical-align: baseline;
-}
-.ui.message .list:not(.ui) li:last-child {
- margin-bottom: 0;
-}
-
-
-/* Icon */
-.ui.message > i.icon {
- margin-right: @iconDistance;
-}
-
-/* Close Icon */
-.ui.message > .close.icon {
- cursor: pointer;
- position: absolute;
- margin: 0;
- top: @closeTopDistance;
- right: @closeRightDistance;
- opacity: @closeOpacity;
- transition: @closeTransition;
-}
-.ui.message > .close.icon:hover {
- opacity: 1;
-}
-
-/* First / Last Element */
-.ui.message > :first-child {
- margin-top: 0;
-}
-.ui.message > :last-child {
- margin-bottom: 0;
-}
-
-/*******************************
- Coupling
-*******************************/
-
-.ui.dropdown .menu > .message {
- margin: 0 -@borderWidth;
-}
-
-/*******************************
- States
-*******************************/
-
-/*--------------
- Visible
----------------*/
-
-.ui.visible.visible.visible.visible.message {
- display: block;
-}
-
-.ui.icon.visible.visible.visible.visible.message {
- display: flex;
-}
-
-/*--------------
- Hidden
----------------*/
-
-.ui.hidden.hidden.hidden.hidden.message {
- display: none;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationMessageCompact) {
- /*--------------
- Compact
- ---------------*/
-
- .ui.compact.message {
- display: inline-block;
- }
- .ui.compact.icon.message {
- display: inline-flex;
- width: auto;
- }
-}
-
-& when (@variationMessageAttached) {
- /*--------------
- Attached
- ---------------*/
-
- .ui.attached.message {
- margin-bottom: @attachedYOffset;
- border-radius: @borderRadius @borderRadius 0 0;
- box-shadow: @attachedBoxShadow;
- margin-left: @attachedXOffset;
- margin-right: @attachedXOffset;
- }
- .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
- margin-top: @attachedYOffset;
- border-radius: 0;
- }
- .ui.bottom.attached.message {
- margin-top: @attachedYOffset;
- border-radius: 0 0 @borderRadius @borderRadius;
- box-shadow: @attachedBottomBoxShadow;
- }
- .ui.bottom.attached.message:not(:last-child) {
- margin-bottom: @verticalMargin;
- }
- & when (@variationMessageIcon) {
- .ui.attached.icon.message {
- width: auto;
- }
- }
-}
-
-& when (@variationMessageIcon) {
- /*--------------
- Icon
- ---------------*/
-
- .ui.icon.message {
- display: flex;
- width: 100%;
- align-items: center;
- }
- .ui.icon.message > i.icon:not(.close) {
- display: block;
- flex: 0 0 auto;
- width: auto;
- line-height: 1;
- vertical-align: @iconVerticalAlign;
- font-size: @iconSize;
- opacity: @iconOpacity;
- }
- .ui.icon.message > .content {
- display: block;
- flex: 1 1 auto;
- vertical-align: @iconVerticalAlign;
- }
-
-
- .ui.icon.message > i.icon:not(.close) + .content {
- padding-left: @iconContentDistance;
- }
- .ui.icon.message > i.circular.icon {
- width: 1em;
- }
-}
-
-& when (@variationMessageFloating) {
- /*--------------
- Floating
- ---------------*/
-
- .ui.floating.message {
- box-shadow: @floatingBoxShadow;
- }
-}
-
-
-/*--------------
- Colors
----------------*/
-
-/*--------------
- Types
----------------*/
-& when (@variationMessageConsequences) {
-
- @consequences: {
- @positive: {
- background : @positiveBackgroundColor;
- header : @positiveHeaderColor;
- boxShadow : @positiveBoxShadow;
- boxFloatShadow : @positiveBoxFloatingShadow;
- text : @positiveTextColor;
- };
- @negative: {
- background : @negativeBackgroundColor;
- header : @negativeHeaderColor;
- boxShadow : @negativeBoxShadow;
- boxFloatShadow : @negativeBoxFloatingShadow;
- text : @negativeTextColor;
- };
- @info: {
- background : @infoBackgroundColor;
- header : @infoHeaderColor;
- boxShadow : @infoBoxShadow;
- boxFloatShadow : @infoBoxFloatingShadow;
- text : @infoTextColor;
- };
- @warning: {
- background : @warningBackgroundColor;
- header : @warningHeaderColor;
- boxShadow : @warningBoxShadow;
- boxFloatShadow : @warningBoxFloatingShadow;
- text : @warningTextColor;
- };
- @error: {
- background : @errorBackgroundColor;
- header : @errorHeaderColor;
- boxShadow : @errorBoxShadow;
- boxFloatShadow : @errorBoxFloatingShadow;
- text : @errorTextColor;
- };
- @success: {
- background : @successBackgroundColor;
- header : @successHeaderColor;
- boxShadow : @successBoxShadow;
- boxFloatShadow : @successBoxFloatingShadow;
- text : @successTextColor;
- };
- }
-
- /* Colors */
-
- each(@consequences, {
- @color: replace(@key, '@', '');
- @bg: @consequences[@@color][background];
- @hd: @consequences[@@color][header];
- @bs: @consequences[@@color][boxShadow];
- @bfs: @consequences[@@color][boxFloatShadow];
- @t: @consequences[@@color][text];
-
- .ui.@{color}.message {
- background-color: @bg;
- color: @t;
- }
-
- .ui.@{color}.message,
- .ui.attached.@{color}.message {
- box-shadow: @bs;
- }
- & when (@variationMessageFloating) {
- .ui.floating.@{color}.message {
- box-shadow: @bfs;
- }
- }
- .ui.@{color}.message .header {
- color: @hd;
- }
- })
-}
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @bg: @colors[@@color][background];
- @hd: @colors[@@color][header];
- @bs: @colors[@@color][boxShadow];
- @bfs: @colors[@@color][boxFloatShadow];
- @t: @colors[@@color][text];
- @isVeryDark: @colors[@@color][isVeryDark];
-
- .ui.@{color}.message {
- & when not (@isVeryDark) {
- background-color: @bg;
- color: @t;
- }
- & when (@isVeryDark) {
- background-color: @black;
- color: @invertedTextColor;
- }
- }
-
- .ui.@{color}.message,
- .ui.attached.@{color}.message {
- & when not (@isVeryDark) {
- box-shadow: @bs;
- }
- }
- & when (@variationMessageFloating) {
- .ui.floating.@{color}.message {
- & when not (@isVeryDark) {
- box-shadow: @bfs;
- }
- }
- }
-
- .ui.@{color}.message .header {
- & when not (@isVeryDark) {
- color: @hd;
- }
- & when (@isVeryDark) {
- color: @invertedTextColor;
- }
- }
-})
-
-& when (@variationMessageInverted) {
- .ui.inverted.message {
- background-color: @black;
- color: @invertedTextColor;
- }
-}
-
-/*--------------
- Sizes
----------------*/
-
-.ui.message {
- font-size: @relativeMedium;
-}
-& when not (@variationMessageSizes = false) {
- each(@variationMessageSizes, {
- @s: @{value}MessageSize;
- .ui.@{value}.message {
- font-size: @@s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/table.less b/semantic/src/definitions/collections/table.less
deleted file mode 100644
index f185282..0000000
--- a/semantic/src/definitions/collections/table.less
+++ /dev/null
@@ -1,1322 +0,0 @@
-/*!
- * # Fomantic-UI - Table
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'collection';
-@element : 'table';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Table
-*******************************/
-
-/* Prototype */
-.ui.table {
- width: 100%;
- background: @background;
- margin: @margin;
- border: @border;
- box-shadow: @boxShadow;
- border-radius: @borderRadius;
- text-align: @textAlign;
- vertical-align: @verticalAlign;
- color: @color;
- border-collapse: @borderCollapse;
- border-spacing: @borderSpacing;
-}
-
-.ui.table:first-child {
- margin-top: 0;
-}
-.ui.table:last-child {
- margin-bottom: 0;
-}
-.ui.table > thead,
-.ui.table > tbody {
- text-align: inherit;
- vertical-align: inherit;
-}
-
-/*******************************
- Parts
-*******************************/
-
-/* Table Content */
-.ui.table th,
-.ui.table td {
- transition: @transition;
-}
-
-/* Rowspan helper class */
-.ui.table th.rowspanned,
-.ui.table td.rowspanned {
- display:none;
-}
-
-/* Headers */
-.ui.table > thead {
- box-shadow: @headerBoxShadow;
-}
-.ui.table > thead > tr > th {
- cursor: auto;
- background: @headerBackground;
- text-align: @headerAlign;
- color: @headerColor;
- padding: @headerVerticalPadding @headerHorizontalPadding;
- vertical-align: @headerVerticalAlign;
- font-style: @headerFontStyle;
- font-weight: @headerFontWeight;
- text-transform: @headerTextTransform;
- border-bottom: @headerBorder;
- border-left: @headerDivider;
-}
-
-.ui.table > thead > tr > th:first-child {
- border-left: none;
-}
-
-.ui.table > thead > tr:first-child > th:first-child {
- border-radius: @borderRadius 0 0 0;
-}
-.ui.table > thead > tr:first-child > th:last-child {
- border-radius: 0 @borderRadius 0 0;
-}
-.ui.table > thead > tr:first-child > th:only-child {
- border-radius: @borderRadius @borderRadius 0 0;
-}
-
-/* Footer */
-.ui.table > tfoot {
- box-shadow: @footerBoxShadow;
-}
-.ui.table > tfoot > tr > th,
-.ui.table > tfoot > tr > td {
- cursor: auto;
- border-top: @footerBorder;
- background: @footerBackground;
- text-align: @footerAlign;
- color: @footerColor;
- padding: @footerVerticalPadding @footerHorizontalPadding;
- vertical-align: @footerVerticalAlign;
- font-style: @footerFontStyle;
- font-weight: @footerFontWeight;
- text-transform: @footerTextTransform;
-}
-.ui.table > tfoot > tr > th:first-child,
-.ui.table > tfoot > tr > td:first-child {
- border-left: none;
-}
-.ui.table > tfoot > tr:first-child > th:first-child,
-.ui.table > tfoot > tr:first-child > td:first-child {
- border-radius: 0 0 0 @borderRadius;
-}
-.ui.table > tfoot > tr:first-child > th:last-child,
-.ui.table > tfoot > tr:first-child > td:last-child {
- border-radius: 0 0 @borderRadius 0;
-}
-.ui.table > tfoot > tr:first-child > th:only-child,
-.ui.table > tfoot > tr:first-child > td:only-child {
- border-radius: 0 0 @borderRadius @borderRadius;
-}
-
-/* Table Row */
-.ui.table > tr > td,
-.ui.table > tbody > tr > td {
- border-top: @rowBorder;
-}
-.ui.table > tr:first-child > td,
-.ui.table > tbody > tr:first-child > td {
- border-top: none;
-}
-
-/* Repeated tbody */
-.ui.table > tbody + tbody tr:first-child > td {
- border-top: @rowBorder;
-}
-
-/* Table Cells */
-.ui.table > tbody > tr > td,
-.ui.table > tr > td {
- padding: @cellVerticalPadding @cellHorizontalPadding;
- text-align: @cellTextAlign;
-}
-
-/* Icons */
-.ui.table > i.icon {
- vertical-align: @iconVerticalAlign;
-}
-.ui.table > i.icon:only-child {
- margin: 0;
-}
-
-/* Table Segment */
-.ui.table.segment {
- padding: 0;
-}
-.ui.table.segment:after {
- display: none;
-}
-.ui.table.segment.stacked:after {
- display: block;
-}
-
-
-/* Responsive */
-@media only screen and (max-width : @largestMobileScreen) {
- .ui.table:not(.unstackable) {
- width: 100%;
- padding: 0;
- }
- .ui.table:not(.unstackable) > thead,
- .ui.table:not(.unstackable) > thead > tr,
- .ui.table:not(.unstackable) > tfoot,
- .ui.table:not(.unstackable) > tfoot > tr,
- .ui.table:not(.unstackable) > tbody,
- .ui.table:not(.unstackable) > tr,
- .ui.table:not(.unstackable) > tbody > tr,
- .ui.table:not(.unstackable) > tr > th:not(.rowspanned),
- .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned),
- .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned),
- .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned),
- .ui.table:not(.unstackable) > tr > td:not(.rowspanned),
- .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned),
- .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) {
- display: block !important;
- width: auto !important;
- }
-
- .ui.table:not(.unstackable) > thead {
- display: @responsiveHeaderDisplay;
- }
- .ui.table:not(.unstackable) > tfoot {
- display: @responsiveFooterDisplay;
- }
- .ui.ui.ui.ui.table:not(.unstackable) > tr,
- .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
- .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
- .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
- padding-top: @responsiveRowVerticalPadding;
- padding-bottom: @responsiveRowVerticalPadding;
- box-shadow: @responsiveRowBoxShadow;
- }
-
- .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
- .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
- .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
- .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
- .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
- .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
- .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
- background: none;
- border: none;
- padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
- box-shadow: @responsiveCellBoxShadow;
- }
- .ui.table:not(.unstackable) > tr > th:first-child,
- .ui.table:not(.unstackable) > thead > tr > th:first-child,
- .ui.table:not(.unstackable) > tbody > tr > th:first-child,
- .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
- .ui.table:not(.unstackable) > tr > td:first-child,
- .ui.table:not(.unstackable) > tbody > tr > td:first-child,
- .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
- font-weight: @responsiveCellHeaderFontWeight;
- }
-
- /* Definition Table */
- .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
- box-shadow: none !important;
- }
- & when (@variationTableMarked) {
- each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
- .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} {
- &.left {
- box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
- }
- &.right {
- box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
- }
- }
- & when (@variationTableInverted) {
- .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} {
- &.left {
- box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
- }
- &.right {
- box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
- }
- }
- }
- })
- }
-}
-
-
-/*******************************
- Coupling
-*******************************/
-
-/* UI Image */
-.ui.table .collapsing .image,
-.ui.table .collapsing .image img {
- max-width: none;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-/*--------------
- Complex
----------------*/
-& when (@variationTableStructured) {
- .ui.structured.table {
- border-collapse: collapse;
- }
- .ui.structured.table > thead > tr > th {
- border-left: @headerDivider;
- border-right: @headerDivider;
- }
- & when (@variationTableSortable) {
- .ui.structured.sortable.table > thead > tr > th {
- border-left: @sortableBorder;
- border-right: @sortableBorder;
- }
- }
- & when (@variationTableBasic) {
- .ui.structured.basic.table > tr > th,
- .ui.structured.basic.table > thead > tr > th,
- .ui.structured.basic.table > tbody > tr > th,
- .ui.structured.basic.table > tfoot > tr > th {
- border-left: @basicTableHeaderDivider;
- border-right: @basicTableHeaderDivider;
- }
- }
- & when (@variationTableCelled) {
- .ui.structured.celled.table > tr > th,
- .ui.structured.celled.table > thead > tr > th,
- .ui.structured.celled.table > tbody > tr > th,
- .ui.structured.celled.table > tfoot > tr > th,
- .ui.structured.celled.table > tr > td,
- .ui.structured.celled.table > tbody > tr > td ,
- .ui.structured.celled.table > tfoot > tr > td { border-left: @cellBorder;
- border-right: @cellBorder;
- }
- }
-}
-
-& when (@variationTableDefinition) {
- /*--------------
- Definition
- ---------------*/
-
- .ui.definition.table > thead:not(.full-width) > tr > th:first-child {
- pointer-events: none;
- background: @definitionHeaderBackground;
- font-weight: @definitionHeaderFontWeight;
- color: @definitionHeaderColor;
- box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
- -moz-transform: scale(1);
- }
-
- .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child {
- pointer-events: none;
- background: @definitionFooterBackground;
- font-weight: @definitionFooterFontWeight;
- color: @definitionFooterColor;
- box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground;
- -moz-transform: scale(1);
- }
-
- /* Highlight Defining Column */
- .ui.definition.table > tr > td:first-child:not(.ignored),
- .ui.definition.table > tbody > tr > td:first-child:not(.ignored),
- .ui.definition.table > tfoot > tr > td:first-child:not(.ignored),
- .ui.definition.table tr td.definition {
- background: @definitionColumnBackground;
- font-weight: @definitionColumnFontWeight;
- color: @definitionColumnColor;
- text-transform: @definitionColumnTextTransform;
- box-shadow: @definitionColumnBoxShadow;
- text-align: @definitionColumnTextAlign;
- font-size: @definitionColumnFontSize;
- padding-left: @definitionColumnHorizontalPadding;
- padding-right: @definitionColumnHorizontalPadding;
- }
-
-
- /* Fix 2nd Column */
- .ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) {
- border-left: @borderWidth solid @borderColor;
- }
- .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2) ,
- .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) { border-left: @borderWidth solid @borderColor;
- }
- .ui.definition.table > tr > td:nth-child(2),
- .ui.definition.table > tbody > tr > td:nth-child(2) {
- border-left: @borderWidth solid @borderColor;
- }
-}
-
-/*******************************
- States
-*******************************/
-
-& when (@variationTablePositive) {
- /*--------------
- Positive
- ---------------*/
-
- .ui.ui.ui.ui.table tr.positive,
- .ui.ui.table td.positive {
- box-shadow: @positiveBoxShadow;
- background: @positiveBackgroundColor;
- color: @positiveColor;
- }
-}
-
-& when (@variationTableNegative) {
- /*--------------
- Negative
- ---------------*/
-
- .ui.ui.ui.ui.table tr.negative,
- .ui.ui.table td.negative {
- box-shadow: @negativeBoxShadow;
- background: @negativeBackgroundColor;
- color: @negativeColor;
- }
-}
-
-& when (@variationTableError) {
- /*--------------
- Error
- ---------------*/
-
- .ui.ui.ui.ui.table tr.error,
- .ui.ui.table td.error {
- box-shadow: @errorBoxShadow;
- background: @errorBackgroundColor;
- color: @errorColor;
- }
-}
-
-& when (@variationTableWarning) {
- /*--------------
- Warning
- ---------------*/
-
- .ui.ui.ui.ui.table tr.warning,
- .ui.ui.table td.warning {
- box-shadow: @warningBoxShadow;
- background: @warningBackgroundColor;
- color: @warningColor;
- }
-}
-
-& when (@variationTableActive) {
- /*--------------
- Active
- ---------------*/
-
- .ui.ui.ui.ui.table tr.active,
- .ui.ui.table td.active {
- box-shadow: @activeBoxShadow;
- background: @activeBackgroundColor;
- color: @activeColor;
- }
-}
-
-
-& when (@variationTableDisabled) {
- /*--------------
- Disabled
- ---------------*/
-
- .ui.table tr.disabled td,
- .ui.table tr td.disabled,
- .ui.table tr.disabled:hover,
- .ui.table tr:hover td.disabled {
- pointer-events: none;
- color: @disabledTextColor;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-& when (@variationTableStackable) {
- /*--------------
- Stackable
- ---------------*/
-
- @media only screen and (max-width : @largestTabletScreen) {
-
- .ui[class*="tablet stackable"].table,
- .ui[class*="tablet stackable"].table > thead,
- .ui[class*="tablet stackable"].table > thead > tr,
- .ui[class*="tablet stackable"].table > tfoot,
- .ui[class*="tablet stackable"].table > tfoot > tr,
- .ui[class*="tablet stackable"].table > tbody,
- .ui[class*="tablet stackable"].table > tbody > tr,
- .ui[class*="tablet stackable"].table > tr,
- .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
- .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
- .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
- .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
- .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
- .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
- .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) {
- display: block !important;
- width: 100% !important;
- }
-
- .ui[class*="tablet stackable"].table {
- padding: 0;
- }
- .ui[class*="tablet stackable"].table > thead {
- display: @responsiveHeaderDisplay;
- }
- .ui[class*="tablet stackable"].table > tfoot {
- display: @responsiveFooterDisplay;
- }
- .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr,
- .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr,
- .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr,
- .ui.ui.ui.ui[class*="tablet stackable"].table > tr {
- padding-top: @responsiveRowVerticalPadding;
- padding-bottom: @responsiveRowVerticalPadding;
- box-shadow: @responsiveRowBoxShadow;
- }
- .ui[class*="tablet stackable"].table > thead > tr > th,
- .ui[class*="tablet stackable"].table > tbody > tr > th,
- .ui[class*="tablet stackable"].table > tfoot > tr > th,
- .ui[class*="tablet stackable"].table > tr > th,
- .ui[class*="tablet stackable"].table > tbody > tr > td,
- .ui[class*="tablet stackable"].table > tfoot > tr > td,
- .ui[class*="tablet stackable"].table > tr > td {
- background: none;
- border: none !important;
- padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
- box-shadow: @responsiveCellBoxShadow;
- }
- & when (@variationTableDefinition) {
- /* Definition Table */
- .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child {
- box-shadow: none !important;
- }
- }
- }
- & when (@variationTableMarked) {
- each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
- .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} {
- &.left {
- box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
- }
- &.right {
- box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
- }
- }
- & when (@variationTableInverted) {
- .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} {
- &.left {
- box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
- }
- &.right {
- box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
- }
- }
- }
- })
- }
-}
-
-& when (@variationTableAligned) {
- /*--------------
- Text Alignment
- ---------------*/
-
- .ui.table[class*="left aligned"],
- .ui.table [class*="left aligned"] {
- text-align: left;
- }
- .ui.table[class*="center aligned"],
- .ui.table [class*="center aligned"] {
- text-align: center;
- }
- .ui.table[class*="right aligned"],
- .ui.table [class*="right aligned"] {
- text-align: right;
- }
-
- /*------------------
- Vertical Alignment
- ------------------*/
-
- .ui.table[class*="top aligned"],
- .ui.table [class*="top aligned"] {
- vertical-align: top;
- }
- .ui.table[class*="middle aligned"],
- .ui.table [class*="middle aligned"] {
- vertical-align: middle;
- }
- .ui.table[class*="bottom aligned"],
- .ui.table [class*="bottom aligned"] {
- vertical-align: bottom;
- }
-}
-
-& when (@variationTableCollapsing) {
- /*--------------
- Collapsing
- ---------------*/
-
- .ui.table th.collapsing,
- .ui.table td.collapsing {
- width: 1px;
- white-space: nowrap;
- }
-}
-
-& when (@variationTableFixed) {
- /*--------------
- Fixed
- ---------------*/
-
- .ui.fixed.table {
- table-layout: fixed;
- }
-
- .ui.fixed.table th,
- .ui.fixed.table td {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-}
-
-
-& when (@variationTableSelectable) {
- /*--------------
- Selectable
- ---------------*/
-
- .ui.ui.selectable.table > tbody > tr:hover,
- .ui.table tbody tr td.selectable:hover {
- background: @selectableBackground;
- color: @selectableTextColor;
- }
- & when (@variationTableInverted) {
- .ui.ui.selectable.inverted.table > tbody > tr:hover,
- .ui.inverted.table tbody tr td.selectable:hover {
- background: @selectableInvertedBackground;
- color: @selectableInvertedTextColor;
- }
- }
- /* Selectable Cell Link */
- .ui.table tbody tr td.selectable {
- padding: 0;
- }
- .ui.table tbody tr td.selectable > a:not(.ui) {
- display: block;
- color: inherit;
- padding: @cellVerticalPadding @cellHorizontalPadding;
- }
- .ui.table > tr > td.selectable,
- .ui.table > tbody > tr > td.selectable,
- .ui.selectable.table > tbody > tr,
- .ui.selectable.table > tr {
- cursor:pointer;
- }
- & when (@variationTableError) {
- /* Other States */
- .ui.ui.selectable.table tr.error:hover,
- .ui.table tr td.selectable.error:hover,
- .ui.selectable.table tr:hover td.error {
- background: @errorBackgroundHover;
- color: @errorColorHover;
- }
- }
- & when (@variationTableWarning) {
- .ui.ui.selectable.table tr.warning:hover,
- .ui.table tr td.selectable.warning:hover,
- .ui.selectable.table tr:hover td.warning {
- background: @warningBackgroundHover;
- color: @warningColorHover;
- }
- }
- & when (@variationTableActive) {
- .ui.ui.selectable.table tr.active:hover,
- .ui.table tr td.selectable.active:hover,
- .ui.selectable.table tr:hover td.active {
- background: @activeBackgroundColor;
- color: @activeColor;
- }
- }
- & when (@variationTablePositive) {
- .ui.ui.selectable.table tr.positive:hover,
- .ui.table tr td.selectable.positive:hover,
- .ui.selectable.table tr:hover td.positive {
- background: @positiveBackgroundHover;
- color: @positiveColorHover;
- }
- }
- & when (@variationTableNegative) {
- .ui.ui.selectable.table tr.negative:hover,
- .ui.table tr td.selectable.negative:hover,
- .ui.selectable.table tr:hover td.negative {
- background: @negativeBackgroundHover;
- color: @negativeColorHover;
- }
- }
-}
-
-
-& when (@variationTableAttached) {
- /*-------------------
- Attached
- --------------------*/
-
- /* Middle */
- .ui.attached.table {
- top: 0;
- bottom: 0;
- border-radius: 0;
- margin: 0 @attachedHorizontalOffset;
- width: @attachedWidth;
- max-width: @attachedWidth;
- box-shadow: @attachedBoxShadow;
- border: @attachedBorder;
- }
- .ui.attached + .ui.attached.table:not(.top) {
- border-top: none;
- }
-
- /* Top */
- .ui[class*="top attached"].table {
- bottom: 0;
- margin-bottom: 0;
- top: @attachedTopOffset;
- margin-top: @verticalMargin;
- border-radius: @borderRadius @borderRadius 0 0;
- }
- .ui.table[class*="top attached"]:first-child {
- margin-top: 0;
- }
-
- /* Bottom */
- .ui[class*="bottom attached"].table {
- bottom: 0;
- margin-top: 0;
- top: @attachedBottomOffset;
- margin-bottom: @verticalMargin;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0 0 @borderRadius @borderRadius;
- }
- .ui[class*="bottom attached"].table:last-child {
- margin-bottom: 0;
- }
-}
-
-& when (@variationTableStriped) {
- /*--------------
- Striped
- ---------------*/
-
- /* Table Striping */
- .ui.striped.table > tr:nth-child(2n),
- .ui.striped.table > tbody > tr:nth-child(2n) {
- background-color: @stripedBackground;
- }
- & when (@variationTableInverted) {
- /* Stripes */
- .ui.inverted.striped.table > tr:nth-child(2n),
- .ui.inverted.striped.table > tbody > tr:nth-child(2n) {
- background-color: @invertedStripedBackground;
- }
- }
- & when (@variationTableSelectable) {
- /* Allow striped active hover */
- .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
- background: @activeBackgroundHover;
- color: @activeColorHover;
- }
- }
-}
-
-/*--------------
- Single Line
----------------*/
-
-.ui.table[class*="single line"],
-.ui.table [class*="single line"] {
- white-space: nowrap;
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @t: @colors[@@color][text];
- @ht: @colors[@@color][hoverText];
- @l: @colors[@@color][light];
- @lh: @colors[@@color][lightHover];
- @r: @colors[@@color][ribbon];
- @b: @colors[@@color][bright];
- @bh: @colors[@@color][brightHover];
- @isDark: @colors[@@color][isDark];
- @isVeryDark: @colors[@@color][isVeryDark];
-
- .ui.@{color}.table {
- border-top: @coloredBorderSize solid @c;
- }
- & when (@variationTableInverted) {
- .ui.inverted.@{color}.table {
- background-color: @c;
- color: @white;
- }
- }
- .ui.ui.ui.ui.table tr.@{color}:not(.marked),
- .ui.ui.table td.@{color}:not(.marked) {
- & when (@stateMarkerWidth > 0) {
- box-shadow: @stateMarkerWidth 0 0 @r inset;
- }
- & when (@isDark) {
- background: @l;
- }
- & when not (@isDark) {
- background: @b;
- }
- & when (@isVeryDark) {
- color: @white;
- }
- & when not (@isVeryDark) {
- color: @t;
- }
- }
- & when (@variationTableSelectable) {
- .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
- .ui.table tr td.selectable.@{color}:not(.marked):hover,
- .ui.selectable.table tr:hover td.@{color}:not(.marked) {
- & when (@isDark) {
- background: @lh;
- }
- & when not (@isDark) {
- background: @bh;
- }
- & when (@isVeryDark) {
- color: @white;
- }
- & when not (@isVeryDark) {
- color: @ht;
- }
- }
- }
- & when (@variationTableMarked) {
- .ui.table td.marked.@{color},
- .ui.table tr.marked.@{color} {
- &.left {
- box-shadow: @coloredBorderSize 0 0 0 @c inset;
- }
- &.right {
- box-shadow: -@coloredBorderSize 0 0 0 @c inset;
- }
- }
- & when (@variationTableInverted) {
- .ui.inverted.table td.marked.@{color},
- .ui.inverted.table tr.marked.@{color} {
- &.left {
- box-shadow: @coloredBorderSize 0 0 0 @l inset;
- }
- &.right {
- box-shadow: -@coloredBorderSize 0 0 0 @l inset;
- }
- }
- }
- }
-
-})
-
-/*--------------
- Column Count
----------------*/
-
-/* Grid Based */
-.ui.one.column.table td {
- width: @oneColumn;
-}
-.ui.two.column.table td {
- width: @twoColumn;
-}
-.ui.three.column.table td {
- width: @threeColumn;
-}
-.ui.four.column.table td {
- width: @fourColumn;
-}
-.ui.five.column.table td {
- width: @fiveColumn;
-}
-.ui.six.column.table td {
- width: @sixColumn;
-}
-.ui.seven.column.table td {
- width: @sevenColumn;
-}
-.ui.eight.column.table td {
- width: @eightColumn;
-}
-.ui.nine.column.table td {
- width: @nineColumn;
-}
-.ui.ten.column.table td {
- width: @tenColumn;
-}
-.ui.eleven.column.table td {
- width: @elevenColumn;
-}
-.ui.twelve.column.table td {
- width: @twelveColumn;
-}
-.ui.thirteen.column.table td {
- width: @thirteenColumn;
-}
-.ui.fourteen.column.table td {
- width: @fourteenColumn;
-}
-.ui.fifteen.column.table td {
- width: @fifteenColumn;
-}
-.ui.sixteen.column.table td {
- width: @sixteenColumn;
-}
-
-/* Column Width */
-.ui.table th.one.wide,
-.ui.table td.one.wide {
- width: @oneWide;
-}
-.ui.table th.two.wide,
-.ui.table td.two.wide {
- width: @twoWide;
-}
-.ui.table th.three.wide,
-.ui.table td.three.wide {
- width: @threeWide;
-}
-.ui.table th.four.wide,
-.ui.table td.four.wide {
- width: @fourWide;
-}
-.ui.table th.five.wide,
-.ui.table td.five.wide {
- width: @fiveWide;
-}
-.ui.table th.six.wide,
-.ui.table td.six.wide {
- width: @sixWide;
-}
-.ui.table th.seven.wide,
-.ui.table td.seven.wide {
- width: @sevenWide;
-}
-.ui.table th.eight.wide,
-.ui.table td.eight.wide {
- width: @eightWide;
-}
-.ui.table th.nine.wide,
-.ui.table td.nine.wide {
- width: @nineWide;
-}
-.ui.table th.ten.wide,
-.ui.table td.ten.wide {
- width: @tenWide;
-}
-.ui.table th.eleven.wide,
-.ui.table td.eleven.wide {
- width: @elevenWide;
-}
-.ui.table th.twelve.wide,
-.ui.table td.twelve.wide {
- width: @twelveWide;
-}
-.ui.table th.thirteen.wide,
-.ui.table td.thirteen.wide {
- width: @thirteenWide;
-}
-.ui.table th.fourteen.wide,
-.ui.table td.fourteen.wide {
- width: @fourteenWide;
-}
-.ui.table th.fifteen.wide,
-.ui.table td.fifteen.wide {
- width: @fifteenWide;
-}
-.ui.table th.sixteen.wide,
-.ui.table td.sixteen.wide {
- width: @sixteenWide;
-}
-
-& when (@variationTableSortable) {
- /*--------------
- Sortable
- ---------------*/
-
- .ui.sortable.table > thead > tr > th {
- cursor: pointer;
- white-space: nowrap;
- border-left: @sortableBorder;
- color: @sortableColor;
- }
- .ui.sortable.table > thead > tr > th:first-child {
- border-left: none;
- }
- .ui.sortable.table thead th.sorted,
- .ui.sortable.table thead th.sorted:hover {
- user-select: none;
- }
-
- .ui.sortable.table > thead > tr > th:after {
- display: none;
- font-style: normal;
- font-weight: @normal;
- text-decoration: inherit;
- content: '';
- height: 1em;
- width: @sortableIconWidth;
- opacity: @sortableIconOpacity;
- margin: 0 0 0 @sortableIconDistance;
- font-family: @sortableIconFont;
- }
- .ui.sortable.table thead th.ascending:after {
- content: @sortableIconAscending;
- }
- .ui.sortable.table thead th.descending:after {
- content: @sortableIconDescending;
- }
-
- /* Hover */
- .ui.sortable.table th.disabled:hover {
- cursor: auto;
- color: @sortableDisabledColor;
- }
- .ui.sortable.table > thead > tr > th:hover {
- color: @sortableHoverColor;
- }
- .ui.sortable.table:not(.basic) > thead > tr > th:hover {
- background: @sortableHoverBackground;
- }
-
- /* Sorted */
- .ui.sortable.table thead th.sorted {
- color: @sortableActiveColor;
- }
- .ui.sortable.table:not(.basic) thead th.sorted {
- background: @sortableActiveBackground;
- }
- .ui.sortable.table thead th.sorted:after {
- display: inline-block;
- }
-
- /* Sorted Hover */
- .ui.sortable.table thead th.sorted:hover {
- color: @sortableActiveHoverColor;
- }
- .ui.sortable.table:not(.basic) thead th.sorted:hover {
- background: @sortableActiveHoverBackground;
- }
- & when (@variationTableInverted) {
- /* Inverted */
- .ui.inverted.sortable.table thead th.sorted {
- color: @sortableInvertedActiveColor;
- }
- .ui.inverted.sortable.table:not(.basic) thead th.sorted {
- background: @sortableInvertedActiveBackground;
- }
- .ui.inverted.sortable.table > thead > tr > th:hover {
- color: @sortableInvertedHoverColor;
- }
- .ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover {
- background: @sortableInvertedHoverBackground;
- }
- .ui.inverted.sortable.table:not(.basic) > thead > tr > th {
- border-left-color: @sortableInvertedBorderColor;
- border-right-color: @sortableInvertedBorderColor;
- }
- }
-}
-
-& when (@variationTableInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- /* Text Color */
- .ui.inverted.table {
- background: @invertedBackground;
- color: @invertedCellColor;
- border: @invertedBorder;
- }
- .ui.ui.inverted.table > thead > tr > th,
- .ui.ui.inverted.table > tbody > tr > th,
- .ui.ui.inverted.table > tfoot > tr > th,
- .ui.ui.inverted.table > tfoot > tr > td,
- .ui.ui.inverted.table > tr > th {
- background-color: @invertedHeaderBackground;
- border-color: @invertedHeaderBorderColor;
- color: @invertedHeaderColor;
- }
- .ui.inverted.table > tbody > tr > td,
- .ui.inverted.table > tfoot > tr > td,
- .ui.inverted.table > tr > td {
- border-color: @invertedCellBorderColor;
- }
-
- .ui.inverted.table tr.disabled td,
- .ui.inverted.table tr td.disabled,
- .ui.inverted.table tr.disabled:hover td,
- .ui.inverted.table tr:hover td.disabled {
- pointer-events: none;
- color: @invertedDisabledTextColor;
- }
- .ui.inverted.table tr td.disabled:not([class="disabled"]),
- .ui.inverted.table tr.disabled:not([class="disabled"]) td,
- .ui.inverted.table tr.disabled td[class]:not(.disabled),
- .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) {
- color: @disabledTextColor;
- }
- & when (@variationTableDefinition) {
- /* Definition */
- .ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child,
- .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child {
- background: @definitionPageBackground;
- }
- .ui.inverted.definition.table > tbody > tr > td:first-child
- .ui.inverted.definition.table > tfoot > tr > td:first-child,
- .ui.inverted.definition.table > tr > td:first-child {
- background: @invertedDefinitionColumnBackground;
- color: @invertedDefinitionColumnColor;
- }
- }
-}
-
-& when (@variationTableCollapsing) {
- /*--------------
- Collapsing
- ---------------*/
-
- .ui.collapsing.table {
- width: auto;
- }
-}
-
-& when (@variationTableBasic) {
- /*--------------
- Basic
- ---------------*/
-
- .ui.basic.table {
- background: @basicTableBackground;
- border: @basicTableBorder;
- box-shadow: @basicBoxShadow;
- }
- .ui.basic.table > thead,
- .ui.basic.table > tfoot {
- box-shadow: none;
- }
- .ui.basic.table > thead > tr > th,
- .ui.basic.table > tbody > tr > th,
- .ui.basic.table > tfoot > tr > th,
- .ui.basic.table > tr > th {
- background: @basicTableHeaderBackground;
- border-left: @basicTableHeaderDivider;
- }
- .ui.basic.table > tbody > tr {
- border-bottom: @basicTableCellBorder;
- }
- .ui.basic.table > tbody > tr > td,
- .ui.basic.table > tfoot > tr > td,
- .ui.basic.table >tr > td {
- background: @basicTableCellBackground;
- }
- & when (@variationTableStriped) {
- .ui.basic.striped.table > tbody > tr:nth-child(2n) {
- background-color: @basicTableStripedBackground;
- }
- }
- /* Very Basic */
- .ui[class*="very basic"].table {
- border: none;
- }
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td {
- padding: @basicTableCellPadding;
- }
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child ,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child {
- padding-left: 0;
- }
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child,
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot >tr > td:last-child {
- padding-right: 0;
- }
- .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th {
- padding-top: 0;
- }
-}
-
-& when (@variationTableCelled) {
- /*--------------
- Celled
- ---------------*/
-
- .ui.celled.table > tr > th,
- .ui.celled.table > thead > tr > th,
- .ui.celled.table > tbody > tr > th,
- .ui.celled.table > tfoot > tr > th,
- .ui.celled.table > tr > td,
- .ui.celled.table > tbody > tr > td ,
- .ui.celled.table > tfoot > tr > td {
- border-left: @cellBorder;
- }
- & when (@variationTableInverted) {
- .ui.inverted.celled.table > tbody > tr > td,
- .ui.inverted.celled.table > tr > td {
- border-left: @invertedCellBorder;
- }
- }
- .ui.celled.table > tr > th:first-child,
- .ui.celled.table > thead > tr > th:first-child,
- .ui.celled.table > tbody > tr > th:first-child,
- .ui.celled.table > tfoot > tr > th:first-child,
- .ui.celled.table > tr > td:first-child,
- .ui.celled.table > tbody > tr > td:first-child,
- .ui.celled.table > tfoot >tr > td:first-child {
- border-left: none;
- }
-}
-
-& when (@variationTablePadded) {
- /*--------------
- Padded
- ---------------*/
-
- .ui.padded.table > tr > th,
- .ui.padded.table > thead > tr > th,
- .ui.padded.table > tbody > tr > th,
- .ui.padded.table > tfoot > tr > th {
- padding-left: @paddedHorizontalPadding;
- padding-right: @paddedHorizontalPadding;
- }
- .ui.padded.table > tr > th,
- .ui.padded.table > thead > tr > th,
- .ui.padded.table > tbody > tr > th,
- .ui.padded.table > tfoot > tr > th,
- .ui.padded.table > tr > td,
- .ui.padded.table > tbody > tr > td ,
- .ui.padded.table > tfoot > tr > td {
- padding: @paddedVerticalPadding @paddedHorizontalPadding;
- }
-
- /* Very */
- .ui[class*="very padded"].table > tr > th,
- .ui[class*="very padded"].table > thead > tr > th,
- .ui[class*="very padded"].table > tbody > tr > th,
- .ui[class*="very padded"].table > tfoot > tr > th {
- padding-left: @veryPaddedHorizontalPadding;
- padding-right: @veryPaddedHorizontalPadding;
- }
- .ui[class*="very padded"].table > tr > td,
- .ui[class*="very padded"].table > tbody > tr > td ,
- .ui[class*="very padded"].table > tfoot > tr > td {
- padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
- }
-}
-
-& when (@variationTableCompact) {
- /*--------------
- Compact
- ---------------*/
-
- .ui.compact.table > tr > th,
- .ui.compact.table > thead > tr > th,
- .ui.compact.table > tbody > tr > th,
- .ui.compact.table > tfoot > tr > th {
- padding-left: @compactHorizontalPadding;
- padding-right: @compactHorizontalPadding;
- }
- .ui.compact.table > tr > td,
- .ui.compact.table > tbody > tr > td ,
- .ui.compact.table > tfoot > tr > td {
- padding: @compactVerticalPadding @compactHorizontalPadding;
- }
-
- /* Very */
- .ui[class*="very compact"].table > tr > th,
- .ui[class*="very compact"].table > thead > tr > th,
- .ui[class*="very compact"].table > tbody > tr > th,
- .ui[class*="very compact"].table > tfoot > tr > th {
- padding-left: @veryCompactHorizontalPadding;
- padding-right: @veryCompactHorizontalPadding;
- }
- .ui[class*="very compact"].table > tr > td,
- .ui[class*="very compact"].table > tbody > tr > td ,
- .ui[class*="very compact"].table > tfoot > tr > td {
- padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
- }
-}
-
-/*--------------
- Sizes
----------------*/
-
-/* Standard */
-.ui.table {
- font-size: @medium;
-}
-& when not (@variationTableSizes = false) {
- each(@variationTableSizes, {
- @s: @@value;
- .ui.@{value}.table {
- font-size: @s;
- }
- })
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/button.less b/semantic/src/definitions/elements/button.less
deleted file mode 100644
index 3e648a5..0000000
--- a/semantic/src/definitions/elements/button.less
+++ /dev/null
@@ -1,1881 +0,0 @@
-/*!
- * # Fomantic-UI - Button
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'button';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Button
-*******************************/
-
-.ui.button {
- cursor: pointer;
- display: inline-block;
-
- min-height: 1em;
-
- outline: none;
- border: none;
- vertical-align: @verticalAlign;
- background: @background;
- color: @textColor;
-
- font-family: @fontFamily;
-
- margin: 0 @horizontalMargin @verticalMargin 0;
- padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
-
- text-transform: @textTransform;
- text-shadow: @textShadow;
- font-weight: @fontWeight;
- line-height: @lineHeight;
- font-style: normal;
- text-align: center;
- text-decoration: none;
-
- border-radius: @borderRadius;
- box-shadow: @boxShadow;
-
- user-select: none;
- transition: @transition;
- will-change: @willChange;
-
- -webkit-tap-highlight-color: @tapColor;
-}
-
-
-/*******************************
- States
-*******************************/
-
-/*--------------
- Hover
----------------*/
-
-.ui.button:hover {
- background-color: @hoverBackgroundColor;
- background-image: @hoverBackgroundImage;
- box-shadow: @hoverBoxShadow;
- color: @hoverColor;
-}
-
-.ui.button:hover .icon {
- opacity: @iconHoverOpacity;
-}
-
-/*--------------
- Focus
----------------*/
-
-.ui.button:focus {
- background-color: @focusBackgroundColor;
- color: @focusColor;
- background-image: @focusBackgroundImage;
- box-shadow: @focusBoxShadow;
-}
-
-.ui.button:focus .icon {
- opacity: @iconFocusOpacity;
-}
-
-/*--------------
- Down
----------------*/
-
-.ui.button:active,
-.ui.active.button:active {
- background-color: @downBackgroundColor;
- background-image: @downBackgroundImage;
- color: @downColor;
- box-shadow: @downBoxShadow;
-}
-
-/*--------------
- Active
----------------*/
-
-.ui.active.button {
- background-color: @activeBackgroundColor;
- background-image: @activeBackgroundImage;
- box-shadow: @activeBoxShadow;
- color: @activeColor;
-}
-.ui.active.button:hover {
- background-color: @activeHoverBackgroundColor;
- background-image: @activeHoverBackgroundImage;
- color: @activeHoverColor;
-}
-.ui.active.button:active {
- background-color: @activeBackgroundColor;
- background-image: @activeBackgroundImage;
-}
-
-
-/*--------------
- Loading
----------------*/
-
-/* Specificity hack */
-.ui.loading.loading.loading.loading.loading.loading.button {
- position: relative;
- cursor: default;
- text-shadow: none !important;
- color: transparent;
- opacity: @loadingOpacity;
- pointer-events: @loadingPointerEvents;
- transition: @loadingTransition;
-}
-.ui.loading.button:before {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @invertedLoaderFillColor;
-}
-.ui.loading.button:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- border-radius: @circularRadius;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid currentColor;
- color: @invertedLoaderLineColor;
-
- box-shadow: 0 0 0 1px transparent;
-}
-& when (@variationButtonLabeledIcon){
- .ui.labeled.icon.loading.button .icon {
- background-color: transparent;
- box-shadow: none;
- }
-}
-& when (@variationButtonBasic){
- .ui.basic.loading.button:not(.inverted):before {
- border-color: @loaderFillColor;
- }
- .ui.basic.loading.button:not(.inverted):after {
- border-color: @loaderLineColor;
- }
-}
-& when (@variationButtonDisabled){
- /*-------------------
- Disabled
- --------------------*/
-
- .ui.buttons .disabled.button:not(.basic),
- .ui.disabled.button,
- .ui.button:disabled,
- .ui.disabled.button:hover,
- .ui.disabled.active.button {
- cursor: default;
- opacity: @disabledOpacity !important;
- background-image: none;
- box-shadow: none;
- pointer-events: none !important;
- }
- & when (@variationButtonBasic){
- /* Basic Group With Disabled */
- .ui.basic.buttons .ui.disabled.button {
- border-color: @disabledBorderColor;
- }
- }
-}
-
-/*******************************
- Types
-*******************************/
-& when (@variationButtonAnimated){
- /*-------------------
- Animated
- --------------------*/
-
- .ui.animated.button {
- position: relative;
- overflow: hidden;
- padding-right: 0 !important;
- vertical-align: @animatedVerticalAlign;
- z-index: @animatedZIndex;
- }
-
- .ui.animated.button .content {
- will-change: transform, opacity;
- }
- .ui.animated.button .visible.content {
- position: relative;
- margin-right: @horizontalPadding;
- }
- .ui.animated.button .hidden.content {
- position: absolute;
- width: 100%;
- }
-
- /* Horizontal */
- .ui.animated.button .visible.content,
- .ui.animated.button .hidden.content {
- transition: right @animationDuration @animationEasing 0s;
- }
- .ui.animated.button .visible.content {
- left: auto;
- right: 0;
- }
- .ui.animated.button .hidden.content {
- top: 50%;
- left: auto;
- right: -100%;
- margin-top: -(@lineHeight / 2);
- }
- .ui.animated.button:focus .visible.content,
- .ui.animated.button:hover .visible.content {
- left: auto;
- right: 200%;
- }
- .ui.animated.button:focus .hidden.content,
- .ui.animated.button:hover .hidden.content {
- left: auto;
- right: 0;
- }
-
- /* Vertical */
- .ui.vertical.animated.button .visible.content,
- .ui.vertical.animated.button .hidden.content {
- transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
- }
- .ui.vertical.animated.button .visible.content {
- transform: translateY(0%);
- right: auto;
- }
- .ui.vertical.animated.button .hidden.content {
- top: -50%;
- left: 0;
- right: auto;
- }
- .ui.vertical.animated.button:focus .visible.content,
- .ui.vertical.animated.button:hover .visible.content {
- transform: translateY(200%);
- right: auto;
- }
- .ui.vertical.animated.button:focus .hidden.content,
- .ui.vertical.animated.button:hover .hidden.content {
- top: 50%;
- right: auto;
- }
-
- /* Fade */
- .ui.fade.animated.button .visible.content,
- .ui.fade.animated.button .hidden.content {
- transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
- }
- .ui.fade.animated.button .visible.content {
- left: auto;
- right: auto;
- opacity: 1;
- transform: scale(1);
- }
- .ui.fade.animated.button .hidden.content {
- opacity: 0;
- left: 0;
- right: auto;
- transform: scale(@fadeScaleHigh);
- }
- .ui.fade.animated.button:focus .visible.content,
- .ui.fade.animated.button:hover .visible.content {
- left: auto;
- right: auto;
- opacity: 0;
- transform: scale(@fadeScaleLow);
- }
- .ui.fade.animated.button:focus .hidden.content,
- .ui.fade.animated.button:hover .hidden.content {
- left: 0;
- right: auto;
- opacity: 1;
- transform: scale(1);
- }
-}
-
-& when (@variationButtonInverted) {
- /*-------------------
- Inverted
- --------------------*/
-
- .ui.inverted.button {
- box-shadow: 0 0 0 @invertedBorderSize @white inset;
- background: transparent none;
- color: @white;
- text-shadow: none !important;
- }
-
- /* Group */
- .ui.inverted.buttons .button {
- margin: @invertedGroupButtonOffset;
- }
- .ui.inverted.buttons .button:first-child {
- margin-left: 0;
- }
- .ui.inverted.vertical.buttons .button {
- margin: @invertedVerticalGroupButtonOffset;
- }
- .ui.inverted.vertical.buttons .button:first-child {
- margin-top: 0;
- }
-
- /* States */
-
- /* Hover */
- .ui.inverted.button:hover {
- background: @white;
- box-shadow: 0 0 0 @invertedBorderSize @white inset;
- color: @hoverColor;
- }
-
- /* Active / Focus */
- .ui.inverted.button:focus,
- .ui.inverted.button.active {
- background: @white;
- box-shadow: 0 0 0 @invertedBorderSize @white inset;
- color: @focusColor;
- }
-
- /* Active Focus */
- .ui.inverted.button.active:focus {
- background: @midWhite;
- box-shadow: 0 0 0 @invertedBorderSize @midWhite inset;
- color: @focusColor;
- }
-}
-
-& when (@variationButtonLabeled) or (@variationButtonLabeledIcon){
- /*-------------------
- Labeled Button
- --------------------*/
-
- .ui.labeled.button:not(.icon) {
- display: inline-flex;
- flex-direction: row;
- background: none;
- padding: 0 !important;
- border: none;
- box-shadow: none;
- }
-
- .ui.labeled.button > .button {
- margin: 0;
- }
- .ui.labeled.button > .label {
- display: flex;
- align-items: @labeledLabelAlign;
- margin: 0 0 0 @labeledLabelBorderOffset !important;
- font-size: @labeledLabelFontSize;
- padding: @labeledLabelPadding;
- border-color: @labeledLabelBorderColor;
- }
-
- /* Tag */
- .ui.labeled.button > .tag.label:before {
- width: @labeledTagLabelSize;
- height: @labeledTagLabelSize;
- }
-
- /* Right */
- .ui.labeled.button:not([class*="left labeled"]) > .button {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- .ui.labeled.button:not([class*="left labeled"]) > .label {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
-
- /* Left Side */
- .ui[class*="left labeled"].button > .button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- .ui[class*="left labeled"].button > .label {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-}
-
-& when (@variationButtonSocial) {
- /*-------------------
- Social
- --------------------*/
-
- /* Facebook */
- .ui.facebook.button {
- background-color: @facebookColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.facebook.button:hover {
- background-color: @facebookHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.facebook.button:active {
- background-color: @facebookDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* Twitter */
- .ui.twitter.button {
- background-color: @twitterColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.twitter.button:hover {
- background-color: @twitterHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.twitter.button:active {
- background-color: @twitterDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* Google Plus */
- .ui.google.plus.button {
- background-color: @googlePlusColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.google.plus.button:hover {
- background-color: @googlePlusHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.google.plus.button:active {
- background-color: @googlePlusDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* Linked In */
- .ui.linkedin.button {
- background-color: @linkedInColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.linkedin.button:hover {
- background-color: @linkedInHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.linkedin.button:active {
- background-color: @linkedInDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* YouTube */
- .ui.youtube.button {
- background-color: @youtubeColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.youtube.button:hover {
- background-color: @youtubeHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.youtube.button:active {
- background-color: @youtubeDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* Instagram */
- .ui.instagram.button {
- background-color: @instagramColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.instagram.button:hover {
- background-color: @instagramHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.instagram.button:active {
- background-color: @instagramDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* Pinterest */
- .ui.pinterest.button {
- background-color: @pinterestColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.pinterest.button:hover {
- background-color: @pinterestHoverColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
- .ui.pinterest.button:active {
- background-color: @pinterestDownColor;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- }
-
- /* VK */
- .ui.vk.button {
- background-color: @vkColor;
- color: @white;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.vk.button:hover {
- background-color: @vkHoverColor;
- color: @white;
- }
- .ui.vk.button:active {
- background-color: @vkDownColor;
- color: @white;
- }
-
- /* WhatsApp */
- .ui.whatsapp.button {
- background-color: @whatsAppColor;
- color: @white;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.whatsapp.button:hover {
- background-color: @whatsAppHoverColor;
- color: @white;
- }
- .ui.whatsapp.button:active {
- background-color: @whatsAppDownColor;
- color: @white;
- }
-
- /* Telegram */
- .ui.telegram.button {
- background-color: @telegramColor;
- color: @white;
- background-image: @coloredBackgroundImage;
- box-shadow: @coloredBoxShadow;
- }
- .ui.telegram.button:hover {
- background-color: @telegramHoverColor;
- color: @white;
- }
- .ui.telegram.button:active {
- background-color: @telegramDownColor;
- color: @white;
- }
-}
-
-/*--------------
- Icon
----------------*/
-
-.ui.button > .icon:not(.button) {
- height: @iconHeight;
- opacity: @iconOpacity;
- transition: @iconTransition;
- color: @iconColor;
-}
-
-.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
-.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
- margin: @iconMargin;
- vertical-align: @iconVerticalAlign;
-}
-.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
- vertical-align: @iconVerticalAlign;
-}
-.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
- margin: @rightIconMargin;
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationButtonFloated) {
- /*-------------------
- Floated
- --------------------*/
-
- .ui[class*="left floated"].buttons,
- .ui[class*="left floated"].button {
- float: left;
- margin-left: 0;
- margin-right: @floatedMargin;
- }
-
- .ui[class*="right floated"].buttons,
- .ui[class*="right floated"].button {
- float: right;
- margin-right: 0;
- margin-left: @floatedMargin;
- }
-}
-
-& when (@variationButtonCompact) {
- /*-------------------
- Compact
- --------------------*/
-
- .ui.compact.buttons .button,
- .ui.compact.button {
- padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
- }
-
- .ui.compact.icon.buttons .button,
- .ui.compact.icon.button {
- padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );
- }
-
- .ui.compact.labeled.icon.buttons .button,
- .ui.compact.labeled.icon.button {
- padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );
- }
-
- .ui.compact.labeled.icon.buttons .button > .icon,
- .ui.compact.labeled.icon.button > .icon {
- padding: @compactVerticalPadding 0 @compactVerticalPadding 0;
- }
-}
-/*-------------------
- Sizes
---------------------*/
-
-.ui.buttons .button,
-.ui.buttons .or,
-.ui.button {
- font-size: @medium;
-}
-
-& when not (@variationButtonSizes = false) {
- each(@variationButtonSizes, {
- @s: @@value;
- .ui.@{value}.buttons .dropdown,
- .ui.@{value}.buttons .dropdown .menu > .item,
- .ui.@{value}.buttons .button,
- .ui.@{value}.buttons .or,
- .ui.ui.ui.ui.@{value}.button {
- font-size: @s;
- }
- })
-}
-
-/*--------------
- Icon Only
----------------*/
-
-.ui.icon.buttons .button,
-.ui.icon.button:not(.animated):not(.compact) {
- padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset );
-}
-.ui.animated.icon.button > .content > .icon,
-.ui.icon.buttons .button > .icon,
-.ui.icon.button > .icon {
- opacity: @iconButtonOpacity;
- margin: 0 !important;
- vertical-align: top;
-}
-.ui.animated.button > .content > .icon {
- vertical-align: top;
-}
-
-& when (@variationButtonBasic) {
- /*-------------------
- Basic
- --------------------*/
-
- .ui.basic.buttons .button,
- .ui.basic.button {
- background: @basicBackground;
- color: @basicTextColor;
- font-weight: @basicFontWeight;
- border-radius: @basicBorderRadius;
- text-transform: @basicTextTransform;
- text-shadow: none !important;
- box-shadow: @basicBoxShadow;
- }
-
- .ui.basic.buttons {
- box-shadow: @basicGroupBoxShadow;
- border: @basicGroupBorder;
- border-radius: @borderRadius;
- }
-
- .ui.basic.buttons .button {
- border-radius: 0;
- }
-
- .ui.basic.buttons .button:hover,
- .ui.basic.button:hover {
- background: @basicHoverBackground;
- color: @basicHoverTextColor;
- box-shadow: @basicHoverBoxShadow;
- }
-
- .ui.basic.buttons .button:focus,
- .ui.basic.button:focus {
- background: @basicFocusBackground;
- color: @basicFocusTextColor;
- box-shadow: @basicFocusBoxShadow;
- }
-
- .ui.basic.buttons .button:active,
- .ui.basic.button:active {
- background: @basicDownBackground;
- color: @basicDownTextColor;
- box-shadow: @basicDownBoxShadow;
- }
-
- .ui.basic.buttons .active.button,
- .ui.basic.active.button {
- background: @basicActiveBackground;
- box-shadow: @basicActiveBoxShadow;
- color: @basicActiveTextColor;
- }
-
- .ui.basic.buttons .active.button:hover,
- .ui.basic.active.button:hover {
- background-color: @transparentBlack;
- }
-
- /* Vertical */
- .ui.basic.buttons .button:hover {
- box-shadow: @basicHoverBoxShadow inset;
- }
-
- .ui.basic.buttons .button:active {
- box-shadow: @basicDownBoxShadow inset;
- }
-
- .ui.basic.buttons .active.button {
- box-shadow: @basicActiveBoxShadow;
- }
- & when (@variationButtonInverted) {
- /* Standard Basic Inverted */
-
- .ui.basic.inverted.buttons .button,
- .ui.basic.inverted.button {
- background-color: transparent;
- color: @offWhite;
- box-shadow: @basicInvertedBoxShadow;
- }
-
- .ui.basic.inverted.buttons .button:hover,
- .ui.basic.inverted.button:hover {
- color: @white;
- box-shadow: @basicInvertedHoverBoxShadow;
- }
-
- .ui.basic.inverted.buttons .button:focus,
- .ui.basic.inverted.button:focus {
- color: @white;
- box-shadow: @basicInvertedFocusBoxShadow;
- }
-
- .ui.basic.inverted.buttons .button:active,
- .ui.basic.inverted.button:active {
- background-color: @transparentWhite;
- color: @white;
- box-shadow: @basicInvertedDownBoxShadow;
- }
-
- .ui.basic.inverted.buttons .active.button,
- .ui.basic.inverted.active.button {
- background-color: @transparentWhite;
- color: @invertedTextColor;
- text-shadow: @invertedTextShadow;
- box-shadow: @basicInvertedActiveBoxShadow;
- }
-
- .ui.basic.inverted.buttons .active.button:hover,
- .ui.basic.inverted.active.button:hover {
- background-color: @strongTransparentWhite;
- box-shadow: @basicInvertedHoverBoxShadow;
- }
- }
-
- & when (@variationButtonBasic) {
- /* Basic Group */
- .ui.basic.buttons .button {
- border-left: @basicGroupBorder;
- box-shadow: none;
- }
-
- .ui.basic.vertical.buttons .button {
- border-left: none;
- border-left-width: 0;
- border-top: @basicGroupBorder;
- }
-
- .ui.basic.vertical.buttons .button:first-child {
- border-top-width: 0;
- }
- }
-}
-
-& when (@variationButtonTertiary) {
- /*-------------------
- Tertiary
- --------------------*/
-
- /* Overline Mixin */
- .ui.tertiary.button {
- transition: color @defaultDuration @defaultEasing !important;
- border-radius: 0;
- margin: (@verticalPadding - @tertiaryLinePadding)
- (@horizontalMargin)
- (@verticalPadding + @shadowOffset + @verticalMargin - @tertiaryLinePadding)
- 0 !important;
- padding: @tertiaryLinePadding !important;
-
- & when (@tertiaryWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor;
- }
-
- & when (@tertiaryWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor;
- }
-
- & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){
- box-shadow: none;
- }
-
- color: @tertiaryTextColor;
- background: @tertiaryBackgroundColor;
- }
-
- .ui.tertiary.button:hover {
-
- & when (@tertiaryHoverWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor;
- }
-
- & when (@tertiaryHoverWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor;
- }
-
- & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) {
- box-shadow: none;
- }
-
- color: @tertiaryHoverColor;
- background: @tertiaryHoverBackgroundColor;
- }
-
- .ui.tertiary.button:focus {
- & when (@tertiaryFocusWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor;
- }
-
- & when (@tertiaryFocusWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor;
- }
-
- & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false){
- box-shadow: none;
- }
-
- color: @tertiaryFocusColor;
- background: @tertiaryFocusBackgroundColor;
- }
-
- .ui.tertiary.button:active {
- & when (@tertiaryActiveWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor;
- border-radius: @borderRadius @borderRadius 0 0;
- }
-
- & when (@tertiaryActiveWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor;
- border-radius: 0 0 @borderRadius @borderRadius;
- }
-
- & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false){
- box-shadow: none;
- border-radius: 0;
- }
-
- color: @tertiaryActiveColor;
- background: @tertiaryActiveBackgroundColor;
- }
-}
-
-& when (@variationButtonLabeledIcon) {
- /*--------------
- Labeled Icon
- ---------------*/
-
- .ui.labeled.icon.buttons .button,
- .ui.labeled.icon.button {
- position: relative;
- padding-left: @labeledIconPadding !important;
- padding-right: @horizontalPadding !important;
- }
-
- /* Left Labeled */
- .ui.labeled.icon.buttons > .button > .icon,
- .ui.labeled.icon.button > .icon {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- line-height: 1;
- border-radius: 0;
- border-top-left-radius: inherit;
- border-bottom-left-radius: inherit;
- text-align: center;
- animation: none;
- padding: @verticalPadding 0 @verticalPadding 0;
-
- margin: @labeledIconMargin;
- width: @labeledIconWidth;
- background-color: @labeledIconBackgroundColor;
- color: @labeledIconColor;
- box-shadow: @labeledIconLeftShadow;
- }
-
- /* Right Labeled */
- .ui[class*="right labeled"].icon.button {
- padding-right: @labeledIconPadding !important;
- padding-left: @horizontalPadding !important;
- }
-
- .ui[class*="right labeled"].icon.button > .icon {
- left: auto;
- right: 0;
- border-radius: 0;
- border-top-right-radius: inherit;
- border-bottom-right-radius: inherit;
- box-shadow: @labeledIconRightShadow;
- }
-
-
- .ui.labeled.icon.buttons > .button > .icon:before,
- .ui.labeled.icon.button > .icon:before,
- .ui.labeled.icon.buttons > .button > .icon:after,
- .ui.labeled.icon.button > .icon:after {
- display: block;
- position: relative;
- width: 100%;
- top: 0;
- text-align: center;
- }
-
- .ui.labeled.icon.buttons .button > .icon {
- border-radius: 0;
- }
-
- .ui.labeled.icon.buttons .button:first-child > .icon {
- border-top-left-radius: @borderRadius;
- border-bottom-left-radius: @borderRadius;
- }
-
- .ui.labeled.icon.buttons .button:last-child > .icon {
- border-top-right-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
- }
-
- .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
- border-radius: 0;
- border-top-left-radius: @borderRadius;
- }
-
- .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
- border-radius: 0;
- border-bottom-left-radius: @borderRadius;
- }
-
- /* Loading Icon in Labeled Button */
- .ui.labeled.icon.button > .loading.icon:before {
- animation: loader 2s linear infinite;
- }
-}
-
-& when (@variationButtonToggle) {
- /*--------------
- Toggle
- ---------------*/
-
- /* Toggle (Modifies active state to give affordances) */
- .ui.toggle.buttons .active.button,
- .ui.buttons .button.toggle.active,
- .ui.button.toggle.active {
- background-color: @toggleBackgroundColor;
- box-shadow: none;
- text-shadow: @toggleTextShadow;
- color: @toggleColor;
- }
-
- .ui.button.toggle.active:hover {
- background-color: @toggleHoverBackgroundColor;
- text-shadow: @toggleHoverTextShadow;
- color: @toggleHoverColor;
- }
-}
-
-& when (@variationButtonCircular) {
- /*--------------
- Circular
- ---------------*/
-
- .ui.circular.button {
- border-radius: @circularBorderRadius;
- }
-
- .ui.circular.button > .icon {
- width: @circularIconWidth;
- vertical-align: baseline;
- }
-}
-
-& when (@variationButtonOr) {
- /*-------------------
- Or Buttons
- --------------------*/
-
- .ui.buttons .or {
- position: relative;
- width: @orGap;
- height: @orHeight;
- z-index: @orZIndex;
- }
-
- .ui.buttons .or:before {
- position: absolute;
- text-align: center;
- border-radius: @circularRadius;
-
- content: @orText;
- top: 50%;
- left: 50%;
- background-color: @orBackgroundColor;
- text-shadow: @orTextShadow;
-
- margin-top: @orVerticalOffset;
- margin-left: @orHorizontalOffset;
-
- width: @orCircleSize;
- height: @orCircleSize;
-
- line-height: @orLineHeight;
- color: @orTextColor;
-
- font-style: @orTextStyle;
- font-weight: @orTextWeight;
-
- box-shadow: @orBoxShadow;
- }
-
- .ui.buttons .or[data-text]:before {
- content: attr(data-text);
- }
-
- /* Fluid Or */
- .ui.fluid.buttons .or {
- width: 0 !important;
- }
-
- .ui.fluid.buttons .or:after {
- display: none;
- }
-
-}
-
-& when (@variationButtonAttached) {
- /*-------------------
- Attached
- --------------------*/
-
-
- /* Singular */
- .ui.attached.button {
- position: relative;
- display: block;
- margin: 0;
- border-radius: 0;
- box-shadow: @attachedBoxShadow;
- }
-
- /* Top / Bottom */
- .ui.attached.top.button {
- border-radius: @borderRadius @borderRadius 0 0;
- }
-
- .ui.attached.bottom.button {
- border-radius: 0 0 @borderRadius @borderRadius;
- }
-
- /* Left / Right */
- .ui.left.attached.button {
- display: inline-block;
- border-left: none;
- text-align: right;
-
- padding-right: @attachedHorizontalPadding;
- border-radius: @borderRadius 0 0 @borderRadius;
- }
-
- .ui.right.attached.button {
- display: inline-block;
- text-align: left;
- padding-left: @attachedHorizontalPadding;
- border-radius: 0 @borderRadius @borderRadius 0;
- }
-
- /* Plural */
- .ui.attached.buttons {
- position: relative;
- display: flex;
- border-radius: 0;
- width: auto !important;
- z-index: @attachedZIndex;
- margin-left: @attachedOffset;
- margin-right: @attachedOffset;
- }
-
- .ui.attached.buttons .button {
- margin: 0;
- }
-
- .ui.attached.buttons .button:first-child {
- border-radius: 0;
- }
-
- .ui.attached.buttons .button:last-child {
- border-radius: 0;
- }
-
- /* Top / Bottom */
- .ui[class*="top attached"].buttons {
- margin-bottom: @attachedOffset;
- border-radius: @borderRadius @borderRadius 0 0;
- }
-
- .ui[class*="top attached"].buttons .button:first-child {
- border-radius: @borderRadius 0 0 0;
- }
-
- .ui[class*="top attached"].buttons .button:last-child {
- border-radius: 0 @borderRadius 0 0;
- }
-
- .ui[class*="bottom attached"].buttons {
- margin-top: @attachedOffset;
- border-radius: 0 0 @borderRadius @borderRadius;
- }
-
- .ui[class*="bottom attached"].buttons .button:first-child {
- border-radius: 0 0 0 @borderRadius;
- }
-
- .ui[class*="bottom attached"].buttons .button:last-child {
- border-radius: 0 0 @borderRadius 0;
- }
-
- /* Left / Right */
- .ui[class*="left attached"].buttons {
- display: inline-flex;
- margin-right: 0;
- margin-left: @attachedOffset;
- border-radius: 0 @borderRadius @borderRadius 0;
- }
-
- .ui[class*="left attached"].buttons .button:first-child {
- margin-left: @attachedOffset;
- border-radius: 0 @borderRadius 0 0;
- }
-
- .ui[class*="left attached"].buttons .button:last-child {
- margin-left: @attachedOffset;
- border-radius: 0 0 @borderRadius 0;
- }
-
- .ui[class*="right attached"].buttons {
- display: inline-flex;
- margin-left: 0;
- margin-right: @attachedOffset;
- border-radius: @borderRadius 0 0 @borderRadius;
- }
-
- .ui[class*="right attached"].buttons .button:first-child {
- margin-left: @attachedOffset;
- border-radius: @borderRadius 0 0 0;
- }
-
- .ui[class*="right attached"].buttons .button:last-child {
- margin-left: @attachedOffset;
- border-radius: 0 0 0 @borderRadius;
- }
-}
-
-& when (@variationButtonFluid) {
- /*-------------------
- Fluid
- --------------------*/
-
- .ui.fluid.buttons,
- .ui.fluid.button {
- width: 100%;
- }
-
- .ui.fluid.button {
- display: block;
- }
-
- .ui.two.buttons {
- width: 100%;
- }
-
- .ui.two.buttons > .button {
- width: 50%;
- }
-
- .ui.three.buttons {
- width: 100%;
- }
-
- .ui.three.buttons > .button {
- width: 33.333%;
- }
-
- .ui.four.buttons {
- width: 100%;
- }
-
- .ui.four.buttons > .button {
- width: 25%;
- }
-
- .ui.five.buttons {
- width: 100%;
- }
-
- .ui.five.buttons > .button {
- width: 20%;
- }
-
- .ui.six.buttons {
- width: 100%;
- }
-
- .ui.six.buttons > .button {
- width: 16.666%;
- }
-
- .ui.seven.buttons {
- width: 100%;
- }
-
- .ui.seven.buttons > .button {
- width: 14.285%;
- }
-
- .ui.eight.buttons {
- width: 100%;
- }
-
- .ui.eight.buttons > .button {
- width: 12.500%;
- }
-
- .ui.nine.buttons {
- width: 100%;
- }
-
- .ui.nine.buttons > .button {
- width: 11.11%;
- }
-
- .ui.ten.buttons {
- width: 100%;
- }
-
- .ui.ten.buttons > .button {
- width: 10%;
- }
-
- .ui.eleven.buttons {
- width: 100%;
- }
-
- .ui.eleven.buttons > .button {
- width: 9.09%;
- }
-
- .ui.twelve.buttons {
- width: 100%;
- }
-
- .ui.twelve.buttons > .button {
- width: 8.3333%;
- }
-
- /* Fluid Vertical Buttons */
- .ui.fluid.vertical.buttons,
- .ui.fluid.vertical.buttons > .button {
- display: flex;
- width: auto;
- justify-content: center;
- }
-
- .ui.two.vertical.buttons > .button {
- height: 50%;
- }
-
- .ui.three.vertical.buttons > .button {
- height: 33.333%;
- }
-
- .ui.four.vertical.buttons > .button {
- height: 25%;
- }
-
- .ui.five.vertical.buttons > .button {
- height: 20%;
- }
-
- .ui.six.vertical.buttons > .button {
- height: 16.666%;
- }
-
- .ui.seven.vertical.buttons > .button {
- height: 14.285%;
- }
-
- .ui.eight.vertical.buttons > .button {
- height: 12.500%;
- }
-
- .ui.nine.vertical.buttons > .button {
- height: 11.11%;
- }
-
- .ui.ten.vertical.buttons > .button {
- height: 10%;
- }
-
- .ui.eleven.vertical.buttons > .button {
- height: 9.09%;
- }
-
- .ui.twelve.vertical.buttons > .button {
- height: 8.3333%;
- }
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @h: @colors[@@color][hover];
- @f: @colors[@@color][focus];
- @d: @colors[@@color][down];
- @a: @colors[@@color][active];
- @t: @colors[@@color][text];
- @s: @colors[@@color][shadow];
- @l: @colors[@@color][light];
- @lh: @colors[@@color][lightHover];
- @lf: @colors[@@color][lightFocus];
- @ld: @colors[@@color][lightDown];
- @la: @colors[@@color][lightActive];
- @lt: @colors[@@color][lightText];
- @ls: @colors[@@color][lightShadow];
- @ty: @colors[@@color][tertiary];
- @tyh: @colors[@@color][tertiaryHover];
- @tyf: @colors[@@color][tertiaryFocus];
- @tya: @colors[@@color][tertiaryActive];
- @isDark: @colors[@@color][isDark];
- @isVeryDark: @colors[@@color][isVeryDark];
-
- .ui.@{color}.buttons .button,
- .ui.@{color}.button {
- background-color: @c;
- color: @t;
- text-shadow: @s;
- background-image: @coloredBackgroundImage;
- }
- .ui.@{color}.button {
- box-shadow: @coloredBoxShadow;
- }
- .ui.@{color}.buttons .button:hover,
- .ui.@{color}.button:hover {
- background-color: @h;
- color: @t;
- text-shadow: @s;
- }
- .ui.@{color}.buttons .button:focus,
- .ui.@{color}.button:focus {
- background-color: @f;
- color: @t;
- text-shadow: @s;
- }
- .ui.@{color}.buttons .button:active,
- .ui.@{color}.button:active {
- background-color: @d;
- color: @t;
- text-shadow: @s;
- }
- .ui.@{color}.buttons .active.button,
- .ui.@{color}.buttons .active.button:active,
- .ui.@{color}.active.button,
- .ui.@{color}.button .active.button:active {
- background-color: @a;
- color: @t;
- text-shadow: @s;
- }
-
- & when (@variationButtonBasic) {
- /* Basic */
- .ui.basic.@{color}.buttons .button,
- .ui.basic.@{color}.button {
- background: transparent;
- box-shadow: 0 0 0 @basicBorderSize @c inset ;
- color: @c ;
- }
- .ui.basic.@{color}.buttons .button:hover,
- .ui.basic.@{color}.button:hover {
- background: transparent ;
- box-shadow: 0 0 0 @basicColoredBorderSize @h inset ;
- color: @h ;
- }
- .ui.basic.@{color}.buttons .button:focus,
- .ui.basic.@{color}.button:focus {
- background: transparent ;
- box-shadow: 0 0 0 @basicColoredBorderSize @f inset ;
- color: @h ;
- }
- .ui.basic.@{color}.buttons .active.button,
- .ui.basic.@{color}.active.button {
- background: transparent ;
- box-shadow: 0 0 0 @basicColoredBorderSize @a inset ;
- color: @d ;
- }
- .ui.basic.@{color}.buttons .button:active,
- .ui.basic.@{color}.button:active {
- box-shadow: 0 0 0 @basicColoredBorderSize @d inset ;
- color: @d ;
- }
-
- .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
- }
- }
- & when (@variationButtonInverted) {
- /* Inverted */
- .ui.inverted.@{color}.buttons .button,
- .ui.inverted.@{color}.button {
- background-color: transparent;
-
- & when (@isDark) {
- box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset ;
- color: @invertedTextColor;
- }
-
- & when not (@isDark) {
- box-shadow: 0 0 0 @invertedBorderSize @l inset ;
- color: @l;
- }
- }
- .ui.inverted.@{color}.buttons .button:hover,
- .ui.inverted.@{color}.button:hover,
- .ui.inverted.@{color}.buttons .button:focus,
- .ui.inverted.@{color}.button:focus,
- .ui.inverted.@{color}.buttons .button.active,
- .ui.inverted.@{color}.button.active,
- .ui.inverted.@{color}.buttons .button:active,
- .ui.inverted.@{color}.button:active {
- box-shadow: none ;
- color: @lt;
- }
- .ui.inverted.@{color}.buttons .button:hover,
- .ui.inverted.@{color}.button:hover {
- background-color: @lh;
- }
- .ui.inverted.@{color}.buttons .button:focus,
- .ui.inverted.@{color}.button:focus {
- background-color: @lf;
- }
- .ui.inverted.@{color}.buttons .active.button,
- .ui.inverted.@{color}.active.button {
- background-color: @la;
- }
- .ui.inverted.@{color}.buttons .button:active,
- .ui.inverted.@{color}.button:active {
- background-color: @ld;
- }
-
- /* Inverted Basic */
- .ui.inverted.@{color}.basic.buttons .button,
- .ui.inverted.@{color}.buttons .basic.button,
- .ui.inverted.@{color}.basic.button {
- background-color: transparent;
- box-shadow: @basicInvertedBoxShadow ;
- color: @white ;
- }
- .ui.inverted.@{color}.basic.buttons .button:hover,
- .ui.inverted.@{color}.buttons .basic.button:hover,
- .ui.inverted.@{color}.basic.button:hover {
- box-shadow: 0 0 0 @invertedBorderSize @lh inset ;
-
- & when (@isDark) {
- color: @white ;
- }
-
- & when not (@isDark) {
- color: @l ;
- }
- }
- .ui.inverted.@{color}.basic.buttons .button:focus,
- .ui.inverted.@{color}.basic.buttons .button:focus,
- .ui.inverted.@{color}.basic.button:focus {
- box-shadow: 0 0 0 @invertedBorderSize @lf inset ;
- color: @l ;
- }
- .ui.inverted.@{color}.basic.buttons .active.button,
- .ui.inverted.@{color}.buttons .basic.active.button,
- .ui.inverted.@{color}.basic.active.button {
- box-shadow: 0 0 0 @invertedBorderSize @la inset ;
-
- & when (@isDark) {
- color: @white ;
- }
-
- & when not (@isDark) {
- color: @l ;
- }
- }
- & when (@variationButtonBasic) {
- .ui.inverted.@{color}.basic.buttons .button:active,
- .ui.inverted.@{color}.buttons .basic.button:active,
- .ui.inverted.@{color}.basic.button:active {
- box-shadow: 0 0 0 @invertedBorderSize @ld inset;
-
- & when (@isDark) {
- color: @white;
- }
-
- & when not (@isDark) {
- color: @l;
- }
- }
- }
- }
-
- & when (@variationButtonTertiary) {
- /* Tertiary */
-
- .ui.tertiary.@{color}.buttons .button,
- .ui.tertiary.@{color}.buttons .tertiary.button,
- .ui.tertiary.@{color}.button {
- background: transparent;
-
-
-
- & when (@tertiaryWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @ty;
- }
-
- & when (@tertiaryWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @ty;
- }
-
- & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){
- box-shadow: none;
- }
-
- color: @c;
- }
-
- .ui.tertiary.@{color}.buttons .button:hover,
- .ui.tertiary.@{color}.buttons button:hover,
- .ui.tertiary.@{color}.button:hover {
-
-
-
- & when (@tertiaryHoverWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh;
- }
-
- & when (@tertiaryHoverWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tyh;
- }
-
- & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) {
- box-shadow: none;
- }
-
-
- color: @tyh;
- }
-
- .ui.tertiary.@{color}.buttons .button:focus,
- .ui.tertiary.@{color}.buttons .tertiary.button:focus,
- .ui.tertiary.@{color}.button:focus {
-
-
-
-
- & when (@tertiaryFocusWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tyf;
- }
-
- & when (@tertiaryFocusWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tyf;
- }
-
- & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) {
- box-shadow: none;
- }
-
-
- color: @tyf;
- }
-
- .ui.tertiary.@{color}.buttons .active.button,
- .ui.tertiary.@{color}.buttons .tertiary.active.button,
- .ui.tertiary.@{color}.active.button,
- .ui.tertiary.@{color}.buttons .button:active,
- .ui.tertiary.@{color}.buttons .tertiary.button:active,
- .ui.tertiary.@{color}.button:active {
-
-
-
- & when (@tertiaryActiveWithUnderline = true) {
- box-shadow: inset 0 -@tertiaryLineHeight 0 @tya;
- }
-
- & when (@tertiaryActiveWithOverline = true) {
- box-shadow: inset 0 @tertiaryLineHeight 0 @tya;
- }
-
- & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) {
- box-shadow: none;
- }
-
- color: @a;
- }
- }
-})
-
-.addConsequence(@consequence) {
-
- @_backgroundColor: "@{consequence}Color";
- @_backgroundColorHover: "@{consequence}ColorHover";
- @_backgroundColorFocus: "@{consequence}ColorFocus";
- @_backgroundColorDown: "@{consequence}ColorDown";
- @_backgroundColorActive: "@{consequence}ColorActive";
- @_textColor: "@{consequence}TextColor";
- @_textShadow: "@{consequence}TextShadow";
-
- /* Standard */
- .ui.@{consequence}.buttons .button,
- .ui.@{consequence}.button {
- background-color: @@_backgroundColor;
- color: @@_textColor;
- text-shadow: @@_textShadow;
- background-image: @coloredBackgroundImage;
- }
- .ui.@{consequence}.button {
- box-shadow: @coloredBoxShadow;
- }
- .ui.@{consequence}.buttons .button:hover,
- .ui.@{consequence}.button:hover {
- background-color: @@_backgroundColorHover;
- color: @@_textColor;
- text-shadow: @@_textShadow;
- }
- .ui.@{consequence}.buttons .button:focus,
- .ui.@{consequence}.button:focus {
- background-color: @@_backgroundColorFocus;
- color: @@_textColor;
- text-shadow: @@_textShadow;
- }
- .ui.@{consequence}.buttons .button:active,
- .ui.@{consequence}.button:active {
- background-color: @@_backgroundColorDown;
- color: @@_textColor;
- text-shadow: @@_textShadow;
- }
- .ui.@{consequence}.buttons .active.button,
- .ui.@{consequence}.buttons .active.button:active,
- .ui.@{consequence}.active.button,
- .ui.@{consequence}.button .active.button:active {
- background-color: @@_backgroundColorActive;
- color: @@_textColor;
- text-shadow: @@_textShadow;
- }
- & when (@variationButtonBasic) {
- /* Basic */
- .ui.basic.@{consequence}.buttons .button,
- .ui.basic.@{consequence}.button {
- background: transparent;
- box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset;
- color: @@_backgroundColor;
- }
- .ui.basic.@{consequence}.buttons .button:hover,
- .ui.basic.@{consequence}.button:hover {
- background: transparent;
- box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset;
- color: @@_backgroundColorHover;
- }
- .ui.basic.@{consequence}.buttons .button:focus,
- .ui.basic.@{consequence}.button:focus {
- background: transparent;
- box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset;
- color: @@_backgroundColorHover;
- }
- .ui.basic.@{consequence}.buttons .active.button,
- .ui.basic.@{consequence}.active.button {
- background: transparent;
- box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset;
- color: @@_backgroundColorDown;
- }
- .ui.basic.@{consequence}.buttons .button:active,
- .ui.basic.@{consequence}.button:active {
- box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
- color: @@_backgroundColorDown;
- }
- .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
- margin-left: -@basicColoredBorderSize;
- }
- }
-}
-
-/*---------------
- Positive
-----------------*/
-
-.addConsequence(positive);
-
-/*---------------
- Negative
-----------------*/
-
-.addConsequence(negative);
-
-& when (@variationButtonGroups) {
- /*******************************
- Groups
- *******************************/
-
- .ui.buttons {
- display: inline-flex;
- flex-direction: row;
- font-size: 0;
- vertical-align: baseline;
- margin: @verticalMargin @horizontalMargin 0 0;
- }
-
- .ui.buttons:not(.basic):not(.inverted) {
- box-shadow: @groupBoxShadow;
- }
-
- /* Clearfix */
- .ui.buttons:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
-
- /* Standard Group */
- .ui.buttons .button {
- flex: 1 0 auto;
- border-radius: 0;
- margin: @groupButtonOffset;
- }
-
- .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
- box-shadow: @groupButtonBoxShadow;
- }
-
- .ui.buttons .button:first-child {
- border-left: none;
- margin-left: 0;
- border-top-left-radius: @borderRadius;
- border-bottom-left-radius: @borderRadius;
- }
-
- .ui.buttons .button:last-child {
- border-top-right-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
- }
-
- /* Vertical Style */
- .ui.vertical.buttons {
- display: inline-flex;
- flex-direction: column;
- }
-
- .ui.vertical.buttons .button {
- display: block;
- float: none;
- width: 100%;
- margin: @verticalGroupOffset;
- box-shadow: @verticalBoxShadow;
- border-radius: 0;
- }
-
- .ui.vertical.buttons .button:first-child {
- border-top-left-radius: @borderRadius;
- border-top-right-radius: @borderRadius;
- }
-
- .ui.vertical.buttons .button:last-child {
- margin-bottom: 0;
- border-bottom-left-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
- }
-
- .ui.vertical.buttons .button:only-child {
- border-radius: @borderRadius;
- }
-}
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/container.less b/semantic/src/definitions/elements/container.less
deleted file mode 100644
index 26f1858..0000000
--- a/semantic/src/definitions/elements/container.less
+++ /dev/null
@@ -1,160 +0,0 @@
-/*!
- * # Fomantic-UI - Container
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'container';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Container
-*******************************/
-
-/* All Sizes */
-.ui.container {
- display: block;
- max-width: @maxWidth;
-}
-
-/* Mobile */
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.ui.ui.container:not(.fluid) {
- width: @mobileWidth;
- margin-left: @mobileGutter;
- margin-right: @mobileGutter;
- }
- & when (@variationContainerGrid) or (@variationContainerRelaxed) {
- .ui.ui.ui.grid.container {
- width: @mobileGridWidth;
- }
- & when (@variationContainerRelaxed) {
- .ui.ui.ui.relaxed.grid.container {
- width: @mobileRelaxedGridWidth;
- }
- .ui.ui.ui.very.relaxed.grid.container {
- width: @mobileVeryRelaxedGridWidth;
- }
- }
- }
-}
-
-/* Tablet */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.ui.ui.container:not(.fluid) {
- width: @tabletWidth;
- margin-left: @tabletGutter;
- margin-right: @tabletGutter;
- }
- & when (@variationContainerGrid) or (@variationContainerRelaxed) {
- .ui.ui.ui.grid.container {
- width: @tabletGridWidth;
- }
- & when (@variationContainerRelaxed) {
- .ui.ui.ui.relaxed.grid.container {
- width: @tabletRelaxedGridWidth;
- }
- .ui.ui.ui.very.relaxed.grid.container {
- width: @tabletVeryRelaxedGridWidth;
- }
- }
- }
-}
-
-/* Small Monitor */
-@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
- .ui.ui.ui.container:not(.fluid) {
- width: @computerWidth;
- margin-left: @computerGutter;
- margin-right: @computerGutter;
- }
- & when (@variationContainerGrid) or (@variationContainerRelaxed) {
- .ui.ui.ui.grid.container {
- width: @computerGridWidth;
- }
- & when (@variationContainerRelaxed) {
- .ui.ui.ui.relaxed.grid.container {
- width: @computerRelaxedGridWidth;
- }
- .ui.ui.ui.very.relaxed.grid.container {
- width: @computerVeryRelaxedGridWidth;
- }
- }
- }
-}
-
-/* Large Monitor */
-@media only screen and (min-width: @largeMonitorBreakpoint) {
- .ui.ui.ui.container:not(.fluid) {
- width: @largeMonitorWidth;
- margin-left: @largeMonitorGutter;
- margin-right: @largeMonitorGutter;
- }
- & when (@variationContainerGrid) or (@variationContainerRelaxed) {
- .ui.ui.ui.grid.container {
- width: @largeMonitorGridWidth;
- }
- & when (@variationContainerRelaxed) {
- .ui.ui.ui.relaxed.grid.container {
- width: @largeMonitorRelaxedGridWidth;
- }
- .ui.ui.ui.very.relaxed.grid.container {
- width: @largeMonitorVeryRelaxedGridWidth;
- }
- }
- }
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationContainerText) {
- /* Text Container */
- .ui.text.container {
- font-family: @textFontFamily;
- max-width: @textWidth;
- line-height: @textLineHeight;
- font-size: @textSize;
- }
-}
-
-& when (@variationContainerFluid) {
- /* Fluid */
- .ui.fluid.container {
- width: 100%;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-& when (@variationContainerAligned) {
- .ui[class*="left aligned"].container {
- text-align: left;
- }
- .ui[class*="center aligned"].container {
- text-align: center;
- }
- .ui[class*="right aligned"].container {
- text-align: right;
- }
-}
-& when (@variationContainerJustified) {
- .ui.justified.container {
- text-align: justify;
- hyphens: auto;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/divider.less b/semantic/src/definitions/elements/divider.less
deleted file mode 100644
index d23167d..0000000
--- a/semantic/src/definitions/elements/divider.less
+++ /dev/null
@@ -1,298 +0,0 @@
-/*!
- * # Fomantic-UI - Divider
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'divider';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Divider
-*******************************/
-
-.ui.divider {
- margin: @margin;
-
- line-height: 1;
- height: 0;
-
- font-weight: @fontWeight;
- text-transform: @textTransform;
- letter-spacing: @letterSpacing;
- color: @color;
-
- user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-/*--------------
- Basic
----------------*/
-
-.ui.divider:not(.vertical):not(.horizontal) {
- border-top: @shadowWidth @borderStyle @shadowColor;
- border-bottom: @highlightWidth @borderStyle @highlightColor;
-}
-
-/*--------------
- Coupling
----------------*/
-
-/* Allow divider between each column row */
-.ui.grid > .column + .divider,
-.ui.grid > .row > .column + .divider {
- left: auto;
-}
-
-& when (@variationDividerHorizontal) {
- /*--------------
- Horizontal
- ---------------*/
-
- .ui.horizontal.divider {
- display: table;
- white-space: nowrap;
-
- height: auto;
- margin: @horizontalMargin;
- line-height: 1;
- text-align: center;
- }
-
- .ui.horizontal.divider:before,
- .ui.horizontal.divider:after {
- content: '';
- display: table-cell;
- position: relative;
- top: 50%;
- width: 50%;
- background-repeat: no-repeat;
- }
-
- .ui.horizontal.divider:before {
- background-position: right @horizontalDividerMargin top 50%;
- }
- .ui.horizontal.divider:after {
- background-position: left @horizontalDividerMargin top 50%;
- }
-}
-
-& when (@variationDividerVertical) {
- /*--------------
- Vertical
- ---------------*/
-
- .ui.vertical.divider {
- position: absolute;
- z-index: 2;
- top: 50%;
- left: 50%;
-
- margin: 0;
- padding: 0;
- width: auto;
- height: 50%;
-
- line-height: 0;
- text-align: center;
- transform: translateX(-50%);
- }
-
- .ui.vertical.divider:before,
- .ui.vertical.divider:after {
- position: absolute;
- left: 50%;
- content: '';
- z-index: 3;
-
- border-left: @shadowWidth @borderStyle @shadowColor;
- border-right: @highlightWidth @borderStyle @highlightColor;
-
- width: 0;
- height: @verticalDividerHeight;
- }
-
- .ui.vertical.divider:before {
- top: -100%;
- }
- .ui.vertical.divider:after {
- top: auto;
- bottom: 0;
- }
-
- /* Inside grid */
- @media only screen and (max-width : @largestMobileScreen) {
-
- .ui.stackable.grid .ui.vertical.divider,
- .ui.grid .stackable.row .ui.vertical.divider {
- display: table;
- white-space: nowrap;
- height: auto;
- margin: @horizontalMargin;
- overflow: hidden;
- line-height: 1;
- text-align: center;
- position: static;
- top: 0;
- left: 0;
- transform: none;
- }
-
- .ui.stackable.grid .ui.vertical.divider:before,
- .ui.grid .stackable.row .ui.vertical.divider:before,
- .ui.stackable.grid .ui.vertical.divider:after,
- .ui.grid .stackable.row .ui.vertical.divider:after {
- left: 0;
- border-left: none;
- border-right: none;
- content: '';
- display: table-cell;
- position: relative;
- top: 50%;
- width: 50%;
- background-repeat: no-repeat;
- }
-
- .ui.stackable.grid .ui.vertical.divider:before,
- .ui.grid .stackable.row .ui.vertical.divider:before {
- background-position: right @horizontalDividerMargin top 50%;
- }
- .ui.stackable.grid .ui.vertical.divider:after,
- .ui.grid .stackable.row .ui.vertical.divider:after {
- background-position: left @horizontalDividerMargin top 50%;
- }
- }
-}
-
-& when (@variationDividerIcon) {
- /*--------------
- Icon
- ---------------*/
-
- .ui.divider > .icon {
- margin: @dividerIconMargin;
- font-size: @dividerIconSize;
- height: 1em;
- vertical-align: middle;
- }
-}
-
-& when (@variationDividerHorizontal) {
- /*--------------
- Header
- ---------------*/
- .ui.horizontal.divider[class*="left aligned"] {
- &:before {
- display: none;
- }
- &:after {
- width: 100%;
- }
- }
- .ui.horizontal.divider[class*="right aligned"] {
- &:before {
- width: 100%;
- }
- &:after {
- display: none;
- }
- }
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationDividerHidden) {
- /*--------------
- Hidden
- ---------------*/
-
- .ui.hidden.divider {
- border-color: transparent !important;
- }
-
- .ui.hidden.divider:before,
- .ui.hidden.divider:after {
- display: none;
- }
-}
-
-/*--------------
- Inverted
----------------*/
-& when (@variationDividerInverted) {
- .ui.divider.inverted,
- .ui.vertical.inverted.divider,
- .ui.horizontal.inverted.divider {
- color: @invertedTextColor;
- }
- .ui.divider.inverted,
- .ui.divider.inverted:after,
- .ui.divider.inverted:before {
- border-top-color: @invertedShadowColor !important;
- border-left-color: @invertedShadowColor !important;
- border-bottom-color: @invertedHighlightColor !important;
- border-right-color: @invertedHighlightColor !important;
- }
-}
-
-/*--------------
- Fitted
----------------*/
-& when (@variationDividerFitted) {
- .ui.fitted.divider {
- margin: 0;
- }
-}
-
-& when (@variationDividerClearing) {
- /*--------------
- Clearing
- ---------------*/
-
- .ui.clearing.divider {
- clear: both;
- }
-}
-
-& when (@variationDividerSection) {
- /*--------------
- Section
- ---------------*/
-
- .ui.section.divider {
- margin-top: @sectionMargin;
- margin-bottom: @sectionMargin;
- }
-}
-
-/*--------------
- Sizes
----------------*/
-
-.ui.divider {
- font-size: @medium;
-}
-& when not (@variationDividerSizes = false) {
- each(@variationDividerSizes, {
- @s: @@value;
- .ui.@{value}.divider {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/emoji.less b/semantic/src/definitions/elements/emoji.less
deleted file mode 100644
index 6e80621..0000000
--- a/semantic/src/definitions/elements/emoji.less
+++ /dev/null
@@ -1,72 +0,0 @@
-/*!
- * # Fomantic UI - Emoji
- * https://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'emoji';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Emoji
-*******************************/
-
-
-em[data-emoji] {
- opacity: @opacity;
-
- speak: none;
- backface-visibility: hidden;
-}
-
-em[data-emoji]:before {
- content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
- display: inline-block;
- line-height: @emojiLineHeight;
- background-repeat: no-repeat;
- background-position: center center;
- & when not (@emojiFileType = 'svg') {
- background-size: contain;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-em[data-emoji].disabled {
- opacity: @disabledOpacity;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-em[data-emoji].loading:before {
- animation: loader @loadingDuration linear infinite;
-}
-
-
-/*-------------------
- Link
---------------------*/
-
-em[data-emoji].link:not(.disabled) {
- cursor: pointer;
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/flag.less b/semantic/src/definitions/elements/flag.less
deleted file mode 100644
index b691d18..0000000
--- a/semantic/src/definitions/elements/flag.less
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
- * # Fomantic-UI - Flag
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'flag';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Flag
-*******************************/
-
-i.flag:not(.icon) {
- display: inline-block;
-
- width: @width;
- height: @height;
-
- line-height: @height;
- vertical-align: @verticalAlign;
- margin: 0 @margin 0 0;
-
- text-decoration: inherit;
-
- speak: none;
- -webkit-font-smoothing: antialiased;
- backface-visibility: hidden;
-}
-
-/* Sprite */
-i.flag:not(.icon):before {
- display: inline-block;
- content: '';
- background: url(@spritePath) no-repeat -108px -1976px;
- width: @width;
- height: @height;
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/header.less b/semantic/src/definitions/elements/header.less
deleted file mode 100644
index 669f316..0000000
--- a/semantic/src/definitions/elements/header.less
+++ /dev/null
@@ -1,487 +0,0 @@
-/*!
- * # Fomantic-UI - Header
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'header';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Header
-*******************************/
-
-/* Standard */
-.ui.header {
- border: none;
- margin: @margin;
- padding: @verticalPadding @horizontalPadding;
- font-family: @fontFamily;
- font-weight: @fontWeight;
- line-height: @lineHeight;
- text-transform: @textTransform;
- color: @textColor;
-}
-
-.ui.header:first-child {
- margin-top: @firstMargin;
-}
-.ui.header:last-child {
- margin-bottom: @lastMargin;
-}
-
-& when (@variationHeaderSub) {
- /*--------------
- Sub Header
- ---------------*/
-
- .ui.header .sub.header {
- display: block;
- font-weight: @normal;
- padding: 0;
- margin: @subHeaderMargin;
- font-size: @subHeaderFontSize;
- line-height: @subHeaderLineHeight;
- color: @subHeaderColor;
- }
-}
-
-/*--------------
- Icon
----------------*/
-
-.ui.header > i.icon {
- display: table-cell;
- opacity: @iconOpacity;
- font-size: @iconSize;
- padding-top: @iconOffset;
- vertical-align: @iconAlignment;
-}
-
-/* With Text Node */
-.ui.header > i.icon:only-child {
- display: inline-block;
- padding: 0;
- margin-right: @iconMargin;
-}
-
-/*-------------------
- Image
---------------------*/
-
-.ui.header > .image:not(.icon),
-.ui.header > img {
- display: inline-block;
- margin-top: @imageOffset;
- width: @imageWidth;
- height: @imageHeight;
- vertical-align: @imageAlignment;
-}
-.ui.header > .image:not(.icon):only-child,
-.ui.header > img:only-child {
- margin-right: @imageMargin;
-}
-
-/*--------------
- Content
----------------*/
-
-.ui.header .content {
- display: inline-block;
- vertical-align: @contentAlignment;
-}
-
-/* After Image */
-.ui.header > img + .content,
-.ui.header > .image + .content {
- padding-left: @imageMargin;
- vertical-align: @contentImageAlignment;
-}
-
-/* After Icon */
-.ui.header > i.icon + .content {
- padding-left: @iconMargin;
- display: table-cell;
- vertical-align: @contentIconAlignment;
-}
-
-
-/*--------------
- Loose Coupling
----------------*/
-
-.ui.header .ui.label {
- font-size: @labelSize;
- margin-left: @labelDistance;
- vertical-align: @labelVerticalAlign;
-}
-
-/* Positioning */
-.ui.header + p {
- margin-top: @nextParagraphDistance;
-}
-
-
-
-/*******************************
- Types
-*******************************/
-
-
-/*--------------
- Page
----------------*/
-& when not (@variationHeaderTags = false) {
- each(@variationHeaderTags, {
- @sf: @{value}SubHeaderFontSize;
- @s: @@value;
- @{value}.ui.header {
- font-size: @s;
- }
- & when (@variationHeaderSub) {
- @{value}.ui.header .sub.header {
- font-size: @@sf;
- }
- }
- })
-}
-
-/*--------------
- Content Heading
----------------*/
-
-& when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @sf: @{value}SubHeaderFontSize;
- @shf: @{value}SubHeadingSize;
- @s: @{value}FontSize;;
- .ui.@{value}.header {
- font-size: @@s;
- & when (@@s >= 2) {
- min-height: 1em;
- }
- }
- & when (@variationHeaderSub) {
- .ui.@{value}.header .sub.header {
- font-size: @@sf;
- }
- .ui.@{value}.sub.header {
- font-size: @@shf;
- }
- }
- })
-}
-
-& when (@variationHeaderSub) {
- /*--------------
- Sub Heading
- ---------------*/
-
- .ui.sub.header {
- padding: 0;
- margin-bottom: @subHeadingDistance;
- font-weight: @subHeadingFontWeight;
- font-size: @subHeadingFontSize;
- text-transform: @subHeadingTextTransform;
- color: @subHeadingColor;
- }
-}
-
-& when (@variationHeaderIcon) {
- /*-------------------
- Icon
- --------------------*/
-
- .ui.icon.header {
- display: inline-block;
- text-align: center;
- margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
- }
- .ui.icon.header:after {
- content: '';
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
-
- .ui.icon.header:first-child {
- margin-top: @iconHeaderFirstMargin;
- }
- .ui.icon.header > i.icon {
- float: none;
- display: block;
- width: auto;
- height: auto;
- line-height: 1;
- padding: 0;
- font-size: @iconHeaderSize;
- margin: 0 auto @iconHeaderMargin;
- opacity: @iconHeaderOpacity;
- }
- .ui.icon.header .corner.icon {
- font-size: @cornerIconHeaderSize;
- }
- .ui.icon.header .content {
- display: block;
- padding: 0;
- }
- .ui.icon.header > i.circular.icon {
- font-size: @circularHeaderIconSize;
- }
- .ui.icon.header > i.square.icon {
- font-size: @squareHeaderIconSize;
- }
- & when (@variationHeaderBlock) {
- .ui.block.icon.header > i.icon {
- margin-bottom: 0;
- }
- }
- .ui.icon.header.aligned {
- margin-left: auto;
- margin-right: auto;
- display: block;
- }
-}
-
-/*******************************
- States
-*******************************/
-& when (@variationHeaderDisabled) {
- .ui.disabled.header {
- opacity: @disabledOpacity;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationHeaderInverted) {
- /*-------------------
- Inverted
- --------------------*/
-
- .ui.inverted.header {
- color: @invertedColor;
- }
- .ui.inverted.header .sub.header {
- color: @invertedSubHeaderColor;
- }
- & when (@variationHeaderAttached) {
- .ui.inverted.attached.header {
- background: @invertedAttachedBackground;
- box-shadow: none;
- border-color: transparent;
- }
- }
- & when (@variationHeaderBlock) {
- .ui.inverted.block.header {
- background: @invertedBlockBackground;
- box-shadow: none;
- border-bottom: none;
- }
- }
-}
-
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
- @h: @colors[@@color][hover];
- @lh: @colors[@@color][lightHover];
-
- .ui.@{color}.header {
- color: @c;
- }
- a.ui.@{color}.header:hover {
- color: @h;
- }
- & when (@variationHeaderDividing) {
- .ui.@{color}.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @c;
- }
- }
- & when (@variationHeaderInverted) {
- .ui.inverted.@{color}.header.header.header {
- color: @l;
- }
- a.ui.inverted.@{color}.header.header.header:hover {
- color: @lh;
- }
- .ui.inverted.@{color}.dividing.header {
- border-bottom: @dividedColoredBorderWidth solid @l;
- }
- }
-})
-
-& when (@variationHeaderAligned) {
- /*-------------------
- Aligned
- --------------------*/
-
- .ui.left.aligned.header {
- text-align: left;
- }
- .ui.right.aligned.header {
- text-align: right;
- }
- .ui.centered.header,
- .ui.center.aligned.header {
- text-align: center;
- }
-}
-
-& when (@variationHeaderJustified) {
- .ui.justified.header {
- text-align: justify;
- }
- .ui.justified.header:after {
- display: inline-block;
- content: '';
- width: 100%;
- }
-}
-
-& when (@variationHeaderFloated) {
- /*-------------------
- Floated
- --------------------*/
-
- .ui.floated.header,
- .ui[class*="left floated"].header {
- float: left;
- margin-top: 0;
- margin-right: @floatedMargin;
- }
- .ui[class*="right floated"].header {
- float: right;
- margin-top: 0;
- margin-left: @floatedMargin;
- }
-}
-
-& when (@variationHeaderFitted) {
- /*-------------------
- Fitted
- --------------------*/
-
- .ui.fitted.header {
- padding: 0;
- }
-}
-
-& when (@variationHeaderDividing) {
- /*-------------------
- Dividing
- --------------------*/
-
- .ui.dividing.header {
- padding-bottom: @dividedBorderPadding;
- border-bottom: @dividedBorder;
- }
- .ui.dividing.header .sub.header {
- padding-bottom: @dividedSubHeaderPadding;
- }
- .ui.dividing.header i.icon {
- margin-bottom: @dividedIconPadding;
- }
- & when (@variationHeaderInverted) {
- .ui.inverted.dividing.header {
- border-bottom-color: @invertedDividedBorderColor;
- }
- }
-}
-
-& when (@variationHeaderBlock) {
- /*-------------------
- Block
- --------------------*/
-
- .ui.block.header {
- background: @blockBackground;
- padding: @blockVerticalPadding @blockHorizontalPadding;
- box-shadow: @blockBoxShadow;
- border: @blockBorder;
- border-radius: @blockBorderRadius;
- }
- .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: @mediumBlock;
- }
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @s: @{value}Block;
- .ui.@{value}.block.header {
- font-size: @@s;
- }
- })
- }
-}
-
-& when (@variationHeaderAttached) {
- /*-------------------
- Attached
- --------------------*/
-
- .ui.attached.header {
- background: @attachedBackground;
- padding: @attachedVerticalPadding @attachedHorizontalPadding;
- margin: 0 @attachedOffset 0 @attachedOffset;
- box-shadow: @attachedBoxShadow;
- border: @attachedBorder;
- border-radius: 0;
- }
- .ui.attached.block.header {
- background: @blockBackground;
- }
- .ui.attached:not(.top).header {
- border-top: none;
- }
- .ui.top.attached.header {
- border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
- }
- .ui.bottom.attached.header {
- border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
- }
-
- /* Attached Sizes */
- .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: @mediumAttachedSize;
- }
- & when not (@variationHeaderSizes = false) {
- each(@variationHeaderSizes, {
- @s: @{value}AttachedSize;
- .ui.@{value}.attached.header {
- font-size: @@s;
- }
- })
- }
-}
-
-/*-------------------
- Sizing
---------------------*/
-
-.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
- font-size: @mediumFontSize;
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/icon.less b/semantic/src/definitions/elements/icon.less
deleted file mode 100644
index e97ae46..0000000
--- a/semantic/src/definitions/elements/icon.less
+++ /dev/null
@@ -1,374 +0,0 @@
-/*!
- * # Fomantic-UI - Icon
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'icon';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Icon
-*******************************/
-
-@font-face {
- font-family: 'Icons';
- src: @fallbackSRC;
- src: @src;
- font-style: normal;
- font-weight: @normal;
- font-variant: normal;
- text-decoration: inherit;
- text-transform: none;
-}
-
-i.icon {
- display: inline-block;
- opacity: @opacity;
-
- margin: 0 @distanceFromText 0 0;
-
- width: @width;
- height: @height;
-
- font-family: 'Icons';
- font-style: normal;
- font-weight: @normal;
- text-decoration: inherit;
- text-align: center;
-
- speak: none;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- backface-visibility: hidden;
-}
-
-i.icon:before {
- background: none !important;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationIconLoading) {
- /*--------------
- Loading
- ---------------*/
-
- i.icon.loading {
- height: 1em;
- line-height: 1;
- animation: loader @loadingDuration linear infinite;
- }
-}
-
-/*******************************
- States
-*******************************/
-
-i.icon:hover, i.icons:hover,
-i.icon:active, i.icons:active,
-i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
- opacity: 1;
-}
-
-& when (@variationIconDisabled) {
- i.disabled.icon, i.disabled.icons {
- opacity: @disabledOpacity;
- cursor: default;
- pointer-events: none;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationIconFitted) {
- /*-------------------
- Fitted
- --------------------*/
-
- i.fitted.icon {
- width: auto;
- margin: 0 !important;
- }
-}
-
-& when (@variationIconLink) {
- /*-------------------
- Link
- --------------------*/
-
- i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
- cursor: pointer;
- opacity: @linkOpacity;
- transition: opacity @defaultDuration @defaultEasing;
- }
- i.link.icon:hover, i.link.icons:hover {
- opacity: 1;
- }
-}
-
-& when (@variationIconCircular) {
- /*-------------------
- Circular
- --------------------*/
-
- i.circular.icon {
- border-radius: 500em !important;
- line-height: 1 !important;
-
- padding: @circularPadding !important;
- box-shadow: @circularShadow;
-
- width: @circularSize !important;
- height: @circularSize !important;
- }
- & when (@variationIconInverted) {
- i.circular.inverted.icon {
- border: none;
- box-shadow: none;
- }
- }
-}
-
-& when (@variationIconFlipped) {
- /*-------------------
- Flipped
- --------------------*/
-
- i.flipped.icon,
- i.horizontally.flipped.icon {
- transform: scale(-1, 1);
- }
- i.vertically.flipped.icon {
- transform: scale(1, -1);
- }
-}
-
-& when (@variationIconRotated) {
- /*-------------------
- Rotated
- --------------------*/
-
- i.rotated.icon,
- i.right.rotated.icon,
- i.clockwise.rotated.icon {
- transform: rotate(90deg);
- }
-
- i.left.rotated.icon,
- i.counterclockwise.rotated.icon {
- transform: rotate(-90deg);
- }
-
- i.halfway.rotated.icon {
- transform: rotate(180deg);
- }
-}
-
-& when (@variationIconFlipped) and (@variationIconRotated) {
- /*--------------------------
- Flipped & Rotated
- ---------------------------*/
-
- i.rotated.flipped.icon,
- i.right.rotated.flipped.icon,
- i.clockwise.rotated.flipped.icon {
- transform: scale(-1, 1) rotate(90deg);
- }
-
- i.left.rotated.flipped.icon,
- i.counterclockwise.rotated.flipped.icon {
- transform: scale(-1, 1) rotate(-90deg);
- }
-
- i.halfway.rotated.flipped.icon {
- transform: scale(-1, 1) rotate(180deg);
- }
-
- i.rotated.vertically.flipped.icon,
- i.right.rotated.vertically.flipped.icon,
- i.clockwise.rotated.vertically.flipped.icon {
- transform: scale(1, -1) rotate(90deg);
- }
-
- i.left.rotated.vertically.flipped.icon,
- i.counterclockwise.rotated.vertically.flipped.icon {
- transform: scale(1, -1) rotate(-90deg);
- }
-
- i.halfway.rotated.vertically.flipped.icon {
- transform: scale(1, -1) rotate(180deg);
- }
-}
-
-& when (@variationIconBordered) {
- /*-------------------
- Bordered
- --------------------*/
-
- i.bordered.icon {
- line-height: 1;
- vertical-align: baseline;
-
- width: @borderedSize;
- height: @borderedSize;
- padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
- box-shadow: @borderedShadow;
- }
- & when (@variationIconInverted) {
- i.bordered.inverted.icon {
- border: none;
- box-shadow: none;
- }
- }
-}
-
-& when (@variationIconInverted) {
- /*-------------------
- Inverted
- --------------------*/
-
- /* Inverted Shapes */
- i.inverted.bordered.icon,
- i.inverted.circular.icon {
- background-color: @black;
- color: @white;
- }
-
- i.inverted.icon {
- color: @white;
- }
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
-
- i.@{color}.icon.icon.icon.icon {
- color: @c;
- }
- & when (@variationIconInverted) {
- i.inverted.@{color}.icon.icon.icon.icon {
- color: @l;
- }
- i.inverted.bordered.@{color}.icon.icon.icon.icon,
- i.inverted.circular.@{color}.icon.icon.icon.icon {
- background-color: @c;
- color: @white;
- }
- }
-})
-
-
-/*-------------------
- Sizes
---------------------*/
-
-i.icon,
-i.icons {
- font-size: @medium;
- line-height: @lineHeight;
-}
-& when not (@variationIconSizes = false) {
- each(@variationIconSizes, {
- @s: @@value;
- i.@{value}.@{value}.@{value}.icon,
- i.@{value}.@{value}.@{value}.icons {
- font-size: @s;
- vertical-align: middle;
- }
- })
-}
-
-& when (@variationIconGroups) or (@variationIconCorner) {
- /*******************************
- Groups
- *******************************/
-
- i.icons {
- display: inline-block;
- position: relative;
- line-height: 1;
- }
-
- i.icons .icon {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
- margin: 0;
- }
-
- i.icons .icon:first-child {
- position: static;
- width: auto;
- height: auto;
- vertical-align: top;
- transform: none;
- }
-
- & when (@variationIconCorner) {
- /* Corner Icon */
- i.icons .corner.icon {
- top: auto;
- left: auto;
- right: 0;
- bottom: 0;
- transform: none;
- font-size: @cornerIconSize;
- text-shadow: @cornerIconShadow;
- }
- i.icons .icon.corner[class*="top right"] {
- top: 0;
- left: auto;
- right: 0;
- bottom: auto;
- }
- i.icons .icon.corner[class*="top left"] {
- top: 0;
- left: 0;
- right: auto;
- bottom: auto;
- }
- i.icons .icon.corner[class*="bottom left"] {
- top: auto;
- left: 0;
- right: auto;
- bottom: 0;
- }
- i.icons .icon.corner[class*="bottom right"] {
- top: auto;
- left: auto;
- right: 0;
- bottom: 0;
- }
- & when (@variationIconInverted) {
- i.icons .inverted.corner.icon {
- text-shadow: @cornerIconInvertedShadow;
- }
- }
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/image.less b/semantic/src/definitions/elements/image.less
deleted file mode 100644
index 651b81e..0000000
--- a/semantic/src/definitions/elements/image.less
+++ /dev/null
@@ -1,321 +0,0 @@
-/*!
- * # Fomantic-UI - Image
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'image';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Image
-*******************************/
-
-.ui.image {
- position: relative;
- display: inline-block;
- vertical-align: middle;
- max-width: 100%;
- background-color: @placeholderColor;
-}
-
-img.ui.image {
- display: block;
-}
-
-.ui.image svg,
-.ui.image img {
- display: block;
- max-width: 100%;
- height: auto;
-}
-
-
-/*******************************
- States
-*******************************/
-
-.ui.hidden.images,
-.ui.ui.hidden.image {
- display: none;
-}
-.ui.hidden.transition.images,
-.ui.hidden.transition.image {
- display: block;
- visibility: hidden;
-}
-.ui.images > .hidden.transition {
- display: inline-block;
- visibility: hidden;
-}
-
-& when (@variationImageDisabled) {
- .ui.disabled.images,
- .ui.disabled.image {
- cursor: default;
- opacity: @disabledOpacity;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationImageInline) {
- /*--------------
- Inline
- ---------------*/
-
- .ui.inline.image,
- .ui.inline.image svg,
- .ui.inline.image img {
- display: inline-block;
- }
-}
-
-& when (@variationImageAligned) {
- /*------------------
- Vertical Aligned
- -------------------*/
-
- .ui.top.aligned.image,
- .ui.top.aligned.image svg,
- .ui.top.aligned.image img {
- display: inline-block;
- vertical-align: top;
- }
- .ui.middle.aligned.image,
- .ui.middle.aligned.image svg,
- .ui.middle.aligned.image img {
- display: inline-block;
- vertical-align: middle;
- }
- .ui.bottom.aligned.image,
- .ui.bottom.aligned.image svg,
- .ui.bottom.aligned.image img {
- display: inline-block;
- vertical-align: bottom;
- }
- .ui.top.aligned.images .image,
- .ui.images .ui.top.aligned.image {
- align-self: flex-start;
- }
- .ui.middle.aligned.images .image,
- .ui.images .ui.middle.aligned.image {
- align-self: center;
- }
- .ui.bottom.aligned.images .image,
- .ui.images .ui.bottom.aligned.image {
- align-self: flex-end;
- }
-}
-
-& when (@variationImageRounded) {
- /*--------------
- Rounded
- ---------------*/
-
- .ui.rounded.images .image,
- .ui.rounded.image,
- .ui.rounded.images .image > *,
- .ui.rounded.image > * {
- border-radius: @roundedBorderRadius;
- }
-}
-
-& when (@variationImageBordered) {
- /*--------------
- Bordered
- ---------------*/
-
- .ui.bordered.images .image,
- .ui.bordered.images img,
- .ui.bordered.images svg,
- .ui.bordered.image img,
- .ui.bordered.image svg,
- img.ui.bordered.image {
- border: @imageBorder;
- }
-}
-
-& when (@variationImageCircular) {
- /*--------------
- Circular
- ---------------*/
-
- .ui.circular.images,
- .ui.circular.image {
- overflow: hidden;
- }
-
- .ui.circular.images .image,
- .ui.circular.image,
- .ui.circular.images .image > *,
- .ui.circular.image > * {
- -webkit-border-radius: @circularRadius;
- -moz-border-radius: @circularRadius;
- border-radius: @circularRadius;
- }
-}
-
-& when (@variationImageFluid) {
- /*--------------
- Fluid
- ---------------*/
-
- .ui.fluid.images,
- .ui.fluid.image,
- .ui.fluid.images img,
- .ui.fluid.images svg,
- .ui.fluid.image svg,
- .ui.fluid.image img {
- display: block;
- width: 100%;
- height: auto;
- }
-}
-
-& when (@variationImageAvatar) {
- /*--------------
- Avatar
- ---------------*/
-
- .ui.avatar.images .image,
- .ui.avatar.images img,
- .ui.avatar.images svg,
- .ui.avatar.image img,
- .ui.avatar.image svg,
- .ui.avatar.image {
- margin-right: @avatarMargin;
-
- display: inline-block;
- width: @avatarSize;
- height: @avatarSize;
-
- -webkit-border-radius: @circularRadius;
- -moz-border-radius: @circularRadius;
- border-radius: @circularRadius;
- }
-}
-
-& when (@variationImageSpaced) {
- /*-------------------
- Spaced
- --------------------*/
-
- .ui.spaced.image {
- display: inline-block !important;
- margin-left: @spacedDistance;
- margin-right: @spacedDistance;
- }
-
- .ui[class*="left spaced"].image {
- margin-left: @spacedDistance;
- margin-right: 0;
- }
-
- .ui[class*="right spaced"].image {
- margin-left: 0;
- margin-right: @spacedDistance;
- }
-}
-
-& when (@variationImageFloated) {
- /*-------------------
- Floated
- --------------------*/
-
- .ui.floated.image,
- .ui.floated.images {
- float: left;
- margin-right: @floatedHorizontalMargin;
- margin-bottom: @floatedVerticalMargin;
- }
- .ui.right.floated.images,
- .ui.right.floated.image {
- float: right;
- margin-right: 0;
- margin-bottom: @floatedVerticalMargin;
- margin-left: @floatedHorizontalMargin;
- }
-
- .ui.floated.images:last-child,
- .ui.floated.image:last-child {
- margin-bottom: 0;
- }
-}
-
-& when (@variationImageCentered) {
- .ui.centered.image {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .ui.centered.images {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: stretch;
- justify-content: center;
- }
-}
-
-/*--------------
- Sizes
----------------*/
-
-.ui.medium.images .image,
-.ui.medium.images img,
-.ui.medium.images svg,
-.ui.medium.image {
- width: @mediumWidth;
- height: auto;
- font-size: @medium;
-}
-& when not (@variationImageSizes = false) {
- each(@variationImageSizes, {
- @w: @{value}Width;
- @s: @@value;
- .ui.@{value}.images .image,
- .ui.@{value}.images img,
- .ui.@{value}.images svg,
- .ui.@{value}.image {
- width: @@w;
- height: auto;
- font-size: @s;
- }
- })
-}
-
-& when (@variationImageGroups) {
- /*******************************
- Groups
- *******************************/
-
- .ui.images {
- font-size: 0;
- margin: 0 -@imageHorizontalMargin 0;
- }
-
- .ui.images .image,
- .ui.images > img,
- .ui.images > svg {
- display: inline-block;
- margin: 0 @imageHorizontalMargin @imageVerticalMargin;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/input.less b/semantic/src/definitions/elements/input.less
deleted file mode 100644
index 7782ede..0000000
--- a/semantic/src/definitions/elements/input.less
+++ /dev/null
@@ -1,565 +0,0 @@
-/*!
- * # Fomantic-UI - Input
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'input';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Standard
-*******************************/
-
-
-/*--------------------
- Inputs
----------------------*/
-
-.ui.input {
- position: relative;
- font-weight: @normal;
- font-style: normal;
- display: inline-flex;
- color: @inputColor;
-}
-.ui.input > input {
- margin: 0;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: @textAlign;
- line-height: @lineHeight;
-
- font-family: @inputFont;
- padding: @padding;
-
- background: @background;
- border: @border;
- color: @inputColor;
- border-radius: @borderRadius;
- transition: @transition;
-
- box-shadow: @boxShadow;
-}
-
-
-/*--------------------
- Placeholder
----------------------*/
-
-/* browsers require these rules separate */
-
-.ui.input > input::-webkit-input-placeholder {
- color: @placeholderColor;
-}
-.ui.input > input::-moz-placeholder {
- color: @placeholderColor;
-}
-.ui.input > input:-ms-input-placeholder {
- color: @placeholderColor;
-}
-
-
-/*******************************
- States
-*******************************/
-& when (@variationInputDisabled) {
- /*--------------------
- Disabled
- ---------------------*/
-
- .ui.disabled.input,
- .ui.input:not(.disabled) input[disabled] {
- opacity: @disabledOpacity;
- }
-
- .ui.disabled.input > input,
- .ui.input:not(.disabled) input[disabled] {
- pointer-events: none;
- }
-}
-
-/*--------------------
- Active
----------------------*/
-
-.ui.input > input:active,
-.ui.input.down input {
- border-color: @downBorderColor;
- background: @downBackground;
- color: @downColor;
- box-shadow: @downBoxShadow;
-}
-
-& when (@variationInputLoading) {
- /*--------------------
- Loading
- ---------------------*/
-
- .ui.loading.loading.input > i.icon:before {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @loaderFillColor;
- }
- .ui.loading.loading.input > i.icon:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- animation: loader @loaderSpeed infinite linear;
-
- border: @loaderLineWidth solid @loaderLineColor;
- border-radius: @circularRadius;
-
- box-shadow: 0 0 0 1px transparent;
- }
-}
-
-
-/*--------------------
- Focus
----------------------*/
-
-.ui.input.focus > input,
-.ui.input > input:focus {
- border-color: @focusBorderColor;
- background: @focusBackground;
- color: @focusColor;
- box-shadow: @focusBoxShadow;
-}
-.ui.input.focus > input::-webkit-input-placeholder,
-.ui.input > input:focus::-webkit-input-placeholder {
- color: @placeholderFocusColor;
-}
-.ui.input.focus > input::-moz-placeholder,
-.ui.input > input:focus::-moz-placeholder {
- color: @placeholderFocusColor;
-}
-.ui.input.focus > input:-ms-input-placeholder,
-.ui.input > input:focus:-ms-input-placeholder {
- color: @placeholderFocusColor;
-}
-
-
-& when (@variationInputStates) {
- /*--------------------
- States
- ---------------------*/
- each(@formStates, {
- @state: replace(@key, '@', '');
-
- .ui.input.@{state} > input {
- background-color: @formStates[@@state][background];
- border-color: @formStates[@@state][borderColor];
- color: @formStates[@@state][color];
- box-shadow: @formStates[@@state][boxShadow];
- }
-
- /* Placeholder */
- .ui.input.@{state} > input::-webkit-input-placeholder {
- color: @formStates[@@state][inputPlaceholderColor];
- }
- .ui.input.@{state} > input::-moz-placeholder {
- color: @formStates[@@state][inputPlaceholderColor];
- }
- .ui.input.@{state} > input:-ms-input-placeholder {
- color: @formStates[@@state][inputPlaceholderColor] !important;
- }
-
- /* Focused Placeholder */
- .ui.input.@{state} > input:focus::-webkit-input-placeholder {
- color: @formStates[@@state][inputPlaceholderFocusColor];
- }
- .ui.input.@{state} > input:focus::-moz-placeholder {
- color: @formStates[@@state][inputPlaceholderFocusColor];
- }
- .ui.input.@{state} > input:focus:-ms-input-placeholder {
- color: @formStates[@@state][inputPlaceholderFocusColor] !important;
- }
- })
-}
-/*******************************
- Variations
-*******************************/
-
-& when (@variationInputTransparent) {
- /*--------------------
- Transparent
- ---------------------*/
-
-
- .ui.transparent.input > textarea,
- .ui.transparent.input > input {
- border-color: transparent !important;
- background-color: transparent !important;
- padding: 0;
- box-shadow: none !important;
- border-radius: 0 !important;
- }
- .field .ui.transparent.input > textarea {
- padding: @padding;
- }
-
- /* Transparent Icon */
- :not(.field) > .ui.transparent.icon.input > i.icon {
- width: @transparentIconWidth;
- }
- :not(.field) > .ui.ui.ui.transparent.icon.input > input {
- padding-left: 0;
- padding-right: @transparentIconMargin;
- }
- :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input {
- padding-left: @transparentIconMargin;
- padding-right: 0;
- }
- & when (@variationInputInverted) {
- /* Transparent Inverted */
- .ui.transparent.inverted.input {
- color: @transparentInvertedColor;
- }
- .ui.ui.transparent.inverted.input > textarea,
- .ui.ui.transparent.inverted.input > input {
- color: inherit;
- }
-
- .ui.transparent.inverted.input > input::-webkit-input-placeholder {
- color: @transparentInvertedPlaceholderColor;
- }
- .ui.transparent.inverted.input > input::-moz-placeholder {
- color: @transparentInvertedPlaceholderColor;
- }
- .ui.transparent.inverted.input > input:-ms-input-placeholder {
- color: @transparentInvertedPlaceholderColor;
- }
- }
-}
-
-& when (@variationInputIcon) {
- /*--------------------
- Icon
- ---------------------*/
-
- .ui.icon.input > i.icon {
- cursor: default;
- position: absolute;
- line-height: 1;
- text-align: center;
- top: 0;
- right: 0;
- margin: 0;
- height: 100%;
-
- width: @iconWidth;
- opacity: @iconOpacity;
- border-radius: 0 @borderRadius @borderRadius 0;
- transition: @iconTransition;
- }
- .ui.icon.input > i.icon:not(.link) {
- pointer-events: none;
- }
- .ui.ui.ui.ui.icon.input > textarea,
- .ui.ui.ui.ui.icon.input > input {
- padding-right: @iconMargin;
- }
-
- .ui.icon.input > i.icon:before,
- .ui.icon.input > i.icon:after {
- left: 0;
- position: absolute;
- text-align: center;
- top: 50%;
- width: 100%;
- margin-top: @iconOffset;
- }
- .ui.icon.input > i.link.icon {
- cursor: pointer;
- }
- .ui.icon.input > i.circular.icon {
- top: @circularIconVerticalOffset;
- right: @circularIconHorizontalOffset;
- }
-
- /* Left Icon Input */
- .ui[class*="left icon"].input > i.icon {
- right: auto;
- left: @borderWidth;
- border-radius: @borderRadius 0 0 @borderRadius;
- }
- .ui[class*="left icon"].input > i.circular.icon {
- right: auto;
- left: @circularIconHorizontalOffset;
- }
- .ui.ui.ui.ui[class*="left icon"].input > textarea,
- .ui.ui.ui.ui[class*="left icon"].input > input {
- padding-left: @iconMargin;
- padding-right: @horizontalPadding;
- }
-
- /* Focus */
- .ui.icon.input > textarea:focus ~ i.icon,
- .ui.icon.input > input:focus ~ i.icon {
- opacity: 1;
- }
-}
-
-& when (@variationInputLabeled) {
- /*--------------------
- Labeled
- ---------------------*/
-
- /* Adjacent Label */
- .ui.labeled.input > .label {
- flex: 0 0 auto;
- margin: 0;
- font-size: @relativeMedium;
- }
- .ui.labeled.input > .label:not(.corner) {
- padding-top: @verticalPadding;
- padding-bottom: @verticalPadding;
- }
-
- /* Regular Label on Left */
- .ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
- .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
- border-left-color: @focusBorderColor;
- }
-
- /* Regular Label on Right */
- .ui[class*="right labeled"].input > input {
- border-top-right-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
- border-right-color: transparent !important;
- }
- .ui[class*="right labeled"].input > input + .label {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
-
- .ui[class*="right labeled"].input > input:focus {
- border-right-color: @focusBorderColor !important;
- }
-}
-
-& when (@variationInputCorner) {
- /* Corner Label */
- .ui.labeled.input .corner.label {
- top: @labelCornerTop;
- right: @labelCornerRight;
- font-size: @labelCornerSize;
- border-radius: 0 @borderRadius 0 0;
- }
-
- /* Spacing with corner label */
- .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
- .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
- padding-right: @labeledMargin !important;
- }
- .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
- .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
- padding-right: @labeledIconInputMargin !important;
- }
- .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
- margin-right: @labeledIconMargin;
- }
-
- /* Left Labeled */
- .ui[class*="left corner labeled"].labeled.input > textarea,
- .ui[class*="left corner labeled"].labeled.input > input {
- padding-left: @labeledMargin !important;
- }
- & when (@variationInputIcon) {
- .ui[class*="left corner labeled"].icon.input > textarea,
- .ui[class*="left corner labeled"].icon.input > input {
- padding-left: @labeledIconInputMargin !important;
- }
- .ui[class*="left corner labeled"].icon.input > i.icon {
- margin-left: @labeledIconMargin;
- }
- }
-}
-& when (@variationInputIcon) {
- .ui.icon.input > textarea ~ i.icon {
- height: @textareaIconHeight;
- }
- :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon {
- height: @transparentTextareaIconHeight;
- }
-}
-& when (@variationInputCorner) {
- /* Corner Label Position */
- .ui.input > .ui.corner.label {
- top: @borderWidth;
- right: @borderWidth;
- }
- .ui.input > .ui.left.corner.label {
- right: auto;
- left: @borderWidth;
- }
-}
-
-& when (@variationInputLabeled) or (@variationInputAction) {
- /* Labeled and action input states */
- each(@formStates, {
- @state: replace(@key, '@', '');
- @borderColor: @formStates[@@state][borderColor];
-
- .ui.form .field.@{state} > .ui.action.input > .ui.button,
- .ui.form .field.@{state} > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
- .ui.action.input.@{state} > .ui.button,
- .ui.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label {
- border-top: @borderWidth solid @borderColor;
- border-bottom: @borderWidth solid @borderColor;
- }
- .ui.form .field.@{state} > .ui[class*="left action"].input > .ui.button,
- .ui.form .field.@{state} > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
- .ui[class*="left action"].input.@{state} > .ui.button,
- .ui.labeled.input.@{state}:not(.right):not([class*="corner labeled"]) > .ui.label {
- border-left: @borderWidth solid @borderColor;
- }
- .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > input + .ui.button,
- .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
- .ui.action.input.@{state}:not([class*="left action"]) > input + .ui.button,
- .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label {
- border-right: @borderWidth solid @borderColor;
- }
- .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
- .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label:first-child {
- border-left: @borderWidth solid @borderColor;
- }
- })
-}
-
-& when (@variationInputAction) {
- /*--------------------
- Action
- ---------------------*/
-
- .ui.action.input > .button,
- .ui.action.input > .buttons {
- display: flex;
- align-items: center;
- flex: 0 0 auto;
- }
- .ui.action.input > .button,
- .ui.action.input > .buttons > .button {
- padding-top: @verticalPadding;
- padding-bottom: @verticalPadding;
- margin: 0;
- }
-
- /* Input when ui Left*/
- .ui[class*="left action"].input > input {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
-
- /* Input when ui Right*/
- .ui.action.input:not([class*="left action"]) > input {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-right-color: transparent;
- }
-
- /* Button and Dropdown */
- .ui.action.input > .dropdown:first-child,
- .ui.action.input > .button:first-child,
- .ui.action.input > .buttons:first-child > .button {
- border-radius: @borderRadius 0 0 @borderRadius;
- }
- .ui.action.input > .dropdown:not(:first-child),
- .ui.action.input > .button:not(:first-child),
- .ui.action.input > .buttons:not(:first-child) > .button {
- border-radius: 0;
- }
- .ui.action.input > .dropdown:last-child,
- .ui.action.input > .button:last-child,
- .ui.action.input > .buttons:last-child > .button {
- border-radius: 0 @borderRadius @borderRadius 0;
- }
-
- /* Input Focus */
- .ui.action.input:not([class*="left action"]) > input:focus {
- border-right-color: @focusBorderColor;
- }
-
- .ui.ui[class*="left action"].input > input:focus {
- border-left-color: @focusBorderColor;
- }
-}
-
-& when (@variationInputInverted) {
- /*--------------------
- Inverted
- ---------------------*/
-
- /* Standard */
- .ui.inverted.input > input {
- border: none;
- }
-}
-
-& when (@variationInputFluid) {
- /*--------------------
- Fluid
- ---------------------*/
-
- .ui.fluid.input {
- display: flex;
- }
- .ui.fluid.input > input {
- width: 0 !important;
- }
-}
-
-/*--------------------
- Size
----------------------*/
-
-.ui.input {
- font-size: @relativeMedium;
-}
-& when not (@variationInputSizes = false) {
- each(@variationInputSizes, {
- @s: @{value}InputSize;
- .ui.@{value}.input {
- font-size: @@s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/label.less b/semantic/src/definitions/elements/label.less
deleted file mode 100644
index 4517ed7..0000000
--- a/semantic/src/definitions/elements/label.less
+++ /dev/null
@@ -1,1032 +0,0 @@
-/*!
- * # Fomantic-UI - Label
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'label';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Label
-*******************************/
-
-.ui.label {
- display: inline-block;
- line-height: 1;
- vertical-align: @verticalAlign;
-
- margin: @verticalMargin @horizontalMargin;
-
- background-color: @backgroundColor;
- background-image: @backgroundImage;
- padding: @verticalPadding @horizontalPadding;
- color: @color;
-
- text-transform: @textTransform;
- font-weight: @fontWeight;
-
- border: @border;
- border-radius: @borderRadius;
- transition: @transition;
-}
-
-.ui.label:first-child {
- margin-left: 0;
-}
-.ui.label:last-child {
- margin-right: 0;
-}
-
-/* Link */
-a.ui.label {
- cursor: pointer;
-}
-
-/* Inside Link */
-.ui.label > a {
- cursor: pointer;
- color: inherit;
- opacity: @linkOpacity;
- transition: @linkTransition;
-}
-.ui.label > a:hover {
- opacity: 1;
-}
-
-/* Image */
-.ui.label > img {
- width: auto !important;
- vertical-align: middle;
- height: @imageHeight;
-}
-
-/* Icon */
-.ui.left.icon.label > .icon,
-.ui.label > .icon {
- width: auto;
- margin: 0 @iconDistance 0 0;
-}
-
-/* Detail */
-.ui.label > .detail {
- display: inline-block;
- vertical-align: top;
- font-weight: @detailFontWeight;
- margin-left: @detailMargin;
- opacity: @detailOpacity;
-}
-.ui.label > .detail .icon {
- margin: 0 @detailIconDistance 0 0;
-}
-
-/* Removable label */
-.ui.label > .close.icon,
-.ui.label > .delete.icon {
- cursor: pointer;
- font-size: @deleteSize;
- opacity: @deleteOpacity;
- transition: @deleteTransition;
-}
-.ui.label > .close.icon:hover,
-.ui.label > .delete.icon:hover {
- opacity: 1;
-}
-
-/* Backward compatible positioning */
-.ui.label.left.icon > .close.icon,
-.ui.label.left.icon > .delete.icon {
- margin: 0 @deleteMargin 0 0;
-}
-.ui.label:not(.icon) > .close.icon,
-.ui.label:not(.icon) > .delete.icon {
- margin: 0 0 0 @deleteMargin;
-}
-
-/* Label for only an icon */
-.ui.icon.label > .icon {
- margin: 0 auto;
-}
-
-/* Right Side Icon */
-.ui.right.icon.label > .icon {
- margin: 0 0 0 @iconDistance;
-}
-
-/*-------------------
- Group
---------------------*/
-
-.ui.labels > .label {
- margin: 0 @groupHorizontalMargin @groupVerticalMargin 0;
-}
-
-
-/*-------------------
- Coupling
---------------------*/
-
-.ui.header > .ui.label {
- margin-top: @lineHeightOffset;
-}
-
-
-/* Remove border radius on attached segment */
-.ui.attached.segment > .ui.top.left.attached.label,
-.ui.bottom.attached.segment > .ui.top.left.attached.label {
- border-top-left-radius: 0;
-}
-.ui.attached.segment > .ui.top.right.attached.label,
-.ui.bottom.attached.segment > .ui.top.right.attached.label {
- border-top-right-radius: 0;
-}
-.ui.top.attached.segment > .ui.bottom.left.attached.label {
- border-bottom-left-radius: 0;
-}
-.ui.top.attached.segment > .ui.bottom.right.attached.label {
- border-bottom-right-radius: 0;
-}
-
-/* Padding on next content after a label */
-.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
-.ui.top.attached.label + :not(.attached) {
- margin-top: @attachedSegmentPadding !important;
-}
-.ui.bottom.attached.label ~ :last-child:not(.attached) {
- margin-top:0;
- margin-bottom: @attachedSegmentPadding !important;
-}
-
-.ui.segment:not(.basic) > .ui.top.attached.label {
- margin-top: @attachedOffset;
-}
-.ui.segment:not(.basic) > .ui.bottom.attached.label {
- margin-bottom: @attachedOffset;
-}
-.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
- margin-left: @attachedOffset;
-}
-.ui.segment:not(.basic) > .ui.right.attached.label {
- margin-right: @attachedOffset;
-}
-.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
- width: @attachedWidthOffset;
-}
-
-
-
-/*******************************
- Types
-*******************************/
-& when (@variationLabelImage) {
- .ui.image.label {
- width: auto;
- margin-top: 0;
- margin-bottom: 0;
- max-width: 9999px;
- vertical-align: baseline;
- text-transform: none;
-
- background: @imageLabelBackground;
- padding: @imageLabelPadding;
- border-radius: @imageLabelBorderRadius;
- box-shadow: @imageLabelBoxShadow;
- &.attached:not(.basic) when (@variationLabelAttached) {
- padding: @imageLabelPadding;
- }
- }
-
- .ui.image.label img {
- display: inline-block;
- vertical-align: top;
-
- height: @imageLabelImageHeight;
- margin: @imageLabelImageMargin;
- border-radius: @imageLabelImageBorderRadius;
- }
-
- .ui.image.label .detail {
- background: @imageLabelDetailBackground;
- margin: @imageLabelDetailMargin;
- padding: @imageLabelDetailPadding;
- border-radius: 0 @imageLabelBorderRadius @imageLabelBorderRadius 0;
- }
- & when (@variationLabelAttached) {
- .ui.bottom.attached.image.label:not(.right) > img,
- .ui.top.right.attached.image.label > img {
- border-top-left-radius: 0;
- }
-
- .ui.top.attached.image.label:not(.right) > img,
- .ui.bottom.right.attached.image.label > img {
- border-bottom-left-radius: 0;
- }
- }
-}
-
-& when (@variationLabelTag) {
-/*-------------------
- Tag
---------------------*/
-
- .ui.tag.labels .label,
- .ui.tag.label {
- margin-left: 1em;
- position: relative;
- padding-left: @tagHorizontalPadding;
- padding-right: @tagHorizontalPadding;
-
- border-radius: 0 @borderRadius @borderRadius 0;
- transition: @tagTransition;
- }
- .ui.tag.labels .label:before,
- .ui.tag.label:before {
- position: absolute;
- transform: translateY(-50%) translateX(50%) rotate(-45deg);
-
- top: @tagTriangleTopOffset;
- right: @tagTriangleRightOffset;
- content: '';
-
- background-color: inherit;
- background-image: @tagTriangleBackgroundImage;
-
- width: @tagTriangleSize;
- height: @tagTriangleSize;
- transition: @tagTransition;
- }
-
-
- .ui.tag.labels .label:after,
- .ui.tag.label:after {
- position: absolute;
- content: '';
- top: 50%;
- left: -(@tagCircleSize / 2);
-
- margin-top: -(@tagCircleSize / 2);
- background-color: @tagCircleColor;
- width: @tagCircleSize;
- height: @tagCircleSize;
-
- box-shadow: @tagCircleBoxShadow;
- border-radius: @circularRadius;
- }
- & when (@variationLabelBasic) {
- .ui.basic.tag.labels .label:before,
- .ui.basic.tag.label:before {
- border-color: inherit;
- border-width: @basicBorderWidth 0 0 @basicBorderWidth;
- border-style: inherit;
- right: @basicBorderFullWidthOffset;
- }
- .ui.basic.tag.labels .label:after,
- .ui.basic.tag.label:after {
- box-shadow: @basicTagCircleBoxShadow;
- }
- }
-}
-
-& when (@variationLabelCorner) {
-/*-------------------
- Corner Label
---------------------*/
-
- .ui.corner.label {
- position: absolute;
- top: 0;
- right: 0;
- margin: 0;
- padding: 0;
- text-align: center;
-
- border-color: @backgroundColor;
-
- width: @cornerTriangleSize;
- height: @cornerTriangleSize;
- z-index: @cornerTriangleZIndex;
- transition: @cornerTriangleTransition;
- }
-
- /* Icon Label */
- .ui.corner.label{
- background-color: transparent !important;
- }
- .ui.corner.label:after {
- position: absolute;
- content: "";
- right: 0;
- top: 0;
- z-index: -1;
-
- width: 0;
- height: 0;
- background-color: transparent;
-
- border-top: 0 solid transparent;
- border-right: @cornerTriangleSize solid transparent;
- border-bottom: @cornerTriangleSize solid transparent;
- border-left: 0 solid transparent;
-
- border-right-color: inherit;
- transition: @cornerTriangleTransition;
- }
-
- .ui.corner.label .icon {
- cursor: inherit;
- position: absolute;
- top: @cornerIconTopOffset;
- left: auto;
- right: @cornerIconRightOffset;
- font-size: @cornerIconSize;
- margin: 0;
- }
-
- /* Left Corner */
- .ui.left.corner.label,
- .ui.left.corner.label:after {
- right: auto;
- left: 0;
- }
- .ui.left.corner.label:after {
- border-top: @cornerTriangleSize solid transparent;
- border-right: @cornerTriangleSize solid transparent;
- border-bottom: 0 solid transparent;
- border-left: 0 solid transparent;
-
- border-top-color: inherit;
- }
- .ui.left.corner.label .icon {
- left: @cornerIconLeftOffset;
- right: auto;
- }
-
- /* Segment */
- .ui.segment > .ui.corner.label {
- top: -1px;
- right: -1px;
- }
- .ui.segment > .ui.left.corner.label {
- right: auto;
- left: -1px;
- }
-}
-
-& when (@variationLabelRibbon) {
- /*-------------------
- Ribbon
- --------------------*/
-
- .ui.ribbon.label {
- position: relative;
- margin: 0;
- min-width: max-content;
- border-radius: 0 @borderRadius @borderRadius 0;
- border-color: @ribbonShadowColor;
- }
-
- .ui.ribbon.label:after {
- position: absolute;
- content: '';
-
- top: 100%;
- left: 0;
- background-color: transparent;
-
- border-style: solid;
- border-width: 0 @ribbonTriangleSize @ribbonTriangleSize 0;
- border-color: transparent;
- border-right-color: inherit;
-
- width: 0;
- height: 0;
- }
- /* Positioning */
- .ui.ribbon.label {
- left: @ribbonOffset;
- margin-right: -@ribbonTriangleSize;
- padding-left: @ribbonDistance;
- padding-right: @ribbonTriangleSize;
- }
- .ui[class*="right ribbon"].label {
- left: @rightRibbonOffset;
- padding-left: @ribbonTriangleSize;
- padding-right: @ribbonDistance;
- }
- & when (@variationLabelBasic) {
- .ui.basic.ribbon.label {
- padding-top: @basicRibbonOffset;
- padding-bottom: @basicRibbonOffset;
- }
- .ui.basic.ribbon.label:not([class*="right ribbon"]) {
- padding-left: @basicRibbonTriangleSizeOffset;
- padding-right: @basicRibbonTriangleSize;
- }
- .ui.basic[class*="right ribbon"].label {
- padding-left: @basicRibbonTriangleSize;
- padding-right: @basicRibbonTriangleSizeOffset;
- }
- .ui.basic.ribbon.label::after {
- top: @basicBorderFullWidthOffset;
- }
- .ui.basic.ribbon.label:not([class*="right ribbon"])::after {
- left: @basicBorderWidthOffset;
- }
- .ui.basic[class*="right ribbon"].label::after {
- right: @basicBorderWidthOffset;
- }
- }
- /* Right Ribbon */
- .ui[class*="right ribbon"].label {
- text-align: left;
- transform: translateX(-100%);
- border-radius: @borderRadius 0 0 @borderRadius;
- }
- .ui[class*="right ribbon"].label:after {
- left: auto;
- right: 0;
-
- border-style: solid;
- border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0;
- border-color: transparent;
- border-top-color: inherit;
- }
-
- /* Inside Table */
- .ui.image > .ribbon.label,
- .ui.card .image > .ribbon.label {
- position: absolute;
- top: @ribbonImageTopDistance;
- }
- .ui.card .image > .ui.ribbon.label,
- .ui.image > .ui.ribbon.label {
- left: @ribbonImageOffset;
- }
- .ui.card .image > .ui[class*="right ribbon"].label,
- .ui.image > .ui[class*="right ribbon"].label {
- left: @rightRibbonImageOffset;
- padding-left: @horizontalPadding;
- }
-
- /* Inside Table */
- .ui.table td > .ui.ribbon.label {
- left: @ribbonTableOffset;
- }
- .ui.table td > .ui[class*="right ribbon"].label {
- left: @rightRibbonTableOffset;
- padding-left: @horizontalPadding;
- }
-}
-
-& when (@variationLabelAttached) {
- /*-------------------
- Attached
- --------------------*/
-
- .ui[class*="top attached"].label,
- .ui.attached.label {
- width: 100%;
- position: absolute;
- margin: 0;
- top: 0;
- left: 0;
-
- padding: @attachedVerticalPadding @attachedHorizontalPadding;
-
- border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0 0;
- }
- .ui[class*="bottom attached"].label {
- top: auto;
- bottom: 0;
- border-radius: 0 0 @attachedCornerBorderRadius @attachedCornerBorderRadius;
- }
-
- .ui[class*="top left attached"].label {
- width: auto;
- margin-top: 0;
- border-radius: @attachedCornerBorderRadius 0 @attachedBorderRadius 0;
- }
-
- .ui[class*="top right attached"].label {
- width: auto;
- left: auto;
- right: 0;
- border-radius: 0 @attachedCornerBorderRadius 0 @attachedBorderRadius;
- }
- .ui[class*="bottom left attached"].label {
- width: auto;
- top: auto;
- bottom: 0;
- border-radius: 0 @attachedBorderRadius 0 @attachedCornerBorderRadius;
- }
- .ui[class*="bottom right attached"].label {
- top: auto;
- bottom: 0;
- left: auto;
- right: 0;
- width: auto;
- border-radius: @attachedBorderRadius 0 @attachedCornerBorderRadius 0;
- }
-}
-
-/*******************************
- States
-*******************************/
-
-/*-------------------
- Disabled
---------------------*/
-& when (@variationLabelDisabled) {
- .ui.label.disabled {
- opacity: 0.5;
- }
-}
-/*-------------------
- Hover
---------------------*/
-
-.ui.labels a.label:hover,
-a.ui.label:hover {
- background-color: @labelHoverBackgroundColor;
- border-color: @labelHoverBackgroundColor;
-
- background-image: @labelHoverBackgroundImage;
- color: @labelHoverTextColor;
-}
-.ui.labels a.label:hover:before,
-a.ui.label:hover:before {
- color: @labelHoverTextColor;
-}
-
-/*-------------------
- Active
---------------------*/
-
-.ui.active.label {
- background-color: @labelActiveBackgroundColor;
- border-color: @labelActiveBackgroundColor;
-
- background-image: @labelActiveBackgroundImage;
- color: @labelActiveTextColor;
-}
-.ui.active.label:before {
- background-color: @labelActiveBackgroundColor;
- background-image: @labelActiveBackgroundImage;
- color: @labelActiveTextColor;
-}
-
-/*-------------------
- Active Hover
---------------------*/
-
-.ui.labels a.active.label:hover,
-a.ui.active.label:hover {
- background-color: @labelActiveHoverBackgroundColor;
- border-color: @labelActiveHoverBackgroundColor;
-
- background-image: @labelActiveHoverBackgroundImage;
- color: @labelActiveHoverTextColor;
-}
-.ui.labels a.active.label:hover:before,
-a.ui.active.label:hover:before {
- background-color: @labelActiveHoverBackgroundColor;
- background-image: @labelActiveHoverBackgroundImage;
- color: @labelActiveHoverTextColor;
-}
-
-
-/*-------------------
- Visible
---------------------*/
-
-.ui.labels.visible .label,
-.ui.label.visible:not(.dropdown) {
- display: inline-block !important;
-}
-
-/*-------------------
- Hidden
---------------------*/
-
-.ui.labels.hidden .label,
-.ui.label.hidden {
- display: none !important;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-
-& when (@variationLabelBasic) {
- /*-------------------
- Basic
- --------------------*/
-
- .ui.basic.labels .label,
- .ui.basic.label {
- background: @basicBackground;
- border: @basicBorder;
- color: @basicColor;
- box-shadow: @basicBoxShadow;
- padding-top: @basicVerticalPadding;
- padding-bottom: @basicVerticalPadding;
- padding-right: @basicHorizontalPadding;
- }
- .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
- .ui.basic.label:not(.tag):not(.image):not(.ribbon) {
- padding-left: @basicHorizontalPadding;
- }
- & when (@variationLabelImage) {
- .ui.basic.image.label {
- padding-left: @basicImageLabelPadding;
- }
- }
-
- /* Link */
- .ui.basic.labels a.label:hover,
- a.ui.basic.label:hover {
- text-decoration: none;
- background: @basicHoverBackground;
- color: @basicHoverColor;
- box-shadow: @basicHoverBoxShadow;
- }
- & when (@variationLabelPointing) {
- /* Pointing */
- .ui.basic.pointing.label:before {
- border-color: inherit;
- }
- }
-}
-
-& when (@variationLabelFluid) {
- /*-------------------
- Fluid
- --------------------*/
-
- .ui.label.fluid,
- .ui.fluid.labels > .label {
- width: 100%;
- box-sizing: border-box;
- }
-}
-
-& when (@variationLabelInverted) {
- /*-------------------
- Inverted
- --------------------*/
-
- .ui.inverted.labels .label,
- .ui.inverted.label {
- color: @invertedTextColor;
- background-color: @invertedBackgroundColor;
- }
- .ui.inverted.corner.label {
- border-color: @invertedBackgroundColor;
- }
- .ui.inverted.corner.label:hover {
- border-color: @backgroundColor;
- transition: none;
- }
- .ui.inverted.basic.labels .label,
- .ui.inverted.basic.label,
- .ui.inverted.basic.label:hover {
- border-color: @basicInvertedBorderColor;
- background: @black;
- }
- .ui.inverted.basic.label:hover {
- color: @linkColor;
- }
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors,{
- @color : replace(@key,'@','');
- @isDark : @colors[@@color][isDark];
- @_labelColor : @colors[@@color][color];
- @_labelInvertedColor : @colors[@@color][light];
- @_labelTextColor : @colors[@@color][text];
- @_labelHover : @colors[@@color][hover];
- @_labelInvertedHover : @colors[@@color][lightHover];
- @_labelHoverTextColor : @colors[@@color][hoverText];
- @_labelRibbonShadow : @colors[@@color][ribbon];
- @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon];
-
- .ui.@{color}.labels .label,
- .ui.ui.ui.@{color}.label {
- background-color: @_labelColor;
- border-color: @_labelColor;
- color: @_labelTextColor;
- }
- /* Link */
- .ui.@{color}.labels a.label:hover,
- a.ui.ui.ui.@{color}.label:hover{
- background-color: @_labelHover;
- border-color: @_labelHover;
- color: @_labelHoverTextColor;
- }
- & when (@variationLabelRibbon) {
- /* Ribbon */
- .ui.ui.ui.@{color}.ribbon.label {
- border-color: @_labelRibbonShadow;
- }
- }
- & when (@variationLabelBasic) {
- /* Basic */
- .ui.basic.labels .@{color}.label,
- .ui.ui.ui.basic.@{color}.label {
- background: @basicBackground;
- border-color: @_labelColor;
- color: @_labelColor;
- }
- .ui.basic.labels a.@{color}.label:hover,
- a.ui.ui.ui.basic.@{color}.label:hover {
- background: @basicBackground;
- border-color: @_labelHover;
- color: @_labelHover;
- }
- }
- & when (@variationLabelInverted) {
- /* Inverted */
- .ui.inverted.labels .@{color}.label,
- .ui.ui.ui.inverted.@{color}.label {
- background-color: @_labelInvertedColor;
- border-color: @_labelInvertedColor;
- color: @black;
- }
- /* Inverted Link */
- .ui.inverted.labels a.@{color}.label:hover,
- a.ui.ui.ui.inverted.@{color}.label:hover{
- background-color: @_labelInvertedHover;
- border-color: @_labelInvertedHover;
- & when not (@isDark) {
- color: @black;
- }
- & when (@isDark) {
- color: @_labelTextColor;
- }
- }
- & when (@variationLabelRibbon) {
- /* Inverted Ribbon */
- .ui.ui.ui.inverted.@{color}.ribbon.label {
- border-color: @_labelInvertedRibbonShadow;
- }
- }
- & when (@variationLabelBasic) {
- /* Inverted Basic */
- .ui.inverted.basic.labels .@{color}.label,
- .ui.ui.ui.inverted.basic.@{color}.label {
- background-color: @invertedBackground;
- border-color: @_labelInvertedColor;
- & when not (@isDark) {
- color: @_labelInvertedColor;
- }
- & when (@isDark) {
- color: @invertedTextColor;
- }
- }
- .ui.inverted.basic.labels a.@{color}.label:hover,
- a.ui.ui.ui.inverted.basic.@{color}.label:hover {
- border-color: @_labelInvertedHover;
- background-color: @invertedBackground;
- & when not (@isDark) {
- color: @_labelInvertedHover;
- }
- }
- & when (@variationLabelTag) {
- /* Inverted Basic Tags */
- .ui.inverted.basic.tag.labels .@{color}.label,
- .ui.ui.ui.inverted.@{color}.basic.tag.label {
- border: @invertedBorderSize solid @_labelInvertedColor;
- }
- .ui.inverted.basic.tag.labels .@{color}.label:before,
- .ui.ui.ui.inverted.@{color}.basic.tag.label:before {
- border-color: inherit;
- border-width: @invertedBorderSize 0 0 @invertedBorderSize;
- border-style: inherit;
- background-color: @invertedBackground;
- right: e(%("calc(100%% + %d)", @invertedBorderSize));
- }
- }
- }
- }
-})
-
-/*-------------------
- Horizontal
---------------------*/
-
-.ui.horizontal.labels .label,
-.ui.horizontal.label {
- margin: 0 @horizontalLabelMargin 0 0;
-
- padding: @horizontalLabelVerticalPadding @horizontalPadding;
- min-width: @horizontalLabelMinWidth;
- text-align: center;
-}
-
-& when (@variationLabelCircular) {
- /*-------------------
- Circular
- --------------------*/
-
- .ui.circular.labels .label,
- .ui.circular.label {
- min-width: @circularMinSize;
- min-height: @circularMinSize;
-
- padding: @circularPadding !important;
-
- line-height: 1em;
- text-align: center;
- border-radius: @circularRadius;
- }
- .ui.empty.circular.labels .label,
- .ui.empty.circular.label {
- min-width: 0;
- min-height: 0;
- overflow: hidden;
- width: @emptyCircleSize;
- height: @emptyCircleSize;
- vertical-align: baseline;
- }
-}
-
-& when (@variationLabelPointing) {
- /*-------------------
- Pointing
- --------------------*/
-
- .ui.pointing.label {
- position: relative;
- }
-
- .ui.attached.pointing.label {
- position: absolute;
- }
-
- .ui.pointing.label:before {
- background-color: inherit;
- background-image: inherit;
- border-width: 0;
- border-style: solid;
- border-color: @pointingBorderColor;
- }
- /* Arrow */
- .ui.pointing.label:before {
- position: absolute;
- content: '';
- transform: rotate(45deg);
- background-image: none;
-
- z-index: @pointingTriangleZIndex;
- width: @pointingTriangleSize;
- height: @pointingTriangleSize;
- transition: @pointingTriangleTransition;
- }
-
- /*--- Above ---*/
- .ui.pointing.label,
- .ui[class*="pointing above"].label {
- margin-top: @pointingVerticalDistance;
- }
- .ui.pointing.label:before,
- .ui[class*="pointing above"].label:before {
- border-width: @borderWidth 0 0 @borderWidth;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- top: 0;
- left: 50%;
- }
- /*--- Below ---*/
- .ui[class*="bottom pointing"].label,
- .ui[class*="pointing below"].label {
- margin-top: 0;
- margin-bottom: @pointingVerticalDistance;
- }
- .ui[class*="bottom pointing"].label:before,
- .ui[class*="pointing below"].label:before {
- border-width: 0 @borderWidth @borderWidth 0;
- top: auto;
- right: auto;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- top: 100%;
- left: 50%;
- }
- /*--- Left ---*/
- .ui[class*="left pointing"].label {
- margin-top: 0;
- margin-left: @pointingHorizontalDistance;
- }
- .ui[class*="left pointing"].label:before {
- border-width: 0 0 @borderWidth @borderWidth;
- transform: translateX(-50%) translateY(-50%) rotate(45deg);
- bottom: auto;
- right: auto;
- top: 50%;
- left: 0;
- }
- /*--- Right ---*/
- .ui[class*="right pointing"].label {
- margin-top: 0;
- margin-right: @pointingHorizontalDistance;
- }
- .ui[class*="right pointing"].label:before {
- border-width: @borderWidth @borderWidth 0 0;
- transform: translateX(50%) translateY(-50%) rotate(45deg);
- top: 50%;
- right: 0;
- bottom: auto;
- left: auto;
- }
- & when (@variationLabelBasic) {
- /* Basic Pointing */
-
- /*--- Above ---*/
- .ui.basic.pointing.label:before,
- .ui.basic[class*="pointing above"].label:before {
- margin-top: @basicPointingTriangleOffset;
- }
- /*--- Below ---*/
- .ui.basic[class*="bottom pointing"].label:before,
- .ui.basic[class*="pointing below"].label:before {
- bottom: auto;
- top: 100%;
- margin-top: -@basicPointingTriangleOffset;
- }
- /*--- Left ---*/
- .ui.basic[class*="left pointing"].label:before {
- top: 50%;
- left: @basicPointingTriangleOffset;
- }
- /*--- Right ---*/
- .ui.basic[class*="right pointing"].label:before {
- top: 50%;
- right: @basicPointingTriangleOffset;
- }
- }
-}
-
-& when (@variationLabelFloating) {
- /*------------------
- Floating Label
- -------------------*/
-
- .ui.floating.label {
- position: absolute;
- z-index: @floatingZIndex;
- top: @floatingTopOffset;
- right: 0;
- white-space: nowrap;
- transform: translateX(50%);
- }
- .ui.right.aligned.floating.label {
- transform: translateX(@floatingAlignOffset);
- }
- .ui.left.floating.label {
- left:0;
- right:auto;
- transform: translateX(-50%);
- }
- .ui.left.aligned.floating.label {
- transform: translateX(-@floatingAlignOffset);
- }
- .ui.bottom.floating.label {
- top: auto;
- bottom: @floatingBottomOffset;
- }
-}
-
-/*-------------------
- Sizes
---------------------*/
-
-.ui.labels .label,
-.ui.label {
- font-size: @medium;
-}
-& when not (@variationLabelSizes = false) {
- each(@variationLabelSizes, {
- @s: @@value;
- .ui.@{value}.labels .label,
- .ui.@{value}.label {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/list.less b/semantic/src/definitions/elements/list.less
deleted file mode 100644
index ca1abdc..0000000
--- a/semantic/src/definitions/elements/list.less
+++ /dev/null
@@ -1,1021 +0,0 @@
-/*!
- * # Fomantic-UI - List
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'list';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- List
-*******************************/
-
-ul.ui.list,
-ol.ui.list,
-.ui.list {
- list-style-type: @listStyleType;
- margin: @margin;
- padding: @verticalPadding @horizontalPadding;
-}
-
-ul.ui.list:first-child,
-ol.ui.list:first-child,
-.ui.list:first-child {
- margin-top: 0;
- padding-top: 0;
-}
-
-ul.ui.list:last-child,
-ol.ui.list:last-child,
-.ui.list:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
-}
-
-/*******************************
- Content
-*******************************/
-
-/* List Item */
-ul.ui.list li,
-ol.ui.list li,
-.ui.list > .item,
-.ui.list .list > .item {
- display: list-item;
- table-layout: fixed;
- list-style-type: @listStyleType;
- list-style-position: @listStylePosition;
-
- padding: @itemPadding;
- line-height: @itemLineHeight;
-}
-
-ul.ui.list > li:first-child:after,
-ol.ui.list > li:first-child:after,
-.ui.list > .list > .item:after,
-.ui.list > .item:after {
- content: '';
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
-}
-
-ul.ui.list li:first-child,
-ol.ui.list li:first-child,
-.ui.list .list > .item:first-child,
-.ui.list > .item:first-child {
- padding-top: 0;
-}
-ul.ui.list li:last-child,
-ol.ui.list li:last-child,
-.ui.list .list > .item:last-child,
-.ui.list > .item:last-child {
- padding-bottom: 0;
-}
-
-/* Child List */
-ul.ui.list ul,
-ol.ui.list ol,
-.ui.list .list:not(.icon) {
- clear: both;
- margin: 0;
- padding: @childListPadding;
-}
-
-/* Child Item */
-ul.ui.list ul li,
-ol.ui.list ol li,
-.ui.list .list > .item {
- padding: @childItemPadding;
- line-height: @childItemLineHeight;
-}
-
-& when (@variationListIcon) {
- /* Icon */
- .ui.list .list > .item > i.icon,
- .ui.list > .item > i.icon {
- display: table-cell;
- min-width: 1.55em;
- margin: 0;
- padding-top: @iconOffset;
- transition: @iconTransition;
- &:not(.loading) {
- padding-right: @iconDistance;
- vertical-align: @iconContentVerticalAlign;
- }
- }
- .ui.list .list > .item > i.icon:only-child,
- .ui.list > .item > i.icon:only-child {
- display: inline-block;
- min-width: auto;
- vertical-align: @iconVerticalAlign;
- }
-}
-
-& when (@variationListImage) {
- /* Image */
- .ui.list .list > .item > .image,
- .ui.list > .item > .image {
- display: table-cell;
- background-color: transparent;
- margin: 0;
- vertical-align: @imageAlign;
- }
- .ui.list .list > .item > .image:not(:only-child):not(img),
- .ui.list > .item > .image:not(:only-child):not(img) {
- padding-right: @imageDistance;
- }
- .ui.list .list > .item > .image img,
- .ui.list > .item > .image img {
- vertical-align: @imageAlign;
- }
-
- .ui.list .list > .item > img.image,
- .ui.list .list > .item > .image:only-child,
- .ui.list > .item > img.image,
- .ui.list > .item > .image:only-child {
- display: inline-block;
- }
-}
-
-/* Content */
-.ui.list .list > .item > .content,
-.ui.list > .item > .content {
- line-height: @contentLineHeight;
- color: @contentColor;
-}
-& when (@variationListImage) or (@variationListIcon) {
- .ui.list .list > .item > .image + .content,
- .ui.list .list > .item > i.icon + .content,
- .ui.list > .item > .image + .content,
- .ui.list > .item > i.icon + .content {
- display: table-cell;
- width: 100%;
- padding: 0 0 0 @contentDistance;
- vertical-align: @contentVerticalAlign;
- }
-}
-& when (@variationListIcon) {
- .ui.list .list > .item > i.loading.icon + .content,
- .ui.list > .item > i.loading.icon + .content {
- padding-left: e(%("calc(%d + %d)", @iconDistance, @contentDistance));
- }
-}
-& when (@variationListImage) {
- .ui.list .list > .item > img.image + .content,
- .ui.list > .item > img.image + .content {
- display: inline-block;
- width: auto;
- }
-}
-.ui.list .list > .item > .content > .list,
-.ui.list > .item > .content > .list {
- margin-left: 0;
- padding-left: 0;
-}
-
-/* Header */
-.ui.list .list > .item .header,
-.ui.list > .item .header {
- display: block;
- margin: 0;
- font-family: @itemHeaderFontFamily;
- font-weight: @itemHeaderFontWeight;
- color: @itemHeaderColor;
-}
-
-/* Description */
-.ui.list .list > .item .description,
-.ui.list > .item .description {
- display: block;
- color: @itemDescriptionColor;
-}
-
-/* Child Link */
-.ui.list > .item a,
-.ui.list .list > .item a {
- cursor: pointer;
-}
-
-/* Linking Item */
-.ui.list .list > a.item,
-.ui.list > a.item {
- cursor: pointer;
- color: @itemLinkColor;
-}
-.ui.list .list > a.item:hover,
-.ui.list > a.item:hover {
- color: @itemLinkHoverColor;
-}
-
-& when (@variationListIcon) {
- /* Linked Item Icons */
- .ui.list .list > a.item > i.icons,
- .ui.list > a.item > i.icons,
- .ui.list .list > a.item > i.icon,
- .ui.list > a.item > i.icon {
- color: @itemLinkIconColor;
- }
-}
-
-/* Header Link */
-.ui.list .list > .item a.header,
-.ui.list > .item a.header {
- cursor: pointer;
- color: @itemHeaderLinkColor !important;
-}
-.ui.list .list > .item > a.header:hover,
-.ui.list > .item > a.header:hover {
- color: @itemHeaderLinkHoverColor !important;
-}
-
-& when (@variationListFloated) {
- /* Floated Content */
- .ui[class*="left floated"].list {
- float: left;
- }
- .ui[class*="right floated"].list {
- float: right;
- }
-
- .ui.list .list > .item [class*="left floated"],
- .ui.list > .item [class*="left floated"] {
- float: left;
- margin: @leftFloatMargin;
- }
- .ui.list .list > .item [class*="right floated"],
- .ui.list > .item [class*="right floated"] {
- float: right;
- margin: @rightFloatMargin;
- }
-}
-
-/*******************************
- Coupling
-*******************************/
-
-.ui.menu .ui.list > .item,
-.ui.menu .ui.list .list > .item {
- display: list-item;
- table-layout: fixed;
- background-color: transparent;
-
- list-style-type: @listStyleType;
- list-style-position: @listStylePosition;
-
- padding: @itemVerticalPadding @itemHorizontalPadding;
- line-height: @itemLineHeight;
-}
-.ui.menu .ui.list .list > .item:before,
-.ui.menu .ui.list > .item:before {
- border: none;
- background: none;
-}
-.ui.menu .ui.list .list > .item:first-child,
-.ui.menu .ui.list > .item:first-child {
- padding-top: 0;
-}
-.ui.menu .ui.list .list > .item:last-child,
-.ui.menu .ui.list > .item:last-child {
- padding-bottom: 0;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationListHorizontal) {
- /*-------------------
- Horizontal
- --------------------*/
-
- .ui.horizontal.list {
- display: inline-block;
- font-size: 0;
- }
- .ui.horizontal.list > .item {
- display: inline-block;
- margin-right: @horizontalSpacing;
- font-size: 1rem;
- }
- .ui.horizontal.list:not(.celled) > .item:last-child {
- margin-right: 0;
- padding-right: 0;
- }
- .ui.horizontal.list .list:not(.icon) {
- padding-left: 0;
- padding-bottom: 0;
- }
- .ui.horizontal.list > .item > .image,
- .ui.horizontal.list .list > .item > .image,
- .ui.horizontal.list > .item > i.icon,
- .ui.horizontal.list .list > .item > i.icon,
- .ui.horizontal.list > .item > .content,
- .ui.horizontal.list .list > .item > .content {
- vertical-align: @horizontalVerticalAlign;
- }
-
- /* Padding on all elements */
- .ui.horizontal.list > .item:first-child,
- .ui.horizontal.list > .item:last-child {
- padding-top: @itemVerticalPadding;
- padding-bottom: @itemVerticalPadding;
- }
- & when (@variationListIcon) {
- /* Horizontal List */
- .ui.horizontal.list > .item > i.icon ,
- .ui.horizontal.list .item > i.icons > i.icon {
- margin: 0;
- padding: 0 @horizontalIconDistance 0 0;
- }
- }
- & when (@variationListImage) or (@variationListIcon) {
- .ui.horizontal.list > .item > .image + .content,
- .ui.horizontal.list > .item > i.icon,
- .ui.horizontal.list > .item > i.icon + .content {
- float: none;
- display: inline-block;
- width: auto;
- }
- }
- & when (@variationListImage) {
- .ui.horizontal.list > .item > .image {
- display: inline-block;
- }
- }
-}
-
-/*******************************
- States
-*******************************/
-
-& when (@variationListDisabled) {
- /*-------------------
- Disabled
- --------------------*/
-
- .ui.list .list > .disabled.item,
- .ui.list > .disabled.item {
- pointer-events: none;
- color: @disabledColor !important;
- }
- & when (@variationListInverted) {
- .ui.inverted.list .list > .disabled.item,
- .ui.inverted.list > .disabled.item {
- color: @invertedDisabledColor !important;
- }
- }
-}
-
-/*-------------------
- Hover
---------------------*/
-& when (@variationListIcon) {
- .ui.list .list > a.item:hover > .icons,
- .ui.list > a.item:hover > .icons,
- .ui.list .list > a.item:hover > i.icon,
- .ui.list > a.item:hover > i.icon {
- color: @itemLinkIconHoverColor;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationListInverted) {
- /*-------------------
- Inverted
- --------------------*/
- & when (@variationListIcon) {
- .ui.inverted.list .list > a.item > i.icon,
- .ui.inverted.list > a.item > i.icon {
- color: @invertedIconLinkColor;
- }
- }
- .ui.inverted.list .list > .item .header,
- .ui.inverted.list > .item .header {
- color: @invertedHeaderColor;
- }
- .ui.inverted.list .list > .item .description,
- .ui.inverted.list > .item .description {
- color: @invertedDescriptionColor;
- }
- .ui.inverted.list .list > .item > .content,
- .ui.inverted.list > .item > .content {
- color: @invertedContentColor;
- }
- /* Item Link */
- .ui.inverted.list .list > a.item,
- .ui.inverted.list > a.item {
- cursor: pointer;
- color: @invertedItemLinkColor;
- }
- .ui.inverted.list .list > a.item:hover,
- .ui.inverted.list > a.item:hover {
- color: @invertedItemLinkHoverColor;
- }
-
-
- /* Linking Content */
- .ui.inverted.list .item a:not(.ui) {
- color: @invertedItemLinkColor !important;
- }
- .ui.inverted.list .item a:not(.ui):hover {
- color: @invertedItemLinkHoverColor !important;
- }
-}
-
-& when (@variationListAligned) {
- /*-------------------
- Aligned
- --------------------*/
-
- .ui.list[class*="top aligned"] .image,
- .ui.list[class*="top aligned"] .content,
- .ui.list [class*="top aligned"] {
- vertical-align: top !important;
- }
- .ui.list[class*="middle aligned"] .image,
- .ui.list[class*="middle aligned"] .content,
- .ui.list [class*="middle aligned"] {
- vertical-align: middle !important;
- }
- .ui.list[class*="bottom aligned"] .image,
- .ui.list[class*="bottom aligned"] .content,
- .ui.list [class*="bottom aligned"] {
- vertical-align: bottom !important;
- }
-}
-
-& when (@variationListLink) {
- /*-------------------
- Link
- --------------------*/
-
- .ui.link.list .item,
- .ui.link.list a.item,
- .ui.link.list .item a:not(.ui) {
- color: @linkListItemColor;
- transition: @linkListTransition;
- }
- .ui.link.list.list a.item:hover,
- .ui.link.list.list .item a:not(.ui):hover {
- color: @linkListItemHoverColor;
- }
- .ui.link.list.list a.item:active,
- .ui.link.list.list .item a:not(.ui):active {
- color: @linkListItemDownColor;
- }
- .ui.link.list.list .active.item,
- .ui.link.list.list .active.item a:not(.ui) {
- color: @linkListItemActiveColor;
- }
- & when (@variationListInverted) {
- /* Inverted */
- .ui.inverted.link.list .item,
- .ui.inverted.link.list a.item,
- .ui.inverted.link.list .item a:not(.ui) {
- color: @invertedLinkListItemColor;
- }
- .ui.inverted.link.list.list a.item:hover,
- .ui.inverted.link.list.list .item a:not(.ui):hover {
- color: @invertedLinkListItemHoverColor;
- }
- .ui.inverted.link.list.list a.item:active,
- .ui.inverted.link.list.list .item a:not(.ui):active {
- color: @invertedLinkListItemDownColor;
- }
- .ui.inverted.link.list.list a.active.item,
- .ui.inverted.link.list.list .active.item a:not(.ui) {
- color: @invertedLinkListItemActiveColor;
- }
- }
-}
-
-& when (@variationListSelection) {
- /*-------------------
- Selection
- --------------------*/
-
- .ui.selection.list .list > .item,
- .ui.selection.list > .item {
- cursor: pointer;
- background: @selectionListBackground;
- padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
- margin: @selectionListItemMargin;
- color: @selectionListColor;
- border-radius: @selectionListItemBorderRadius;
- transition: @selectionListTransition;
- }
- .ui.selection.list .list > .item:last-child,
- .ui.selection.list > .item:last-child {
- margin-bottom: 0;
- }
- .ui.selection.list .list > .item:hover,
- .ui.selection.list > .item:hover {
- background: @selectionListHoverBackground;
- color: @selectionListHoverColor;
- }
- .ui.selection.list .list > .item:active,
- .ui.selection.list > .item:active {
- background: @selectionListDownBackground;
- color: @selectionListDownColor;
- }
- .ui.selection.list .list > .item.active,
- .ui.selection.list > .item.active {
- background: @selectionListActiveBackground;
- color: @selectionListActiveColor;
- }
-
- & when (@variationListInverted) {
- /* Inverted */
- .ui.inverted.selection.list > .item {
- background: @invertedSelectionListBackground;
- color: @invertedSelectionListColor;
- }
- .ui.inverted.selection.list > .item:hover {
- background: @invertedSelectionListHoverBackground;
- color: @invertedSelectionListHoverColor;
- }
- .ui.inverted.selection.list > .item:active {
- background: @invertedSelectionListDownBackground;
- color: @invertedSelectionListDownColor;
- }
- .ui.inverted.selection.list > .item.active {
- background: @invertedSelectionListActiveBackground;
- color: @invertedSelectionListActiveColor;
- }
- }
-
- & when (@variationListCelled) or (@variationListDivided) {
- /* Celled / Divided Selection List */
- .ui.celled.selection.list .list > .item,
- .ui.divided.selection.list .list > .item,
- .ui.celled.selection.list > .item,
- .ui.divided.selection.list > .item {
- border-radius: 0;
- }
- }
-}
-
-& when (@variationListAnimated) {
- /*-------------------
- Animated
- --------------------*/
-
- .ui.animated.list > .item {
- transition: @animatedListTransition;
- }
- .ui.animated.list:not(.horizontal) > .item:hover {
- padding-left: @animatedListIndent;
- }
-}
-
-& when (@variationListFitted) {
- /*-------------------
- Fitted
- --------------------*/
- .ui.fitted.list:not(.selection) .list > .item,
- .ui.fitted.list:not(.selection) > .item {
- padding-left: 0;
- padding-right: 0;
- }
- .ui.fitted.selection.list .list > .item,
- .ui.fitted.selection.list > .item {
- margin-left: -@selectionListItemHorizontalPadding;
- margin-right: -@selectionListItemHorizontalPadding;
- }
-}
-
-& when (@variationListBulleted) {
- /*-------------------
- Bulleted
- --------------------*/
-
- ul.ui.list,
- .ui.bulleted.list {
- margin-left: @bulletDistance;
- }
- ul.ui.list li,
- .ui.bulleted.list .list > .item,
- .ui.bulleted.list > .item {
- position: relative;
- }
- ul.ui.list li:before,
- .ui.bulleted.list .list > .item:before,
- .ui.bulleted.list > .item:before {
- user-select: none;
- pointer-events: none;
- position: absolute;
- top: auto;
- left: auto;
- font-weight: @normal;
- margin-left: @bulletOffset;
- content: @bulletCharacter;
- opacity: @bulletOpacity;
- color: @bulletColor;
- vertical-align: @bulletVerticalAlign;
- }
-
- ul.ui.list li:before,
- .ui.bulleted.list .list > a.item:before,
- .ui.bulleted.list > a.item:before {
- color: @bulletLinkColor;
- }
-
- ul.ui.list ul,
- .ui.bulleted.list .list:not(.icon) {
- padding-left: @bulletChildDistance;
- }
-
- & when (@variationListHorizontal) {
- /* Horizontal Bulleted */
- ul.ui.horizontal.bulleted.list,
- .ui.horizontal.bulleted.list {
- margin-left: 0;
- }
- ul.ui.horizontal.bulleted.list li,
- .ui.horizontal.bulleted.list > .item {
- margin-left: @horizontalBulletSpacing;
- }
- ul.ui.horizontal.bulleted.list li:first-child,
- .ui.horizontal.bulleted.list > .item:first-child {
- margin-left: 0;
- }
- ul.ui.horizontal.bulleted.list li::before,
- .ui.horizontal.bulleted.list > .item::before {
- color: @horizontalBulletColor;
- }
- ul.ui.horizontal.bulleted.list li:first-child::before,
- .ui.horizontal.bulleted.list > .item:first-child::before {
- display: none;
- }
- }
-}
-
-& when (@variationListOrdered) {
- /*-------------------
- Ordered
- --------------------*/
-
- ol.ui.list,
- .ui.ordered.list,
- .ui.ordered.list .list:not(.icon),
- ol.ui.list ol {
- counter-reset: ordered;
- margin-left: @orderedCountDistance;
- list-style-type: none;
- }
- ol.ui.list li,
- .ui.ordered.list .list > .item,
- .ui.ordered.list > .item {
- list-style-type: none;
- position: relative;
- }
- ol.ui.list li:before,
- .ui.ordered.list .list > .item:before,
- .ui.ordered.list > .item:before {
- position: absolute;
- top: auto;
- left: auto;
- user-select: none;
- pointer-events: none;
- margin-left: -(@orderedCountDistance);
- counter-increment: @orderedCountName;
- content: @orderedCountContent;
- text-align: @orderedCountTextAlign;
- color: @orderedCountColor;
- vertical-align: @orderedCountVerticalAlign;
- opacity: @orderedCountOpacity;
- }
-
- & when (@variationListInverted) {
- ol.ui.inverted.list li:before,
- .ui.ordered.inverted.list .list > .item:before,
- .ui.ordered.inverted.list > .item:before {
- color: @orderedInvertedCountColor;
- }
- }
-
- /* Value */
- .ui.ordered.list .list > .item[data-value]:before,
- .ui.ordered.list > .item[data-value]:before {
- content: attr(data-value);
- }
- ol.ui.list li[value]:before {
- content: attr(value);
- }
-
- /* Child Lists */
- ol.ui.list ol,
- .ui.ordered.list .list:not(.icon) {
- margin-left: @orderedChildCountDistance;
- }
- ol.ui.list ol li:before,
- .ui.ordered.list .list > .item:before {
- margin-left: @orderedChildCountOffset;
- }
-
- & when (@variationListHorizontal) {
- /* Horizontal Ordered */
- ol.ui.horizontal.list,
- .ui.ordered.horizontal.list {
- margin-left: 0;
- }
- ol.ui.horizontal.list li:before,
- .ui.ordered.horizontal.list .list > .item:before,
- .ui.ordered.horizontal.list > .item:before {
- position: static;
- margin: 0 @horizontalOrderedCountDistance 0 0;
- }
- }
-}
-
-& when (@variationListSuffixed) {
- /* Suffixed Ordered */
- ol.ui.suffixed.list li:before,
- .ui.suffixed.ordered.list .list > .item:before,
- .ui.suffixed.ordered.list > .item:before {
- content: @orderedCountContentSuffixed;
- }
-}
-
-& when (@variationListDivided) {
- /*-------------------
- Divided
- --------------------*/
-
- .ui.divided.list > .item {
- border-top: @dividedBorder;
- }
- .ui.divided.list .list > .item {
- border-top: @dividedChildListBorder;
- }
- .ui.divided.list .item .list > .item {
- border-top: @dividedChildItemBorder;
- }
- .ui.divided.list .list > .item:first-child,
- .ui.divided.list > .item:first-child {
- border-top: none;
- }
-
- /* Sub Menu */
- .ui.divided.list:not(.horizontal) .list > .item:first-child {
- border-top-width: @dividedBorderWidth;
- }
-
- & when (@variationListBulleted) {
- /* Divided bulleted */
- .ui.divided.bulleted.list:not(.horizontal),
- .ui.divided.bulleted.list .list:not(.icon) {
- margin-left: 0;
- padding-left: 0;
- }
- .ui.divided.bulleted.list > .item:not(.horizontal) {
- padding-left: @bulletDistance;
- }
- }
-
- & when (@variationListOrdered) {
- /* Divided Ordered */
- .ui.divided.ordered.list {
- margin-left: 0;
- }
- .ui.divided.ordered.list .list > .item,
- .ui.divided.ordered.list > .item {
- padding-left: @orderedCountDistance;
- }
- .ui.divided.ordered.list .item .list:not(.icon) {
- margin-left: 0;
- margin-right: 0;
- padding-bottom: @itemVerticalPadding;
- }
- .ui.divided.ordered.list .item .list > .item {
- padding-left: @orderedChildCountDistance;
- }
- }
-
- & when (@variationListSelection) {
- /* Divided Selection */
-
- .ui.divided.selection.list .list > .item,
- .ui.divided.selection.list > .item {
- margin: 0;
- border-radius: 0;
- }
- }
-
- & when (@variationListHorizontal) {
- /* Divided horizontal */
- .ui.divided.horizontal.list {
- margin-left: 0;
- }
- .ui.divided.horizontal.list > .item {
- padding-left: @horizontalDividedSpacing;
- }
- .ui.divided.horizontal.list > .item:not(:last-child) {
- padding-right: @horizontalDividedSpacing;
- }
- .ui.divided.horizontal.list > .item {
- border-top: none;
- border-right: @dividedBorder;
- margin: 0;
- line-height: @horizontalDividedLineHeight;
- }
- .ui.horizontal.divided.list > .item:last-child {
- border-right: none;
- }
- }
-
- & when (@variationListInverted) {
- /* Inverted */
-
- .ui.divided.inverted.list > .item,
- .ui.divided.inverted.list > .list,
- .ui.divided.inverted.horizontal.list > .item {
- border-color: @dividedInvertedBorderColor;
- }
- }
-}
-
-& when (@variationListCelled) {
- /*-------------------
- Celled
- --------------------*/
-
- .ui.celled.list > .item,
- .ui.celled.list > .list {
- border-top: @celledBorder;
- padding-left: @celledHorizontalPadding;
- padding-right: @celledHorizontalPadding;
- }
- .ui.celled.list > .item:last-child {
- border-bottom: @celledBorder;
- }
-
- /* Padding on all elements */
- .ui.celled.list > .item:first-child,
- .ui.celled.list > .item:last-child {
- padding-top: @itemVerticalPadding;
- padding-bottom: @itemVerticalPadding;
- }
-
- /* Sub Menu */
- .ui.celled.list .item .list > .item {
- border-width: 0;
- }
- .ui.celled.list .list > .item:first-child {
- border-top-width: 0;
- }
-
- & when (@variationListBulleted) {
- /* Celled Bulleted */
- .ui.celled.bulleted.list {
- margin-left: 0;
- }
- .ui.celled.bulleted.list .list > .item,
- .ui.celled.bulleted.list > .item {
- padding-left: (@bulletDistance);
- }
- .ui.celled.bulleted.list .item .list:not(.icon) {
- margin-left: -(@bulletDistance);
- margin-right: -(@bulletDistance);
- padding-bottom: @itemVerticalPadding;
- }
- }
-
- & when (@variationListOrdered) {
- /* Celled Ordered */
- .ui.celled.ordered.list {
- margin-left: 0;
- }
- .ui.celled.ordered.list .list > .item,
- .ui.celled.ordered.list > .item {
- padding-left: @orderedCountDistance;
- }
- .ui.celled.ordered.list .item .list:not(.icon) {
- margin-left: 0;
- margin-right: 0;
- padding-bottom: @itemVerticalPadding;
- }
- .ui.celled.ordered.list .list > .item {
- padding-left: @orderedChildCountDistance;
- }
- }
-
- & when (@variationListHorizontal) {
- /* Celled Horizontal */
- .ui.horizontal.celled.list {
- margin-left: 0;
- }
- .ui.horizontal.celled.list .list > .item,
- .ui.horizontal.celled.list > .item {
- border-top: none;
- border-left: @celledBorder;
- margin: 0;
- padding-left: @horizontalCelledSpacing;
- padding-right: @horizontalCelledSpacing;
-
- line-height: @horizontalCelledLineHeight;
- }
- .ui.horizontal.celled.list .list > .item:last-child,
- .ui.horizontal.celled.list > .item:last-child {
- border-bottom: none;
- border-right: @celledBorder;
- }
- }
-
- & when (@variationListInverted) {
- /* Inverted */
- .ui.celled.inverted.list > .item,
- .ui.celled.inverted.list > .list {
- border-color: @celledInvertedBorder;
- }
- .ui.celled.inverted.horizontal.list .list > .item,
- .ui.celled.inverted.horizontal.list > .item {
- border-color: @celledInvertedBorder;
- }
- }
-}
-
-& when (@variationListRelaxed) {
- /*-------------------
- Relaxed
- --------------------*/
-
- .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
- padding-top: @relaxedItemVerticalPadding;
- }
- .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
- padding-bottom: @relaxedItemVerticalPadding;
- }
-
- & when (@variationListHorizontal) {
- .ui.horizontal.relaxed.list .list > .item:not(:first-child),
- .ui.horizontal.relaxed.list > .item:not(:first-child) {
- padding-left: @relaxedHorizontalPadding;
- }
- .ui.horizontal.relaxed.list .list > .item:not(:last-child),
- .ui.horizontal.relaxed.list > .item:not(:last-child) {
- padding-right: @relaxedHorizontalPadding;
- }
- }
-
- /* Very Relaxed */
- .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
- padding-top: @veryRelaxedItemVerticalPadding;
- }
- .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
- padding-bottom: @veryRelaxedItemVerticalPadding;
- }
-
- & when (@variationListHorizontal) {
- .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
- .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
- padding-left: @veryRelaxedHorizontalPadding;
- }
- .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
- .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
- padding-right: @veryRelaxedHorizontalPadding;
- }
- }
-}
-/*-------------------
- Sizes
---------------------*/
-
-.ui.list {
- font-size: @relativeMedium;
-}
-& when not (@variationListSizes = false) {
- each(@variationListSizes, {
- @rs: @{value}ListSize;
- @s: @@value;
- .ui.@{value}.list {
- font-size: @@rs;
- }
- & when (@variationListHorizontal) {
- .ui.@{value}.horizontal.list .list > .item,
- .ui.@{value}.horizontal.list > .item {
- font-size: @s;
- }
- }
- })
-}
-
-.loadUIOverrides();
-
diff --git a/semantic/src/definitions/elements/loader.less b/semantic/src/definitions/elements/loader.less
deleted file mode 100644
index 0b64a84..0000000
--- a/semantic/src/definitions/elements/loader.less
+++ /dev/null
@@ -1,416 +0,0 @@
-/*!
- * # Fomantic-UI - Loader
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'loader';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Loader
-*******************************/
-
-
-/* Standard Size */
-.ui.loader {
- display: none;
- position: absolute;
- top: @loaderTopOffset;
- left: @loaderLeftOffset;
- margin: 0;
- text-align: center;
- z-index: 1000;
- transform: translateX(-50%) translateY(-50%);
-}
-
-/* Static Shape */
-.ui.loader:before {
- position: absolute;
- content: '';
- top: 0;
- left: 50%;
- width: 100%;
- height: 100%;
-
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @loaderFillColor;
-}
-
-/* Active Shape */
-.ui.loader:after {
- position: absolute;
- content: '';
- top: 0;
- left: 50%;
- width: 100%;
- height: 100%;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid @shapeBorderColor;
- border-radius: @circularRadius;
-
- box-shadow: 0 0 0 1px transparent;
-}
-
-& when (@variationLoaderSpeeds) {
- /* Speeds */
-
- .ui.fast.loading.loading:after,
- .ui.fast.loading.loading .input > i.icon:after,
- .ui.fast.loading.loading > i.icon:after,
- .ui.fast.loader:after {
- animation-duration: @loaderSpeedFast;
- }
-
- .ui.slow.loading.loading:after,
- .ui.slow.loading.loading .input > i.icon:after,
- .ui.slow.loading.loading > i.icon:after,
- .ui.slow.loader:after {
- animation-duration: @loaderSpeedSlow;
- }
-}
-
-/* Active Animation */
-@keyframes loader {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-/*-------------------
- Coupling
---------------------*/
-
-/* Show inside active dimmer */
-.ui.dimmer > .loader {
- display: block;
-}
-
-/* Black Dimmer */
-.ui.dimmer > .ui.loader {
- color: @invertedLoaderTextColor;
-}
-.ui.dimmer > .ui.loader:not(.elastic):before {
- border-color: @invertedLoaderFillColor;
-}
-
-/* White Dimmer (Inverted) */
-.ui.inverted.dimmer > .ui.loader {
- color: @loaderTextColor;
-}
-.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
- border-color: @loaderFillColor;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationLoaderText) {
- /*-------------------
- Text
- --------------------*/
-
- .ui.ui.ui.ui.text.loader {
- width: auto;
- height: auto;
- text-align: center;
- font-style: normal;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-& when (@variationLoaderIndeterminate) {
- .ui.indeterminate.loader:after {
- animation-direction: @indeterminateDirection;
- animation-duration: @indeterminateSpeed;
- }
-}
-
-.ui.loader.active,
-.ui.loader.visible {
- display: block;
-}
-.ui.loader.disabled,
-.ui.loader.hidden {
- display: none;
-}
-
-/*******************************
- Variations
-*******************************/
-
-
-/*-------------------
- Sizes
---------------------*/
-
-.ui.loader {
- width: @medium;
- height: @medium;
- font-size: @mediumFontSize;
-}
-.ui.loader:before,
-.ui.loader:after {
- width: @medium;
- height: @medium;
- margin: @mediumOffset;
-}
-& when (@variationLoaderText) {
- .ui.text.loader {
- min-width: @medium;
- padding-top: (@medium + @textDistance);
- }
-}
-& when not (@variationLoaderSizes = false) {
- each(@variationLoaderSizes, {
- @o: @{value}Offset;
- @f: @{value}FontSize;
- @s: @@value;
- .ui.@{value}.loader {
- width: @s;
- height: @s;
- font-size: @@f;
- }
- .ui.@{value}.loader:before,
- .ui.@{value}.loader:after {
- width: @s;
- height: @s;
- margin: @@o;
- }
- & when (@variationLoaderText) {
- .ui.@{value}.text.loader {
- min-width: @s;
- padding-top: (@s + @textDistance);
- }
- }
- })
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
-
- .ui.@{color}.elastic.loader.loader:before,
- .ui.@{color}.basic.elastic.loading.button:before,
- .ui.@{color}.basic.elastic.loading.button:after,
- .ui.@{color}.elastic.loading.loading.loading:not(.segment):before,
- .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
- .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
- .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
- .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
- .ui.@{color}.loading.loading.loading.loading > i.icon:after,
- .ui.@{color}.loader.loader.loader:after {
- color: @c;
- }
- .ui.inverted.@{color}.elastic.loader:before,
- .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before,
- .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
- .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
- .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
- .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
- .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
- .ui.inverted.@{color}.loader.loader.loader:after {
- color: @l;
- }
-})
-
-.ui.elastic.loader.loader:before,
-.ui.elastic.loading.loading.loading:before,
-.ui.elastic.loading.loading.loading .input > i.icon:before,
-.ui.elastic.loading.loading.loading > i.icon:before,
-.ui.loading.loading.loading.loading:not(.usual):after,
-.ui.loading.loading.loading.loading .input > i.icon:after,
-.ui.loading.loading.loading.loading > i.icon:after,
-.ui.loader.loader.loader:after {
- border-color: currentColor;
-}
-.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
- color: @invertedLoaderLineColor;
-}
-.ui.elastic.basic.loading.button:before,
-.ui.elastic.basic.loading.button:after {
- color: @loaderLineColor;
-}
-.ui.double.loading.loading.loading.loading.button:after {
- border-bottom-color: currentColor;
-}
-
-& when (@variationLoaderInline) {
- /*-------------------
- Inline
- --------------------*/
-
- .ui.inline.loader {
- position: relative;
- vertical-align: @inlineVerticalAlign;
- margin: @inlineMargin;
- left: 0;
- top: 0;
- transform: none;
- }
-
- .ui.inline.loader.active,
- .ui.inline.loader.visible {
- display: inline-block;
- }
-
- /* Centered Inline */
- .ui.centered.inline.loader.active,
- .ui.centered.inline.loader.visible {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
-}
-
-.ui.loading.loading.loading.loading.loading.loading:after,
-.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
-.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
-.ui.loader.loader.loader.loader.loader:after {
- border-left-color:transparent;
- border-right-color:transparent;
-}
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
-.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
- border-bottom-color: transparent;
-}
-.ui.loading.loading.loading.loading.loading.loading.segment:after,
-.ui.loading.loading.loading.loading.loading.loading.form:after {
- border-left-color:@loaderFillColor;
- border-right-color:@loaderFillColor;
-}
-.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
- border-bottom-color: @loaderFillColor;
-}
-
-& when (@variationLoaderElastic) {
- /*-------------------
- Elastic
- --------------------*/
-
- .ui.dimmer > .ui.elastic.loader {
- color: @invertedLoaderLineColor;
- }
- .ui.inverted.dimmer > .ui.elastic.loader {
- color: @loaderLineColor;
- }
- .ui.elastic.loading.loading:not(.form):not(.segment):after,
- .ui.elastic.loading.loading .input > i.icon:after,
- .ui.elastic.loading.loading > i.icon:after,
- .ui.elastic.loader.loader:after {
- animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
- animation-delay: 0.3s;
- }
- .ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
- .ui.elastic.loading.loading.loading .input > i.icon:before,
- .ui.elastic.loading.loading.loading > i.icon:before,
- .ui.elastic.loader.loader:before {
- animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
- -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
- border-right-color: transparent;
- }
- & when (@variationLoaderInline) {
- .ui.elastic.inline.loader:empty {
- animation: loader 8s infinite linear;
- }
- }
- & when (@variationLoaderSpeeds) {
- .ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
- .ui.slow.elastic.loading.loading .input > i.icon:after,
- .ui.slow.elastic.loading.loading > i.icon:after,
- .ui.slow.elastic.loader.loader:after {
- animation-duration: 1.5s;
- animation-delay: 0.45s;
- }
- .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
- .ui.slow.elastic.loading.loading.loading .input > i.icon:before,
- .ui.slow.elastic.loading.loading.loading > i.icon:before,
- .ui.slow.elastic.loader.loader:before {
- animation-duration: 1.5s;
- }
- .ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
- .ui.fast.elastic.loading.loading .input > i.icon:after,
- .ui.fast.elastic.loading.loading > i.icon:after,
- .ui.fast.elastic.loader.loader:after {
- animation-duration: 0.66s;
- animation-delay: 0.20s;
- }
- .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
- .ui.fast.elastic.loading.loading.loading .input > i.icon:before,
- .ui.fast.elastic.loading.loading.loading > i.icon:before,
- .ui.fast.elastic.loader.loader:before {
- animation-duration: 0.66s;
- }
- }
- @keyframes elastic-loader {
- 0%, 1% {
- border-left-color: transparent;
- border-bottom-color: transparent
- }
- 1.1%, 50% {
- border-left-color: inherit;
- }
- 10%, 35.1%{
- border-bottom-color: transparent;
- }
- 10.1%, 35%{
- border-bottom-color: inherit;
- }
- 50.1%{
- border-left-color: transparent;
- }
- 100% {
- border-left-color: transparent;
- border-bottom-color: transparent;
- transform: rotate(360deg);
- }
- }
-
- @keyframes currentcolor-elastic-loader {
- 0%, 1% {
- border-left-color: transparent;
- border-bottom-color: transparent
- }
- 1.1%, 50% {
- border-left-color: currentColor;
- }
- 10%, 35.1%{
- border-bottom-color: transparent;
- }
- 10.1%, 35%{
- border-bottom-color: currentColor;
- }
- 50.1%{
- border-left-color: transparent;
- }
- 100% {
- border-left-color: transparent;
- border-bottom-color: transparent;
- transform: rotate(360deg);
- }
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/placeholder.less b/semantic/src/definitions/elements/placeholder.less
deleted file mode 100644
index 5440612..0000000
--- a/semantic/src/definitions/elements/placeholder.less
+++ /dev/null
@@ -1,248 +0,0 @@
-/*!
- * # Fomantic-UI - Loader
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'placeholder';
-
-@import (multiple) '../../theme.config';
-
-/*-------------------
- Content
---------------------*/
-
-.ui.placeholder {
- position: static;
- overflow: hidden;
- animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
- animation-iteration-count: infinite;
- background-color: @white;
- background-image: @placeholderLoadingGradient;
- background-size: @placeholderLoadingGradientWidth 100%;
- max-width: @placeholderMaxWidth;
-}
-
-@keyframes placeholderShimmer{
- 0% {
- background-position: -@placeholderLoadingGradientWidth 0
- }
- 100% {
- background-position: @placeholderLoadingGradientWidth 0
- }
-}
-
-.ui.placeholder + .ui.placeholder {
- margin-top: @consecutivePlaceholderSpacing;
-}
-.ui.placeholder + .ui.placeholder {
- animation-delay: @placeholderAnimationInterval;
-}
-.ui.placeholder + .ui.placeholder + .ui.placeholder {
- animation-delay: (@placeholderAnimationInterval * 2);
-}
-.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
- animation-delay: (@placeholderAnimationInterval * 3);
-}
-.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
- animation-delay: (@placeholderAnimationInterval * 4);
-}
-
-.ui.placeholder,
-.ui.placeholder > :before,
-.ui.placeholder .image.header:after,
-.ui.placeholder .line,
-.ui.placeholder .line:after {
- background-color: @white;
-}
-
-.ui.placeholder.hidden {
- display:none;
-}
-
-& when (@variationPlaceholderImage) {
- /* Image */
- .ui.placeholder .image:not(.header):not(.ui):not(.icon) {
- height: @placeholderImageHeight;
- }
- .ui.placeholder .square.image:not(.header) {
- height: 0;
- overflow: hidden;
- /* 1/1 aspect ratio */
- padding-top: 100%;
- }
- .ui.placeholder .rectangular.image:not(.header) {
- height: 0;
- overflow: hidden;
- /* 4/3 aspect ratio */
- padding-top: 75%;
- }
-}
-
-& when (@variationPlaceholderLine) or (@variationPlaceholderHeader) {
- /* Lines */
- .ui.placeholder .line {
- position: relative;
- height: @placeholderLineMargin;
- }
- .ui.placeholder .line:before,
- .ui.placeholder .line:after {
- top: 100%;
- position: absolute;
- content: '';
- background-color: inherit;
- }
- .ui.placeholder .line:before {
- left: 0;
- }
- .ui.placeholder .line:after {
- right: 0;
- }
-
- /* Any Lines */
- .ui.placeholder .line {
- margin-bottom: @placeholderLineHeight;
- }
- .ui.placeholder .line:before,
- .ui.placeholder .line:after {
- height: @placeholderLineHeight;
- }
- .ui.placeholder .line:not(:first-child) {
- margin-top: @placeholderLineHeight;
- }
-
- /* Line Outdent */
- .ui.placeholder .line:nth-child(1):after {
- width: @placeholderLineOneOutdent;
- }
- .ui.placeholder .line:nth-child(2):after {
- width: @placeholderLineTwoOutdent;
- }
- .ui.placeholder .line:nth-child(3):after {
- width: @placeholderLineThreeOutdent;
- }
- .ui.placeholder .line:nth-child(4):after {
- width: @placeholderLineFourOutdent;
- }
- .ui.placeholder .line:nth-child(5):after {
- width: @placeholderLineFiveOutdent;
- }
-}
-
-& when (@variationPlaceholderHeader) {
- /* Header Image + 2 Lines */
- .ui.placeholder .header {
- position: relative;
- overflow: hidden;
- }
- /* Header Line 1 & 2*/
- .ui.placeholder .header .line {
- margin-bottom: @placeholderHeaderLineHeight;
- }
- .ui.placeholder .header .line:before,
- .ui.placeholder .header .line:after {
- height: @placeholderHeaderLineHeight;
- }
- .ui.placeholder .header .line:not(:first-child) {
- margin-top: @placeholderHeaderLineHeight;
- }
- .ui.placeholder .header .line:after {
- width: @placeholderHeaderLineOneOutdent;
- }
- .ui.placeholder .header .line:nth-child(2):after {
- width: @placeholderHeaderLineTwoOutdent;
- }
-
- & when (@variationPlaceholderImage) {
- /* Image Header */
- .ui.placeholder .image.header .line {
- margin-left: @placeholderImageWidth;
- }
- .ui.placeholder .image.header .line:before {
- width: @placeholderImageTextIndent;
- }
- .ui.placeholder .image.header:after {
- display: block;
- height: @placeholderLineMargin;
- content: '';
- margin-left: @placeholderImageWidth;
- }
- }
-}
-
-/* Spacing */
-.ui.placeholder .image .line:first-child,
-.ui.placeholder .paragraph .line:first-child,
-.ui.placeholder .header .line:first-child {
- height: 0.01px;
-}
-.ui.placeholder .image:not(:first-child):before,
-.ui.placeholder .paragraph:not(:first-child):before,
-.ui.placeholder .header:not(:first-child):before {
- height: @placeholderSpacing;
- content: '';
- display: block;
-}
-
-& when (@variationPlaceholderInverted) {
- /* Inverted Content Loader */
- .ui.inverted.placeholder {
- background-image: @placeholderInvertedLoadingGradient;
- }
- .ui.inverted.placeholder,
- .ui.inverted.placeholder > :before,
- .ui.inverted.placeholder .image.header:after,
- .ui.inverted.placeholder .line,
- .ui.inverted.placeholder .line:after {
- background-color: @black;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-
-
-/*-------------------
- Sizes
---------------------*/
-& when (@variationPlaceholderLengths) {
- .ui.placeholder .full.line.line.line:after {
- width: @placeholderFullLineOutdent;
- }
- .ui.placeholder .very.long.line.line.line:after {
- width: @placeholderVeryLongLineOutdent;
- }
- .ui.placeholder .long.line.line.line:after {
- width: @placeholderLongLineOutdent;
- }
- .ui.placeholder .medium.line.line.line:after {
- width: @placeholderMediumLineOutdent;
- }
- .ui.placeholder .short.line.line.line:after {
- width: @placeholderShortLineOutdent;
- }
- .ui.placeholder .very.short.line.line.line:after {
- width: @placeholderVeryShortLineOutdent;
- }
-}
-
-& when (@variationPlaceholderFluid) {
- /*-------------------
- Fluid
- --------------------*/
-
- .ui.fluid.placeholder {
- max-width: none;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/rail.less b/semantic/src/definitions/elements/rail.less
deleted file mode 100644
index d7ffc51..0000000
--- a/semantic/src/definitions/elements/rail.less
+++ /dev/null
@@ -1,147 +0,0 @@
-/*!
- * # Fomantic-UI - Rail
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'rail';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Rails
-*******************************/
-
-.ui.rail {
- position: absolute;
- top: 0;
- width: @width;
- height: @height;
-}
-
-.ui.left.rail {
- left: auto;
- right: 100%;
- padding: 0 @splitDistance 0 0;
- margin: 0 @splitDistance 0 0;
-}
-
-.ui.right.rail {
- left: 100%;
- right: auto;
- padding: 0 0 0 @splitDistance;
- margin: 0 0 0 @splitDistance;
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationRailInternal) {
- /*--------------
- Internal
- ---------------*/
-
- .ui.left.internal.rail {
- left: 0;
- right: auto;
- padding: 0 0 0 @splitDistance;
- margin: 0 0 0 @splitDistance;
- }
-
- .ui.right.internal.rail {
- left: auto;
- right: 0;
- padding: 0 @splitDistance 0 0;
- margin: 0 @splitDistance 0 0;
- }
-}
-
-& when (@variationRailDividing) {
- /*--------------
- Dividing
- ---------------*/
-
- .ui.dividing.rail {
- width: @dividingWidth;
- }
- .ui.left.dividing.rail {
- padding: 0 @splitDividingDistance 0 0;
- margin: 0 @splitDividingDistance 0 0;
- border-right: @dividingBorder;
- }
- .ui.right.dividing.rail {
- border-left: @dividingBorder;
- padding: 0 0 0 @splitDividingDistance;
- margin: 0 0 0 @splitDividingDistance;
- }
-}
-
-& when (@variationRailDistance) {
- /*--------------
- Distance
- ---------------*/
-
- .ui.close.rail {
- width: @closeWidth;
- }
- .ui.close.left.rail {
- padding: 0 @splitCloseDistance 0 0;
- margin: 0 @splitCloseDistance 0 0;
- }
- .ui.close.right.rail {
- padding: 0 0 0 @splitCloseDistance;
- margin: 0 0 0 @splitCloseDistance;
- }
-
- .ui.very.close.rail {
- width: @veryCloseWidth;
- }
- .ui.very.close.left.rail {
- padding: 0 @splitVeryCloseDistance 0 0;
- margin: 0 @splitVeryCloseDistance 0 0;
- }
- .ui.very.close.right.rail {
- padding: 0 0 0 @splitVeryCloseDistance;
- margin: 0 0 0 @splitVeryCloseDistance;
- }
-}
-
-& when (@variationRailAttached) {
- /*--------------
- Attached
- ---------------*/
-
- .ui.attached.left.rail,
- .ui.attached.right.rail {
- padding: 0;
- margin: 0;
- }
-}
-
-/*--------------
- Sizing
----------------*/
-
-.ui.rail {
- font-size: @medium;
-}
-& when not (@variationRailSizes = false) {
- each(@variationRailSizes, {
- @s: @@value;
- .ui.@{value}.rail {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/reveal.less b/semantic/src/definitions/elements/reveal.less
deleted file mode 100644
index 839668e..0000000
--- a/semantic/src/definitions/elements/reveal.less
+++ /dev/null
@@ -1,289 +0,0 @@
-/*!
- * # Fomantic-UI - Reveal
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'reveal';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Reveal
-*******************************/
-
-.ui.reveal {
- display: inherit;
- position: relative !important;
- font-size: 0;
-}
-
-.ui.reveal > .visible.content {
- position: absolute !important;
- top: 0 !important;
- left: 0 !important;
- z-index: @topZIndex !important;
- transition: @transition;
-}
-.ui.reveal > .hidden.content {
- position: relative !important;
- z-index: @bottomZIndex !important;
-}
-
-/* Make sure hovered element is on top of other reveal */
-.ui.active.reveal .visible.content,
-.ui.reveal:hover .visible.content {
- z-index: @activeZIndex !important;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationRevealSlide) {
- /*--------------
- Slide
- ---------------*/
-
- .ui.slide.reveal {
- position: relative !important;
- overflow: hidden !important;
- white-space: nowrap;
- }
-
- .ui.slide.reveal > .content {
- display: block;
- width: 100%;
- white-space: normal;
- float: left;
-
- margin: 0;
- transition: @slideTransition;
- }
-
- .ui.slide.reveal > .visible.content {
- position: relative !important;
- }
- .ui.slide.reveal > .hidden.content {
- position: absolute !important;
- left: 0 !important;
- width: 100% !important;
- transform: translateX(100%) !important;
- }
- .ui.slide.active.reveal > .visible.content,
- .ui.slide.reveal:hover > .visible.content {
- transform: translateX(-100%) !important;
- }
- .ui.slide.active.reveal > .hidden.content,
- .ui.slide.reveal:hover > .hidden.content {
- transform: translateX(0%) !important;
- }
-
- .ui.slide.right.reveal > .visible.content {
- transform: translateX(0%) !important;
- }
- .ui.slide.right.reveal > .hidden.content {
- transform: translateX(-100%) !important;
- }
- .ui.slide.right.active.reveal > .visible.content,
- .ui.slide.right.reveal:hover > .visible.content {
- transform: translateX(100%) !important;
- }
- .ui.slide.right.active.reveal > .hidden.content,
- .ui.slide.right.reveal:hover > .hidden.content {
- transform: translateX(0%) !important;
- }
-
- .ui.slide.up.reveal > .hidden.content {
- transform: translateY(100%) !important;
- }
- .ui.slide.up.active.reveal > .visible.content,
- .ui.slide.up.reveal:hover > .visible.content {
- transform: translateY(-100%) !important;
- }
- .ui.slide.up.active.reveal > .hidden.content,
- .ui.slide.up.reveal:hover > .hidden.content {
- transform: translateY(0%) !important;
- }
-
- .ui.slide.down.reveal > .hidden.content {
- transform: translateY(-100%) !important;
- }
- .ui.slide.down.active.reveal > .visible.content,
- .ui.slide.down.reveal:hover > .visible.content {
- transform: translateY(100%) !important;
- }
- .ui.slide.down.active.reveal > .hidden.content,
- .ui.slide.down.reveal:hover > .hidden.content {
- transform: translateY(0%) !important;
- }
-}
-
-& when (@variationRevealFade) {
- /*--------------
- Fade
- ---------------*/
-
- .ui.fade.reveal > .visible.content {
- opacity: 1;
- }
- .ui.fade.active.reveal > .visible.content,
- .ui.fade.reveal:hover > .visible.content {
- opacity: 0;
- }
-}
-
-& when (@variationRevealMove) {
- /*--------------
- Move
- ---------------*/
-
- .ui.move.reveal {
- position: relative !important;
- overflow: hidden !important;
- white-space: nowrap;
- }
-
- .ui.move.reveal > .content {
- display: block;
- float: left;
- white-space: normal;
-
- margin: 0;
- transition: @moveTransition;
- }
-
- .ui.move.reveal > .visible.content {
- position: relative !important;
- }
- .ui.move.reveal > .hidden.content {
- position: absolute !important;
- left: 0 !important;
- width: 100% !important;
- }
- .ui.move.active.reveal > .visible.content,
- .ui.move.reveal:hover > .visible.content {
- transform: translateX(-100%) !important;
- }
- .ui.move.right.active.reveal > .visible.content,
- .ui.move.right.reveal:hover > .visible.content {
- transform: translateX(100%) !important;
- }
- .ui.move.up.active.reveal > .visible.content,
- .ui.move.up.reveal:hover > .visible.content {
- transform: translateY(-100%) !important;
- }
- .ui.move.down.active.reveal > .visible.content,
- .ui.move.down.reveal:hover > .visible.content {
- transform: translateY(100%) !important;
- }
-}
-
-
-& when (@variationRevealRotate) {
- /*--------------
- Rotate
- ---------------*/
-
- .ui.rotate.reveal > .visible.content {
- transition-duration: @transitionDuration;
- transform: rotate(0deg);
- }
-
- .ui.rotate.reveal > .visible.content,
- .ui.rotate.right.reveal > .visible.content {
- transform-origin: bottom right;
- }
- .ui.rotate.active.reveal > .visible.content,
- .ui.rotate.reveal:hover > .visible.content,
- .ui.rotate.right.active.reveal > .visible.content,
- .ui.rotate.right.reveal:hover > .visible.content {
- transform: rotate(@rotateDegrees);
- }
-
- .ui.rotate.left.reveal > .visible.content {
- transform-origin: bottom left;
- }
- .ui.rotate.left.active.reveal > .visible.content,
- .ui.rotate.left.reveal:hover > .visible.content {
- transform: rotate(-@rotateDegrees);
- }
-}
-
-/*******************************
- States
-*******************************/
-
-& when (@variationRevealDisabled) {
- .ui.disabled.reveal:hover > .visible.visible.content {
- position: static !important;
- display: block !important;
- opacity: 1 !important;
- top: 0 !important;
- left: 0 !important;
- right: auto !important;
- bottom: auto !important;
- transform: none !important;
- }
- .ui.disabled.reveal:hover > .hidden.hidden.content {
- display: none !important;
- }
-}
-
-
-/*******************************
- Coupling
-*******************************/
-
-.ui.reveal > .ui.ribbon.label {
- z-index: @overlayZIndex;
-}
-
-/*******************************
- Variations
-*******************************/
-
-/*--------------
- Visible
----------------*/
-
-.ui.visible.reveal {
- overflow: visible;
-}
-
-/*--------------
- Instant
----------------*/
-
-.ui.instant.reveal > .content {
- transition-delay: 0s !important;
-}
-
-
-/*--------------
- Sizing
----------------*/
-
-.ui.reveal > .content {
- font-size: @medium;
-}
-& when not (@variationRevealSizes = false) {
- each(@variationRevealSizes, {
- @s: @@value;
- .ui.@{value}.reveal > .content {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/segment.less b/semantic/src/definitions/elements/segment.less
deleted file mode 100644
index ec5e19b..0000000
--- a/semantic/src/definitions/elements/segment.less
+++ /dev/null
@@ -1,774 +0,0 @@
-/*!
- * # Fomantic-UI - Segment
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'segment';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Segment
-*******************************/
-
-.ui.segment {
- position: relative;
- background: @background;
- box-shadow: @boxShadow;
- margin: @margin;
- padding: @padding;
- border-radius: @borderRadius;
- border: @border;
-}
-
-.ui.segment:first-child {
- margin-top: 0;
-}
-.ui.segment:last-child {
- margin-bottom: 0;
-}
-
-& when (@variationSegmentVertical) {
- /* Vertical */
- .ui.vertical.segment {
- margin: 0;
- padding-left: 0;
- padding-right: 0;
-
- background: none transparent;
- border-radius: 0;
- box-shadow: none;
- border: none;
- border-bottom: @borderWidth solid @borderColor;
- }
- .ui.vertical.segment:last-child {
- border-bottom: none;
- }
-}
-
-
-/*-------------------
- Loose Coupling
---------------------*/
-& when (@variationSegmentInverted) {
- /* Header */
- .ui.inverted.segment > .ui.header .sub.header,
- .ui.inverted.segment > .ui.header {
- color: @white;
- }
-}
-
-& when (@variationSegmentAttached) {
- /* Label */
- .ui[class*="bottom attached"].segment > [class*="top attached"].label {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- .ui[class*="top attached"].segment > [class*="bottom attached"].label {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
-}
-
-/* Grid */
-.ui.page.grid.segment,
-.ui.grid > .row > .ui.segment.column,
-.ui.grid > .ui.segment.column {
- padding-top: @pageGridMargin;
- padding-bottom: @pageGridMargin;
-}
-.ui.grid.segment {
- margin: @margin;
- border-radius: @borderRadius;
-}
-
-/* Table */
-.ui.basic.table.segment {
- background: @background;
- border: @border;
- box-shadow: @boxShadow;
-}
-.ui[class*="very basic"].table.segment {
- padding: @padding;
-}
-
-/* Tab */
-.ui.segment.tab:last-child {
- margin-bottom: @verticalMargin;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationSegmentPlaceholder) {
- /*-------------------
- Placeholder
- --------------------*/
-
- .ui.placeholder.segment {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: stretch;
- max-width: initial;
- animation: none;
- overflow: visible;
- padding: @placeholderPadding;
- min-height: @placeholderMinHeight;
- background: @placeholderBackground;
- border-color: @placeholderBorderColor;
- box-shadow: @placeholderBoxShadow;
- }
-
- .ui.placeholder.segment .button,
- .ui.placeholder.segment textarea {
- display: block;
- }
- .ui.placeholder.segment .field,
- .ui.placeholder.segment textarea,
- .ui.placeholder.segment > .ui.input,
- .ui.placeholder.segment .button {
- max-width: @placeholderContentMaxWidth;
- margin-left: auto;
- margin-right: auto;
- }
- .ui.placeholder.segment .column .button,
- .ui.placeholder.segment .column .field,
- .ui.placeholder.segment .column textarea,
- .ui.placeholder.segment .column > .ui.input {
- max-width: @placeholderContentMaxWidth;
- margin-left: auto;
- margin-right: auto;
- }
-
- .ui.placeholder.segment > .inline {
- align-self: center;
- }
- .ui.placeholder.segment > .inline > .button {
- display: inline-block;
- width: auto;
- margin: @placeholderContentInlineButtonMargin;
- }
- .ui.placeholder.segment > .inline > .button:last-child {
- margin-right: 0;
- }
-}
-
-& when (@variationSegmentPiled) {
- /*-------------------
- Piled
- --------------------*/
-
- .ui.piled.segments,
- .ui.piled.segment {
- margin: @piledMargin 0;
- box-shadow: @piledBoxShadow;
- z-index: @piledZIndex;
- }
- .ui.piled.segment:first-child {
- margin-top: 0;
- }
- .ui.piled.segment:last-child {
- margin-bottom: 0;
- }
- .ui.piled.segments:after,
- .ui.piled.segments:before,
- .ui.piled.segment:after,
- .ui.piled.segment:before {
- background-color: @white;
- visibility: visible;
- content: '';
- display: block;
- height: 100%;
- left: 0;
- position: absolute;
- width: 100%;
- border: @piledBorder;
- box-shadow: @piledBoxShadow;
- }
- .ui.piled.segments:before,
- .ui.piled.segment:before {
- transform: rotate(-@piledDegrees);
- top: 0;
- z-index: -2;
- }
- .ui.piled.segments:after,
- .ui.piled.segment:after {
- transform: rotate(@piledDegrees);
- top: 0;
- z-index: -1;
- }
- & when (@variationSegmentAttached) {
- /* Piled Attached */
- .ui[class*="top attached"].piled.segment {
- margin-top: @piledMargin;
- margin-bottom: 0;
- }
- .ui.piled.segment[class*="top attached"]:first-child {
- margin-top: 0;
- }
- .ui.piled.segment[class*="bottom attached"] {
- margin-top: 0;
- margin-bottom: @piledMargin;
- }
- .ui.piled.segment[class*="bottom attached"]:last-child {
- margin-bottom: 0;
- }
- }
-}
-
-& when (@variationSegmentStacked) {
- /*-------------------
- Stacked
- --------------------*/
-
- .ui.stacked.segment {
- padding-bottom: @stackedPadding;
- }
- .ui.stacked.segments:before,
- .ui.stacked.segments:after,
- .ui.stacked.segment:before,
- .ui.stacked.segment:after {
- content: '';
- position: absolute;
- bottom: -(@stackedHeight / 2);
- left: 0;
-
- border-top: 1px solid @borderColor;
- background: @stackedPageBackground;
-
- width: 100%;
- height: @stackedHeight;
- visibility: visible;
- }
- .ui.stacked.segments:before,
- .ui.stacked.segment:before {
- display: none;
- }
-
- /* Add additional page */
- .ui.tall.stacked.segments:before,
- .ui.tall.stacked.segment:before {
- display: block;
- bottom: 0;
- }
- & when (@variationSegmentInverted) {
- /* Inverted */
- .ui.stacked.inverted.segments:before,
- .ui.stacked.inverted.segments:after,
- .ui.stacked.inverted.segment:before,
- .ui.stacked.inverted.segment:after {
- background-color: @subtleTransparentBlack;
- border-top: 1px solid @selectedBorderColor;
- }
- }
-}
-
-& when (@variationSegmentPadded) {
- /*-------------------
- Padded
- --------------------*/
-
- .ui.padded.segment {
- padding: @paddedSegmentPadding;
- }
-
- .ui[class*="very padded"].segment {
- padding: @veryPaddedSegmentPadding;
- }
-
- & when (@variationSegmentVertical) {
- /* Padded vertical */
- .ui.padded.segment.vertical.segment,
- .ui[class*="very padded"].vertical.segment {
- padding-left: 0;
- padding-right: 0;
- }
- }
-}
-
-& when (@variationSegmentCompact) {
- /*-------------------
- Compact
- --------------------*/
-
- .ui.compact.segment {
- display: table;
- }
-
- /* Compact Group */
- .ui.compact.segments {
- display: inline-flex;
- }
- .ui.compact.segments .segment,
- .ui.segments .compact.segment {
- display: block;
- flex: 0 1 auto;
- }
-}
-
-& when (@variationSegmentCircular) {
- /*-------------------
- Circular
- --------------------*/
-
- .ui.circular.segment {
- display: table-cell;
- padding: @circularPadding;
- text-align: center;
- vertical-align: middle;
- border-radius: 500em;
- }
-}
-
-& when (@variationSegmentRaised) {
- /*-------------------
- Raised
- --------------------*/
-
- .ui.raised.raised.segments,
- .ui.raised.raised.segment {
- box-shadow: @raisedBoxShadow;
- }
-}
-
-& when (@variationSegmentGroups) {
- /*******************************
- Groups
- *******************************/
-
- /* Group */
- .ui.segments {
- flex-direction: column;
- position: relative;
- margin: @groupedMargin;
- border: @groupedBorder;
- box-shadow: @groupedBoxShadow;
- border-radius: @groupedBorderRadius;
- }
- .ui.segments:first-child {
- margin-top: 0;
- }
- .ui.segments:last-child {
- margin-bottom: 0;
- }
-
-
- /* Nested Segment */
- .ui.segments > .segment {
- top: 0;
- bottom: 0;
- border-radius: 0;
- margin: @groupedSegmentMargin;
- width: @groupedSegmentWidth;
- box-shadow: @groupedSegmentBoxShadow;
- border: @groupedSegmentBorder;
- border-top: @groupedSegmentDivider;
- }
-
- .ui.segments:not(.horizontal) > .segment:first-child {
- top: @attachedTopOffset;
- bottom: 0;
- border-top: none;
- margin-top: 0;
- margin-bottom: 0;
- border-radius: @borderRadius @borderRadius 0 0;
- }
-
- /* Bottom */
- .ui.segments:not(.horizontal) > .segment:last-child {
- top: @attachedBottomOffset;
- bottom: 0;
- margin-top: 0;
- margin-bottom: 0;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0 0 @borderRadius @borderRadius;
- }
-
- /* Only */
- .ui.segments:not(.horizontal) > .segment:only-child {
- border-radius: @borderRadius;
- }
-
-
- /* Nested Group */
- .ui.segments > .ui.segments {
- border-top: @groupedSegmentDivider;
- margin: @nestedGroupMargin;
- }
- .ui.segments > .segments:first-child {
- border-top: none;
- }
- .ui.segments > .segment + .segments:not(.horizontal) {
- margin-top: 0;
- }
-
- & when (@variationSegmentHorizontal) {
- /* Horizontal Group */
- .ui.horizontal.segments {
- display: flex;
- flex-direction: row;
- background-color: transparent;
- padding: 0;
- box-shadow: @boxShadow;
- margin: @margin;
- border-radius: @borderRadius;
- border: @border;
- }
- .ui.stackable.horizontal.segments {
- flex-wrap: wrap;
- }
-
- /* Nested Horizontal Group */
- .ui.segments > .horizontal.segments {
- margin: 0;
- background-color: transparent;
- border-radius: 0;
- border: none;
- box-shadow: none;
- border-top: @groupedSegmentDivider;
- }
-
- /* Horizontal Segment */
- .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
- flex: 1 1 auto;
- -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
- }
- .ui.horizontal.segments > .segment {
- margin: 0;
- min-width: 0;
- border-radius: 0;
- border: none;
- box-shadow: none;
- border-left: @borderWidth solid @borderColor;
- }
-
- /* Border Fixes */
- .ui.segments > .horizontal.segments:first-child {
- border-top: none;
- }
- .ui.horizontal.segments:not(.stackable) > .segment:first-child {
- border-left: none;
- }
- .ui.horizontal.segments > .segment:first-child {
- border-radius: @borderRadius 0 0 @borderRadius;
- }
- .ui.horizontal.segments > .segment:last-child {
- border-radius: 0 @borderRadius @borderRadius 0;
- }
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-& when (@variationSegmentDisabled) {
- /*--------------
- Disabled
- ---------------*/
-
- .ui.disabled.segment {
- opacity: @disabledOpacity;
- color: @disabledTextColor;
- }
-}
-
-& when (@variationSegmentLoading) {
- /*--------------
- Loading
- ---------------*/
-
- .ui.loading.segment {
- position: relative;
- cursor: default;
- pointer-events: none;
- text-shadow: none !important;
- transition: all 0s linear;
- }
- .ui.loading.segment:before {
- position: absolute;
- content: '';
- top: 0;
- left: 0;
- background: @loaderDimmerColor;
- width: 100%;
- height: 100%;
- border-radius: @borderRadius;
- z-index: @loaderDimmerZIndex;
- }
- .ui.loading.segment:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid @loaderLineColor;
- border-radius: @circularRadius;
-
- box-shadow: 0 0 0 1px transparent;
- visibility: visible;
- z-index: @loaderLineZIndex;
- }
-}
-
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationSegmentBasic) {
- /*-------------------
- Basic
- --------------------*/
-
- .ui.basic.segment,
- .ui.segments .ui.basic.segment,
- .ui.basic.segments {
- background: @basicBackground;
- box-shadow: @basicBoxShadow;
- border: @basicBorder;
- border-radius: @basicBorderRadius;
- }
-}
-
-& when (@variationSegmentClearing) {
- /*-------------------
- Clearing
- --------------------*/
-
- .ui.clearing.segment:after {
- content: "";
- display: block;
- clear: both;
- }
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors,{
- @color: replace(@key,'@','');
- @c: @colors[@@color][color];
- & when not (@color=primary) and not (@color=secondary) {
- .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
- border-top: @coloredBorderSize solid @c;
- }
- & when (@variationSegmentInverted) {
- .ui.inverted.@{color}.segment.segment.segment.segment.segment {
- background-color: @c;
- color: @white;
- }
- }
- }
-})
-
-& when (@variationSegmentAligned) {
- /*-------------------
- Aligned
- --------------------*/
-
- .ui[class*="left aligned"].segment {
- text-align: left;
- }
- .ui[class*="right aligned"].segment {
- text-align: right;
- }
- .ui[class*="center aligned"].segment {
- text-align: center;
- }
-}
-
-& when (@variationSegmentFloating) {
- /*-------------------
- Floated
- --------------------*/
-
- .ui.floated.segment,
- .ui[class*="left floated"].segment {
- float: left;
- margin-right: @floatedDistance;
- }
- .ui[class*="right floated"].segment {
- float: right;
- margin-left: @floatedDistance;
- }
-}
-
-& when (@variationSegmentInverted) {
- /*-------------------
- Inverted
- --------------------*/
-
- .ui.inverted.segment {
- border: none;
- box-shadow: none;
- }
- .ui.inverted.segment,
- .ui.primary.inverted.segment {
- background: @invertedBackground;
- color: @invertedTextColor;
- }
-
- /* Nested */
- .ui.inverted.segment .segment {
- color: @textColor;
- }
- .ui.inverted.segment .inverted.segment {
- color: @invertedTextColor;
- }
- & when (@variationSegmentAttached) {
- /* Attached */
- .ui.inverted.attached.segment {
- border-color: @solidWhiteBorderColor;
- }
- }
- & when (@variationSegmentLoading) {
- /* Loading */
- .ui.inverted.loading.segment {
- color: @invertedLoaderLineColor;
- }
- .ui.inverted.loading.segment:before {
- background: @loaderInvertedDimmerColor;
- }
- }
-}
-
-/*-------------------
- Emphasis
---------------------*/
-& when (@variationSegmentSecondary) {
- /* Secondary */
- .ui.secondary.segment {
- background: @secondaryBackground;
- color: @secondaryColor;
- }
- & when (@variationSegmentInverted) {
- .ui.secondary.inverted.segment {
- background: @secondaryInvertedBackground;
- color: @secondaryInvertedColor;
- }
- }
-}
-
-& when (@variationSegmentTertiary) {
- /* Tertiary */
- .ui.tertiary.segment {
- background: @tertiaryBackground;
- color: @tertiaryColor;
- }
- & when (@variationSegmentInverted) {
- .ui.tertiary.inverted.segment {
- background: @tertiaryInvertedBackground;
- color: @tertiaryInvertedColor;
- }
- }
-}
-
-& when (@variationSegmentAttached) {
- /*-------------------
- Attached
- --------------------*/
-
- /* Middle */
- .ui.attached.segment {
- top: 0;
- bottom: 0;
- border-radius: 0;
- margin: 0 @attachedHorizontalOffset;
- width: @attachedWidth;
- max-width: @attachedWidth;
- box-shadow: @attachedBoxShadow;
- border: @attachedBorder;
- }
- .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
- border-top: none;
- }
-
- /* Top */
- .ui[class*="top attached"].segment {
- bottom: 0;
- margin-bottom: 0;
- top: @attachedTopOffset;
- margin-top: @verticalMargin;
- border-radius: @borderRadius @borderRadius 0 0;
- }
- .ui.segment[class*="top attached"]:first-child {
- margin-top: 0;
- }
-
- /* Bottom */
- .ui.segment[class*="bottom attached"] {
- bottom: 0;
- margin-top: 0;
- top: @attachedBottomOffset;
- margin-bottom: @verticalMargin;
- box-shadow: @attachedBottomBoxShadow;
- border-radius: 0 0 @borderRadius @borderRadius;
- }
- .ui.segment[class*="bottom attached"]:last-child {
- margin-bottom: @verticalMargin;
- }
-}
-
-& when (@variationSegmentFitted) {
- /*--------------
- Fitted
- ---------------*/
-
- .ui.fitted.segment:not(.horizontally) {
- padding-top: 0;
- padding-bottom: 0;
- }
- .ui.fitted.segment:not(.vertically) {
- padding-left: 0;
- padding-right: 0;
- }
-}
-
-/*-------------------
- Size
---------------------*/
-
-.ui.segments .segment,
-.ui.segment {
- font-size: @medium;
-}
-& when not (@variationSegmentSizes = false) {
- each(@variationSegmentSizes, {
- @s: @@value;
- .ui.@{value}.segments .segment,
- .ui.@{value}.segment {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/step.less b/semantic/src/definitions/elements/step.less
deleted file mode 100644
index fa339e8..0000000
--- a/semantic/src/definitions/elements/step.less
+++ /dev/null
@@ -1,630 +0,0 @@
-/*!
- * # Fomantic-UI - Step
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Step
-*******************************/
-
-/*--------------
- Load Theme
----------------*/
-
-@type : 'element';
-@element : 'step';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Plural
-*******************************/
-
-.ui.steps {
- display: inline-flex;
- flex-direction: row;
- align-items: stretch;
- margin: @stepMargin;
- background: @stepsBackground;
- box-shadow: @stepsBoxShadow;
- line-height: @lineHeight;
- border-radius: @stepsBorderRadius;
- border: @stepsBorder;
-}
-.ui.steps:not(.unstackable) {
- flex-wrap: wrap;
-}
-
-/* First Steps */
-.ui.steps:first-child {
- margin-top: 0;
-}
-
-/* Last Steps */
-.ui.steps:last-child {
- margin-bottom: 0;
-}
-
-
-/*******************************
- Singular
-*******************************/
-
-.ui.steps .step {
- position: relative;
- display: flex;
- flex: 1 0 auto;
- flex-wrap: wrap;
- flex-direction: row;
- vertical-align: middle;
- align-items: center;
- justify-content: @justifyContent;
-
- margin: @verticalMargin @horizontalMargin;
- padding: @verticalPadding @horizontalPadding;
- background: @background;
- color: @textColor;
- box-shadow: @boxShadow;
- border-radius: @borderRadius;
- border: @border;
- border-right: @divider;
- transition: @transition;
-}
-
-/* Arrow */
-.ui.steps .step:after {
- display: none;
- position: absolute;
- z-index: 2;
- content: '';
- top: @arrowTopOffset;
- right: @arrowRightOffset;
- background-color: @arrowBackgroundColor;
- width: @arrowSize;
- height: @arrowSize;
-
- border-style: solid;
- border-color: @borderColor;
- border-width: @arrowBorderWidth;
-
- transition: @transition;
- transform: translateY(-50%) translateX(50%) rotate(-45deg);
-}
-
-/* First Step */
-.ui.steps .step:first-child {
- padding-left: @horizontalPadding;
- border-radius: @stepsBorderRadius 0 0 @stepsBorderRadius;
-}
-
-/* Last Step */
-.ui.steps .step:last-child {
- border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0;
- border-right: none;
- margin-right: 0;
-}
-
-/* Only Step */
-.ui.steps .step:only-child {
- border-radius: @stepsBorderRadius;
-}
-
-
-/*******************************
- Content
-*******************************/
-
-/* Title */
-.ui.steps .step .title {
- font-family: @titleFontFamily;
- font-size: @titleFontSize;
- font-weight: @titleFontWeight;
-}
-.ui.steps .step > .title {
- width: 100%;
-}
-
-/* Description */
-.ui.steps .step .description {
- font-weight: @descriptionFontWeight;
- font-size: @descriptionFontSize;
- color: @descriptionColor;
-}
-.ui.steps .step > .description {
- width: 100%;
-}
-.ui.steps .step .title ~ .description {
- margin-top: @descriptionDistance;
-}
-
-/* Icon */
-.ui.steps .step > i.icon {
- line-height: 1;
- font-size: @iconSize;
- margin: 0 @iconDistance 0 0;
-}
-.ui.steps .step > i.icon,
-.ui.steps .step > i.icon ~ .content {
- display: block;
- flex: 0 1 auto;
- align-self: @iconAlign;
-}
-
-/* Horizontal Icon */
-.ui.steps:not(.vertical) .step > i.icon {
- width: auto;
-}
-
-/* Link */
-.ui.steps .link.step,
-.ui.steps a.step {
- cursor: pointer;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationStepOrdered) {
- /*--------------
- Ordered
- ---------------*/
-
- .ui.ordered.steps {
- counter-reset: ordered;
- }
- .ui.ordered.steps .step:before {
- display: block;
- position: static;
- text-align: center;
- content: counter(ordered);
- align-self: @iconAlign;
- margin-right: @iconDistance;
- font-size: @iconSize;
- counter-increment: ordered;
- font-family: @orderedFontFamily;
- font-weight: @orderedFontWeight;
- }
-
- .ui.ordered.steps .step > * {
- display: block;
- align-self: @iconAlign;
- }
-}
-
-& when (@variationStepVertical) {
- /*--------------
- Vertical
- ---------------*/
-
- .ui.vertical.steps {
- display: inline-flex;
- flex-direction: column;
- overflow: visible;
- }
- .ui.vertical.steps .step {
- justify-content: flex-start;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @verticalDivider;
- }
- .ui.vertical.steps .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui.vertical.steps .step:last-child {
- border-bottom: none;
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- }
- .ui.vertical.steps .step:only-child {
- border-radius: @stepsBorderRadius;
- }
-
-
- /* Arrow */
- .ui.vertical.steps .step:after {
- top: @verticalArrowTopOffset;
- right: @verticalArrowRightOffset;
- border-width: @verticalArrowBorderWidth;
- display: @verticalArrowDisplay;
- }
- .ui.right.vertical.steps .step:after {
- border-width: @verticalLeftArrowBorderWidth;
- left: @verticalLeftArrowLeftOffset;
- right: @verticalLeftArrowRightOffset;
- transform: translateY(-50%) translateX(-50%) rotate(-45deg);
- }
-
- .ui.vertical.steps .active.step:after {
- display: @verticalActiveArrowDisplay;
- }
- .ui.vertical.steps .step:last-child:after {
- display: @verticalLastArrowDisplay;
- }
- .ui.vertical.steps .active.step:last-child:after {
- display: @verticalActiveLastArrowDisplay;
- }
-}
-
-
-/*---------------
- Responsive
-----------------*/
-
-/* Mobile (Default) */
-@media only screen and (max-width: (@largestMobileScreen)) {
-
- .ui.steps:not(.unstackable) {
- display: inline-flex;
- overflow: visible;
- flex-direction: column;
- }
- .ui.steps:not(.unstackable) .step {
- width: 100% !important;
- flex-direction: column;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @stepsBorder;
- }
- .ui.steps:not(.unstackable) .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui.steps:not(.unstackable) .step:last-child {
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- border-bottom: none;
- }
-
- /* Arrow */
- .ui.steps:not(.unstackable) .step:after {
- top: unset;
- bottom: -@arrowSize;
- right: 50%;
- transform: translateY(-50%) translateX(50%) rotate(45deg);
- }
- .ui.vertical.steps .active.step:last-child:after {
- display: none;
- }
- /* Content */
- .ui.steps:not(.unstackable) .step .content {
- text-align: center;
- }
-
- /* Icon */
- .ui.steps:not(.unstackable) .step > i.icon,
- .ui.ordered.steps:not(.unstackable) .step:before {
- margin: 0 0 @mobileIconDistance 0;
- }
-
-}
-
-/*******************************
- States
-*******************************/
-
-/* Link Hover */
-.ui.steps .link.step:hover::after,
-.ui.steps .link.step:hover,
-.ui.steps a.step:hover::after,
-.ui.steps a.step:hover {
- background: @hoverBackground;
- color: @hoverColor;
-}
-
-/* Link Down */
-.ui.steps .link.step:active::after,
-.ui.steps .link.step:active,
-.ui.steps a.step:active::after,
-.ui.steps a.step:active {
- background: @downBackground;
- color: @downColor;
-}
-
-/* Active */
-.ui.steps .step.active {
- cursor: auto;
- background: @activeBackground;
-}
-.ui.steps .step.active:after {
- background: @activeBackground;
-}
-.ui.steps .step.active .title {
- color: @activeColor;
-}
-.ui.ordered.steps .step.active:before,
-.ui.steps .active.step i.icon {
- color: @activeIconColor;
-}
-
-/* Active Arrow */
-.ui.steps .step:after {
- display: @arrowDisplay;
-}
-.ui.steps .active.step:after {
- display: @activeArrowDisplay;
-}
-.ui.steps .step:last-child:after {
- display: @lastArrowDisplay;
-}
-.ui.steps .active.step:last-child:after {
- display: @activeLastArrowDisplay;
-}
-
-/* Active Hover */
-.ui.steps .link.active.step:hover::after,
-.ui.steps .link.active.step:hover,
-.ui.steps a.active.step:hover::after,
-.ui.steps a.active.step:hover {
- cursor: pointer;
- background: @activeHoverBackground;
- color: @activeHoverColor;
-}
-
-/* Completed */
-.ui.steps .step.completed > i.icon:before,
-.ui.ordered.steps .step.completed:before {
- color: @completedColor;
-}
-
-& when (@variationStepDisabled) {
- /* Disabled */
- .ui.steps .disabled.step {
- cursor: auto;
- background: @disabledBackground;
- pointer-events: none;
- }
- .ui.steps .disabled.step,
- .ui.steps .disabled.step .title,
- .ui.steps .disabled.step .description {
- color: @disabledColor;
- }
- .ui.steps .disabled.step:after {
- background: @disabledBackground;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationStepStackable) {
- /*--------------
- Stackable
- ---------------*/
-
- /* Tablet Or Below */
- @media only screen and (max-width: @largestTabletScreen) {
-
- .ui[class*="tablet stackable"].steps {
- display: inline-flex;
- overflow: visible;
- flex-direction: column;
- }
-
- /* Steps */
- .ui[class*="tablet stackable"].steps .step {
- flex-direction: column;
- border-radius: @borderRadius;
- padding: @verticalPadding @horizontalPadding;
- border-right: none;
- border-bottom: @stepsBorder;
- }
- .ui[class*="tablet stackable"].steps .step:first-child {
- padding: @verticalPadding @horizontalPadding;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui[class*="tablet stackable"].steps .step:last-child {
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- border-bottom: none;
- }
-
- /* Arrow */
- .ui[class*="tablet stackable"].steps .step:after {
- top: unset;
- bottom: -@arrowSize;
- right: 50%;
- transform: translateY(-50%) translateX(50%) rotate(45deg);
- }
-
- /* Content */
- .ui[class*="tablet stackable"].steps .step .content {
- text-align: center;
- }
-
- /* Icon */
- .ui[class*="tablet stackable"].steps .step > i.icon,
- .ui[class*="tablet stackable"].ordered.steps .step:before {
- margin: 0 0 @mobileIconDistance 0;
- }
-
- }
-}
-
-& when (@variationStepFluid) {
- /*--------------
- Fluid
- ---------------*/
-
- /* Fluid */
- .ui.fluid.steps {
- display: flex;
- width: 100%;
- }
-}
-
-& when (@variationStepAttached) {
- /*--------------
- Attached
- ---------------*/
-
- /* Top */
- .ui.attached.steps {
- width: @attachedWidth !important;
- margin: 0 @attachedHorizontalOffset @attachedVerticalOffset;
- max-width: @attachedWidth;
- border-radius: @stepsBorderRadius @stepsBorderRadius 0 0;
- }
- .ui.attached.steps .step:first-child {
- border-radius: @stepsBorderRadius 0 0 0;
- }
- .ui.attached.steps .step:last-child {
- border-radius: 0 @stepsBorderRadius 0 0;
- }
-
- /* Bottom */
- .ui.bottom.attached.steps {
- margin: @attachedVerticalOffset @attachedHorizontalOffset 0;
- border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius;
- }
- .ui.bottom.attached.steps .step:first-child {
- border-radius: 0 0 0 @stepsBorderRadius;
- }
- .ui.bottom.attached.steps .step:last-child {
- border-radius: 0 0 @stepsBorderRadius 0;
- }
-}
-
-/*-------------------
- Evenly Divided
---------------------*/
-
-.ui.one.steps,
-.ui.two.steps,
-.ui.three.steps,
-.ui.four.steps,
-.ui.five.steps,
-.ui.six.steps,
-.ui.seven.steps,
-.ui.eight.steps {
- width: 100%;
-}
-.ui.one.steps > .step,
-.ui.two.steps > .step,
-.ui.three.steps > .step,
-.ui.four.steps > .step,
-.ui.five.steps > .step,
-.ui.six.steps > .step,
-.ui.seven.steps > .step,
-.ui.eight.steps > .step {
- flex-wrap: nowrap;
-}
-.ui.one.steps > .step {
- width: 100%;
-}
-.ui.two.steps > .step {
- width: 50%;
-}
-.ui.three.steps > .step {
- width: 33.333%;
-}
-.ui.four.steps > .step {
- width: 25%;
-}
-.ui.five.steps > .step {
- width: 20%;
-}
-.ui.six.steps > .step {
- width: 16.666%;
-}
-.ui.seven.steps > .step {
- width: 14.285%;
-}
-.ui.eight.steps > .step {
- width: 12.500%;
-}
-
-/*-------------------
- Sizes
---------------------*/
-
-.ui.steps .step,
-.ui.step {
- font-size: @medium;
-}
-& when not (@variationStepSizes = false) {
- each(@variationStepSizes, {
- @s: @@value;
- .ui.@{value}.steps .step,
- .ui.@{value}.step {
- font-size: @s;
- }
- })
-}
-
-& when (@variationStepInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.steps {
- border: 1px solid @solidWhiteBorderColor;
- }
-
- .ui.inverted.steps .step {
- color: @invertedTextColor;
- background: @black;
- border-color: @solidWhiteBorderColor;
- }
-
- .ui.inverted.steps .step:after {
- background-color: @black;
- border-color: @solidWhiteBorderColor;
- }
-
- .ui.inverted.steps .step .description {
- color: @invertedTextColor;
- }
-
- /* Active */
- .ui.inverted.steps .step.active,
- .ui.inverted.steps .step.active:after {
- background: @invertedActiveBackground;
- }
- .ui.inverted.ordered.steps .step.active:before,
- .ui.inverted.steps .active.step i.icon {
- color: @invertedSelectedTextColor;
- }
-
- & when (@variationStepDisabled) {
- /* Disabled */
- .ui.inverted.steps .disabled.step,
- .ui.inverted.steps .disabled.step:after {
- background: @invertedDisabledBackground;
- }
- .ui.inverted.steps .disabled.step,
- .ui.inverted.steps .disabled.step .title,
- .ui.inverted.steps .disabled.step .description {
- color: @invertedDisabledTextColor;
- }
- }
-
- /* Link Hover */
- .ui.inverted.steps .link.step:hover::after,
- .ui.inverted.steps .link.step:hover,
- .ui.inverted.steps a.step:hover::after,
- .ui.inverted.steps a.step:hover {
- background: @invertedHoverBackground;
- color: @invertedHoveredTextColor;
- }
-
- /* Link Down */
- .ui.inverted.steps .link.step:active::after,
- .ui.inverted.steps .link.step:active,
- .ui.inverted.steps a.step:active::after,
- .ui.inverted.steps a.step:active {
- background: @invertedActiveHoverBackground;
- color: @invertedPressedTextColor;
- }
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/text.less b/semantic/src/definitions/elements/text.less
deleted file mode 100644
index f2256c5..0000000
--- a/semantic/src/definitions/elements/text.less
+++ /dev/null
@@ -1,74 +0,0 @@
-/*!
- * # Fomantic-UI - Text
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'element';
-@element : 'text';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Text
-*******************************/
-span.ui.text {
- line-height: @lineHeight;
-}
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
-
- span.ui.@{color}.text {
- color: @c;
- }
- & when (@variationTextInverted) {
- span.ui.inverted.@{color}.text {
- color: @l;
- }
- }
-})
-
-& when (@variationTextStates) {
- each(@textStates, {
- @state: replace(@key, '@', '');
- @c: @textStates[@@state][color];
-
- span.ui.@{state}.text {
- color: @c;
- }
- })
-}
-
-& when (@variationTextDisabled) {
- span.ui.disabled.text {
- opacity: @disabledOpacity;
- }
-}
-
-/* Sizes */
-span.ui.medium.text {
- font-size: @medium;
-}
-& when not (@variationTextSizes = false) {
- each(@variationTextSizes, {
- @s: @@value;
- span.ui.@{value}.text {
- font-size: @s;
- }
- })
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/globals/reset.less b/semantic/src/definitions/globals/reset.less
deleted file mode 100644
index 1ebcf6b..0000000
--- a/semantic/src/definitions/globals/reset.less
+++ /dev/null
@@ -1,40 +0,0 @@
-/*!
- * # Fomantic-UI - Reset
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'global';
-@element : 'reset';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Reset
-*******************************/
-
-/* Border-Box */
-*,
-*:before,
-*:after {
- box-sizing: inherit;
-}
-html {
- box-sizing: border-box;
-}
-
-/* iPad Input Shadows */
-input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
- -webkit-appearance: none;
- -moz-appearance: none; /* mobile firefox too! */
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/globals/site.js b/semantic/src/definitions/globals/site.js
deleted file mode 100644
index bc53e9f..0000000
--- a/semantic/src/definitions/globals/site.js
+++ /dev/null
@@ -1,493 +0,0 @@
-/*!
- * # Fomantic-UI - Site
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-$.site = $.fn.site = function(parameters) {
- var
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.site.settings, parameters)
- : $.extend({}, $.site.settings),
-
- namespace = settings.namespace,
- error = settings.error,
-
- moduleNamespace = 'module-' + namespace,
-
- $document = $(document),
- $module = $document,
- element = this,
- instance = $module.data(moduleNamespace),
-
- module,
- returnedValue
- ;
- module = {
-
- initialize: function() {
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of site', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- normalize: function() {
- module.fix.console();
- module.fix.requestAnimationFrame();
- },
-
- fix: {
- console: function() {
- module.debug('Normalizing window.console');
- if (console === undefined || console.log === undefined) {
- module.verbose('Console not available, normalizing events');
- module.disable.console();
- }
- if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {
- module.verbose('Console group not available, normalizing events');
- window.console.group = function() {};
- window.console.groupEnd = function() {};
- window.console.groupCollapsed = function() {};
- }
- if (typeof console.markTimeline == 'undefined') {
- module.verbose('Mark timeline not available, normalizing events');
- window.console.markTimeline = function() {};
- }
- },
- consoleClear: function() {
- module.debug('Disabling programmatic console clearing');
- window.console.clear = function() {};
- },
- requestAnimationFrame: function() {
- module.debug('Normalizing requestAnimationFrame');
- if(window.requestAnimationFrame === undefined) {
- module.debug('RequestAnimationFrame not available, normalizing event');
- window.requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); }
- ;
- }
- }
- },
-
- moduleExists: function(name) {
- return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);
- },
-
- enabled: {
- modules: function(modules) {
- var
- enabledModules = []
- ;
- modules = modules || settings.modules;
- $.each(modules, function(index, name) {
- if(module.moduleExists(name)) {
- enabledModules.push(name);
- }
- });
- return enabledModules;
- }
- },
-
- disabled: {
- modules: function(modules) {
- var
- disabledModules = []
- ;
- modules = modules || settings.modules;
- $.each(modules, function(index, name) {
- if(!module.moduleExists(name)) {
- disabledModules.push(name);
- }
- });
- return disabledModules;
- }
- },
-
- change: {
- setting: function(setting, value, modules, modifyExisting) {
- modules = (typeof modules === 'string')
- ? (modules === 'all')
- ? settings.modules
- : [modules]
- : modules || settings.modules
- ;
- modifyExisting = (modifyExisting !== undefined)
- ? modifyExisting
- : true
- ;
- $.each(modules, function(index, name) {
- var
- namespace = (module.moduleExists(name))
- ? $.fn[name].settings.namespace || false
- : true,
- $existingModules
- ;
- if(module.moduleExists(name)) {
- module.verbose('Changing default setting', setting, value, name);
- $.fn[name].settings[setting] = value;
- if(modifyExisting && namespace) {
- $existingModules = $(':data(module-' + namespace + ')');
- if($existingModules.length > 0) {
- module.verbose('Modifying existing settings', $existingModules);
- $existingModules[name]('setting', setting, value);
- }
- }
- }
- });
- },
- settings: function(newSettings, modules, modifyExisting) {
- modules = (typeof modules === 'string')
- ? [modules]
- : modules || settings.modules
- ;
- modifyExisting = (modifyExisting !== undefined)
- ? modifyExisting
- : true
- ;
- $.each(modules, function(index, name) {
- var
- $existingModules
- ;
- if(module.moduleExists(name)) {
- module.verbose('Changing default setting', newSettings, name);
- $.extend(true, $.fn[name].settings, newSettings);
- if(modifyExisting && namespace) {
- $existingModules = $(':data(module-' + namespace + ')');
- if($existingModules.length > 0) {
- module.verbose('Modifying existing settings', $existingModules);
- $existingModules[name]('setting', newSettings);
- }
- }
- }
- });
- }
- },
-
- enable: {
- console: function() {
- module.console(true);
- },
- debug: function(modules, modifyExisting) {
- modules = modules || settings.modules;
- module.debug('Enabling debug for modules', modules);
- module.change.setting('debug', true, modules, modifyExisting);
- },
- verbose: function(modules, modifyExisting) {
- modules = modules || settings.modules;
- module.debug('Enabling verbose debug for modules', modules);
- module.change.setting('verbose', true, modules, modifyExisting);
- }
- },
- disable: {
- console: function() {
- module.console(false);
- },
- debug: function(modules, modifyExisting) {
- modules = modules || settings.modules;
- module.debug('Disabling debug for modules', modules);
- module.change.setting('debug', false, modules, modifyExisting);
- },
- verbose: function(modules, modifyExisting) {
- modules = modules || settings.modules;
- module.debug('Disabling verbose debug for modules', modules);
- module.change.setting('verbose', false, modules, modifyExisting);
- }
- },
-
- console: function(enable) {
- if(enable) {
- if(instance.cache.console === undefined) {
- module.error(error.console);
- return;
- }
- module.debug('Restoring console function');
- window.console = instance.cache.console;
- }
- else {
- module.debug('Disabling console function');
- instance.cache.console = window.console;
- window.console = {
- clear : function(){},
- error : function(){},
- group : function(){},
- groupCollapsed : function(){},
- groupEnd : function(){},
- info : function(){},
- log : function(){},
- markTimeline : function(){},
- warn : function(){}
- };
- }
- },
-
- destroy: function() {
- module.verbose('Destroying previous site for', $module);
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- cache: {},
-
- 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.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.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() {
- 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({
- 'Element' : element,
- 'Name' : message[0],
- 'Arguments' : [].slice.call(message, 1) || '',
- '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( (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(Array.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) {
- module.destroy();
- }
- module.initialize();
- }
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.site.settings = {
-
- name : 'Site',
- namespace : 'site',
-
- error : {
- console : 'Console cannot be restored, most likely it was overwritten outside of module',
- method : 'The method you called is not defined.'
- },
-
- debug : false,
- verbose : false,
- performance : true,
-
- modules: [
- 'accordion',
- 'api',
- 'calendar',
- 'checkbox',
- 'dimmer',
- 'dropdown',
- 'embed',
- 'form',
- 'modal',
- 'nag',
- 'popup',
- 'slider',
- 'rating',
- 'shape',
- 'sidebar',
- 'state',
- 'sticky',
- 'tab',
- 'toast',
- 'transition',
- 'visibility',
- 'visit'
- ],
-
- siteNamespace : 'site',
- namespaceStub : {
- cache : {},
- config : {},
- sections : {},
- section : {},
- utilities : {}
- }
-
-};
-
-// allows for selection of elements with data attributes
-$.extend($.expr[ ":" ], {
- data: ($.expr.createPseudo)
- ? $.expr.createPseudo(function(dataName) {
- return function(elem) {
- return !!$.data(elem, dataName);
- };
- })
- : function(elem, i, match) {
- // support: jQuery < 1.8
- return !!$.data(elem, match[ 3 ]);
- }
-});
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/globals/site.less b/semantic/src/definitions/globals/site.less
deleted file mode 100644
index 876deb3..0000000
--- a/semantic/src/definitions/globals/site.less
+++ /dev/null
@@ -1,207 +0,0 @@
-/*!
- * # Fomantic-UI - Site
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'global';
-@element : 'site';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Page
-*******************************/
-
-.loadFonts();
-
-html,
-body {
- height: 100%;
-}
-
-html {
- font-size: @emSize;
-}
-
-body {
- margin: 0;
- padding: 0;
- overflow-x: @pageOverflowX;
- min-width: @pageMinWidth;
- background: @pageBackground;
- font-family: @pageFont;
- font-size: @fontSize;
- line-height: @lineHeight;
- color: @textColor;
-}
-
-/*******************************
- Headers
-*******************************/
-
-h1,
-h2,
-h3,
-h4,
-h5 {
- font-family: @headerFont;
- line-height: @headerLineHeight;
- margin: @headerMargin;
- font-weight: @headerFontWeight;
- padding: 0;
-}
-
-h1 {
- min-height: 1rem;
- font-size: @h1;
-}
-h2 {
- font-size: @h2;
-}
-h3 {
- font-size: @h3;
-}
-h4 {
- font-size: @h4;
-}
-h5 {
- font-size: @h5;
-}
-
-h1:first-child,
-h2:first-child,
-h3:first-child,
-h4:first-child,
-h5:first-child {
- margin-top: 0;
-}
-
-h1:last-child,
-h2:last-child,
-h3:last-child,
-h4:last-child,
-h5:last-child {
- margin-bottom: 0;
-}
-
-
-/*******************************
- Text
-*******************************/
-
-p {
- margin: @paragraphMargin;
- line-height: @paragraphLineHeight;
-}
-p:first-child {
- margin-top: 0;
-}
-p:last-child {
- margin-bottom: 0;
-}
-
-/*-------------------
- Links
---------------------*/
-
-a {
- color: @linkColor;
- text-decoration: @linkUnderline;
-}
-a:hover {
- color: @linkHoverColor;
- text-decoration: @linkHoverUnderline;
-}
-
-
-/*******************************
- Scrollbars
-*******************************/
-
-.addScrollbars() when (@useCustomScrollbars) {
-
- /* Force Simple Scrollbars */
- body ::-webkit-scrollbar {
- -webkit-appearance: none;
- width: @customScrollbarWidth;
- height: @customScrollbarHeight;
- }
- body ::-webkit-scrollbar-track {
- background: @trackBackground;
- border-radius: @trackBorderRadius;
- }
- body ::-webkit-scrollbar-thumb {
- cursor: pointer;
- border-radius: @thumbBorderRadius;
- background: @thumbBackground;
- transition: @thumbTransition;
- }
- body ::-webkit-scrollbar-thumb:window-inactive {
- background: @thumbInactiveBackground;
- }
- body ::-webkit-scrollbar-thumb:hover {
- background: @thumbHoverBackground;
- }
-
- /* Inverted UI */
- body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
- background: @trackInvertedBackground;
- }
- body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb {
- background: @thumbInvertedBackground;
- }
- body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive {
- background: @thumbInvertedInactiveBackground;
- }
- body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
- background: @thumbInvertedHoverBackground;
- }
-}
-
-/*******************************
- Highlighting
-*******************************/
-
-/* Site */
-::-webkit-selection {
- background-color: @highlightBackground;
- color: @highlightColor;
-}
-::-moz-selection {
- background-color: @highlightBackground;
- color: @highlightColor;
-}
-::selection {
- background-color: @highlightBackground;
- color: @highlightColor;
-}
-
-/* Form */
-textarea::-webkit-selection,
-input::-webkit-selection {
- background-color: @inputHighlightBackground;
- color: @inputHighlightColor;
-}
-textarea::-moz-selection,
-input::-moz-selection {
- background-color: @inputHighlightBackground;
- color: @inputHighlightColor;
-}
-textarea::selection,
-input::selection {
- background-color: @inputHighlightBackground;
- color: @inputHighlightColor;
-}
-
-.addScrollbars();
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/accordion.js b/semantic/src/definitions/modules/accordion.js
deleted file mode 100644
index 392d498..0000000
--- a/semantic/src/definitions/modules/accordion.js
+++ /dev/null
@@ -1,618 +0,0 @@
-/*!
- * # Fomantic-UI - Accordion
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.accordion = function(parameters) {
- var
- $allModules = $(this),
-
- 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.accordion.settings, parameters)
- : $.extend({}, $.fn.accordion.settings),
-
- className = settings.className,
- namespace = settings.namespace,
- selector = settings.selector,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
- moduleSelector = $allModules.selector || '',
-
- $module = $(this),
- $title = $module.find(selector.title),
- $content = $module.find(selector.content),
-
- element = this,
- instance = $module.data(moduleNamespace),
- observer,
- module
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing', $module);
- module.bind.events();
- if(settings.observeChanges) {
- module.observeChanges();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.debug('Destroying previous instance', $module);
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- $title = $module.find(selector.title);
- $content = $module.find(selector.content);
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- observer = new MutationObserver(function(mutations) {
- module.debug('DOM tree modified, updating selector cache');
- module.refresh();
- });
- observer.observe(element, {
- childList : true,
- subtree : true
- });
- module.debug('Setting up mutation observer', observer);
- }
- },
-
- bind: {
- events: function() {
- module.debug('Binding delegated events');
- $module
- .on(settings.on + eventNamespace, selector.trigger, module.event.click)
- ;
- }
- },
-
- event: {
- click: function() {
- module.toggle.call(this);
- }
- },
-
- toggle: function(query) {
- var
- $activeTitle = (query !== undefined)
- ? (typeof query === 'number')
- ? $title.eq(query)
- : $(query).closest(selector.title)
- : $(this).closest(selector.title),
- $activeContent = $activeTitle.next($content),
- isAnimating = $activeContent.hasClass(className.animating),
- isActive = $activeContent.hasClass(className.active),
- isOpen = (isActive && !isAnimating),
- isOpening = (!isActive && isAnimating)
- ;
- module.debug('Toggling visibility of content', $activeTitle);
- if(isOpen || isOpening) {
- if(settings.collapsible) {
- module.close.call($activeTitle);
- }
- else {
- module.debug('Cannot close accordion content collapsing is disabled');
- }
- }
- else {
- module.open.call($activeTitle);
- }
- },
-
- open: function(query) {
- var
- $activeTitle = (query !== undefined)
- ? (typeof query === 'number')
- ? $title.eq(query)
- : $(query).closest(selector.title)
- : $(this).closest(selector.title),
- $activeContent = $activeTitle.next($content),
- isAnimating = $activeContent.hasClass(className.animating),
- isActive = $activeContent.hasClass(className.active),
- isOpen = (isActive || isAnimating)
- ;
- if(isOpen) {
- module.debug('Accordion already open, skipping', $activeContent);
- return;
- }
- module.debug('Opening accordion content', $activeTitle);
- settings.onOpening.call($activeContent);
- settings.onChanging.call($activeContent);
- if(settings.exclusive) {
- module.closeOthers.call($activeTitle);
- }
- $activeTitle
- .addClass(className.active)
- ;
- $activeContent
- .stop(true, true)
- .addClass(className.animating)
- ;
- if(settings.animateChildren) {
- if($.fn.transition !== undefined && $module.transition('is supported')) {
- $activeContent
- .children()
- .transition({
- animation : 'fade in',
- queue : false,
- useFailSafe : true,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- skipInlineHidden : true,
- onComplete: function() {
- $activeContent.children().removeClass(className.transition);
- }
- })
- ;
- }
- else {
- $activeContent
- .children()
- .stop(true, true)
- .animate({
- opacity: 1
- }, settings.duration, module.resetOpacity)
- ;
- }
- }
- $activeContent
- .slideDown(settings.duration, settings.easing, function() {
- $activeContent
- .removeClass(className.animating)
- .addClass(className.active)
- ;
- module.reset.display.call(this);
- settings.onOpen.call(this);
- settings.onChange.call(this);
- })
- ;
- },
-
- close: function(query) {
- var
- $activeTitle = (query !== undefined)
- ? (typeof query === 'number')
- ? $title.eq(query)
- : $(query).closest(selector.title)
- : $(this).closest(selector.title),
- $activeContent = $activeTitle.next($content),
- isAnimating = $activeContent.hasClass(className.animating),
- isActive = $activeContent.hasClass(className.active),
- isOpening = (!isActive && isAnimating),
- isClosing = (isActive && isAnimating)
- ;
- if((isActive || isOpening) && !isClosing) {
- module.debug('Closing accordion content', $activeContent);
- settings.onClosing.call($activeContent);
- settings.onChanging.call($activeContent);
- $activeTitle
- .removeClass(className.active)
- ;
- $activeContent
- .stop(true, true)
- .addClass(className.animating)
- ;
- if(settings.animateChildren) {
- if($.fn.transition !== undefined && $module.transition('is supported')) {
- $activeContent
- .children()
- .transition({
- animation : 'fade out',
- queue : false,
- useFailSafe : true,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- skipInlineHidden : true
- })
- ;
- }
- else {
- $activeContent
- .children()
- .stop(true, true)
- .animate({
- opacity: 0
- }, settings.duration, module.resetOpacity)
- ;
- }
- }
- $activeContent
- .slideUp(settings.duration, settings.easing, function() {
- $activeContent
- .removeClass(className.animating)
- .removeClass(className.active)
- ;
- module.reset.display.call(this);
- settings.onClose.call(this);
- settings.onChange.call(this);
- })
- ;
- }
- },
-
- closeOthers: function(index) {
- var
- $activeTitle = (index !== undefined)
- ? $title.eq(index)
- : $(this).closest(selector.title),
- $parentTitles = $activeTitle.parents(selector.content).prev(selector.title),
- $activeAccordion = $activeTitle.closest(selector.accordion),
- activeSelector = selector.title + '.' + className.active + ':visible',
- activeContent = selector.content + '.' + className.active + ':visible',
- $openTitles,
- $nestedTitles,
- $openContents
- ;
- if(settings.closeNested) {
- $openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
- $openContents = $openTitles.next($content);
- }
- else {
- $openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
- $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
- $openTitles = $openTitles.not($nestedTitles);
- $openContents = $openTitles.next($content);
- }
- if( ($openTitles.length > 0) ) {
- module.debug('Exclusive enabled, closing other content', $openTitles);
- $openTitles
- .removeClass(className.active)
- ;
- $openContents
- .removeClass(className.animating)
- .stop(true, true)
- ;
- if(settings.animateChildren) {
- if($.fn.transition !== undefined && $module.transition('is supported')) {
- $openContents
- .children()
- .transition({
- animation : 'fade out',
- useFailSafe : true,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- skipInlineHidden : true
- })
- ;
- }
- else {
- $openContents
- .children()
- .stop(true, true)
- .animate({
- opacity: 0
- }, settings.duration, module.resetOpacity)
- ;
- }
- }
- $openContents
- .slideUp(settings.duration , settings.easing, function() {
- $(this).removeClass(className.active);
- module.reset.display.call(this);
- })
- ;
- }
- },
-
- reset: {
-
- display: function() {
- module.verbose('Removing inline display from element', this);
- $(this).css('display', '');
- if( $(this).attr('style') === '') {
- $(this)
- .attr('style', '')
- .removeAttr('style')
- ;
- }
- },
-
- opacity: function() {
- module.verbose('Removing inline opacity from element', this);
- $(this).css('opacity', '');
- if( $(this).attr('style') === '') {
- $(this)
- .attr('style', '')
- .removeAttr('style')
- ;
- }
- },
-
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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( (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(Array.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.accordion.settings = {
-
- name : 'Accordion',
- namespace : 'accordion',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- on : 'click', // event on title that opens accordion
-
- observeChanges : true, // whether accordion should automatically refresh on DOM insertion
-
- exclusive : true, // whether a single accordion content panel should be open at once
- collapsible : true, // whether accordion content can be closed
- closeNested : false, // whether nested content should be closed when a panel is closed
- animateChildren : true, // whether children opacity should be animated
-
- duration : 350, // duration of animation
- easing : 'easeOutQuad', // easing equation for animation
-
- onOpening : function(){}, // callback before open animation
- onClosing : function(){}, // callback before closing animation
- onChanging : function(){}, // callback before closing or opening animation
-
- onOpen : function(){}, // callback after open animation
- onClose : function(){}, // callback after closing animation
- onChange : function(){}, // callback after closing or opening animation
-
- error: {
- method : 'The method you called is not defined'
- },
-
- className : {
- active : 'active',
- animating : 'animating',
- transition: 'transition'
- },
-
- selector : {
- accordion : '.accordion',
- title : '.title',
- trigger : '.title',
- content : '.content'
- }
-
-};
-
-// Adds easing
-$.extend( $.easing, {
- easeOutQuad: function (x, t, b, c, d) {
- return -c *(t/=d)*(t-2) + b;
- }
-});
-
-})( jQuery, window, document );
-
diff --git a/semantic/src/definitions/modules/accordion.less b/semantic/src/definitions/modules/accordion.less
deleted file mode 100644
index 7fe052f..0000000
--- a/semantic/src/definitions/modules/accordion.less
+++ /dev/null
@@ -1,219 +0,0 @@
-/*!
- * # Fomantic-UI - Accordion
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'accordion';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Accordion
-*******************************/
-
-.ui.accordion,
-.ui.accordion .accordion {
- max-width: 100%;
-}
-.ui.accordion .accordion {
- margin: @childAccordionMargin;
- padding: @childAccordionPadding;
-}
-
-/* Title */
-.ui.accordion .title,
-.ui.accordion .accordion .title {
- cursor: pointer;
-}
-
-/* Default Styling */
-.ui.accordion .title:not(.ui) {
- padding: @titlePadding;
- font-family: @titleFont;
- font-size: @titleFontSize;
- color: @titleColor;
-}
-
-/* Default Styling */
-.ui.accordion:not(.styled) .title ~ .content:not(.ui),
-.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
- margin: @contentMargin;
- padding: @contentPadding;
-}
-.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
- padding-bottom: 0;
-}
-
-/* Arrow */
-.ui.accordion .title .dropdown.icon,
-.ui.accordion .accordion .title .dropdown.icon {
- display: @iconDisplay;
- float: @iconFloat;
- opacity: @iconOpacity;
- width: @iconWidth;
- height: @iconHeight;
- margin: @iconMargin;
- padding: @iconPadding;
- font-size: @iconFontSize;
- transition: @iconTransition;
- vertical-align: @iconVerticalAlign;
- transform: @iconTransform;
-}
-
-/*--------------
- Coupling
----------------*/
-
-/* Menu */
-.ui.accordion.menu .item .title {
- display: block;
- padding: @menuTitlePadding;
-}
-.ui.accordion.menu .item .title > .dropdown.icon {
- float: @menuIconFloat;
- margin: @menuIconMargin;
- transform: @menuIconTransform;
-}
-
-/* Header */
-.ui.accordion .ui.header .dropdown.icon {
- font-size: @iconFontSize;
- margin: @iconMargin;
-}
-
-/*******************************
- States
-*******************************/
-
-.ui.accordion .active.title .dropdown.icon,
-.ui.accordion .accordion .active.title .dropdown.icon {
- transform: @activeIconTransform;
-}
-
-.ui.accordion.menu .item .active.title > .dropdown.icon {
- transform: @activeIconTransform;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationAccordionStyled) {
- /*--------------
- Styled
- ---------------*/
-
- .ui.styled.accordion {
- width: @styledWidth;
- }
-
- .ui.styled.accordion,
- .ui.styled.accordion .accordion {
- border-radius: @styledBorderRadius;
- background: @styledBackground;
- box-shadow: @styledBoxShadow;
- }
- .ui.styled.accordion .title,
- .ui.styled.accordion .accordion .title {
- margin: @styledTitleMargin;
- padding: @styledTitlePadding;
- color: @styledTitleColor;
- font-weight: @styledTitleFontWeight;
- border-top: @styledTitleBorder;
- transition: @styledTitleTransition;
- }
- .ui.styled.accordion > .title:first-child,
- .ui.styled.accordion .accordion .title:first-child {
- border-top: none;
- }
-
-
- /* Content */
- .ui.styled.accordion .content,
- .ui.styled.accordion .accordion .content {
- margin: @styledContentMargin;
- padding: @styledContentPadding;
- }
- .ui.styled.accordion .accordion .content {
- margin: @styledChildContentMargin;
- padding: @styledChildContentPadding;
- }
-
-
- /* Hover */
- .ui.styled.accordion .title:hover,
- .ui.styled.accordion .active.title,
- .ui.styled.accordion .accordion .title:hover,
- .ui.styled.accordion .accordion .active.title {
- background: @styledTitleHoverBackground;
- color: @styledTitleHoverColor;
- }
- .ui.styled.accordion .accordion .title:hover,
- .ui.styled.accordion .accordion .active.title {
- background: @styledHoverChildTitleBackground;
- color: @styledHoverChildTitleColor;
- }
-
-
- /* Active */
- .ui.styled.accordion .active.title {
- background: @styledActiveTitleBackground;
- color: @styledActiveTitleColor;
- }
- .ui.styled.accordion .accordion .active.title {
- background: @styledActiveChildTitleBackground;
- color: @styledActiveChildTitleColor;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-/*--------------
- Not Active
----------------*/
-
-.ui.accordion .title ~ .content:not(.active),
-.ui.accordion .accordion .title ~ .content:not(.active) {
- display: none;
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationAccordionFluid) {
- /*--------------
- Fluid
- ---------------*/
-
- .ui.fluid.accordion,
- .ui.fluid.accordion .accordion {
- width: 100%;
- }
-}
-
-& when (@variationAccordionInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.accordion .title:not(.ui) {
- color: @invertedTitleColor;
- }
-}
-
-.loadUIOverrides();
-
diff --git a/semantic/src/definitions/modules/calendar.js b/semantic/src/definitions/modules/calendar.js
deleted file mode 100644
index 1757f32..0000000
--- a/semantic/src/definitions/modules/calendar.js
+++ /dev/null
@@ -1,1774 +0,0 @@
-/*!
- * # Fomantic-UI - Calendar
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.calendar = 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,
- timeGapTable = {
- '5': {'row': 4, 'column': 3 },
- '10': {'row': 3, 'column': 2 },
- '15': {'row': 2, 'column': 2 },
- '20': {'row': 3, 'column': 1 },
- '30': {'row': 2, 'column': 1 }
- },
- numberText = ['','one','two','three','four','five','six','seven','eight']
- ;
-
- $allModules
- .each(function () {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.calendar.settings, parameters)
- : $.extend({}, $.fn.calendar.settings),
-
- className = settings.className,
- namespace = settings.namespace,
- selector = settings.selector,
- formatter = settings.formatter,
- parser = settings.parser,
- metadata = settings.metadata,
- timeGap = timeGapTable[settings.minTimeGap],
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $input = $module.find(selector.input),
- $container = $module.find(selector.popup),
- $activator = $module.find(selector.activator),
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- isTouch,
- isTouchDown = false,
- isInverted = $module.hasClass(className.inverted),
- focusDateUsedForRange = false,
- selectionComplete = false,
- classObserver,
- module
- ;
-
- module = {
-
- initialize: function () {
- module.debug('Initializing calendar for', element, $module);
-
- isTouch = module.get.isTouch();
- module.setup.config();
- module.setup.popup();
- module.setup.inline();
- module.setup.input();
- module.setup.date();
- module.create.calendar();
-
- module.bind.events();
- module.observeChanges();
- module.instantiate();
- },
-
- instantiate: function () {
- module.verbose('Storing instance of calendar');
- instance = module;
- $module.data(moduleNamespace, instance);
- },
-
- destroy: function () {
- module.verbose('Destroying previous calendar for', element);
- $module.removeData(moduleNamespace);
- module.unbind.events();
- module.disconnect.classObserver();
- },
-
- setup: {
- config: function () {
- if (module.get.minDate() !== null) {
- module.set.minDate($module.data(metadata.minDate));
- }
- if (module.get.maxDate() !== null) {
- module.set.maxDate($module.data(metadata.maxDate));
- }
- module.setting('type', module.get.type());
- module.setting('on', settings.on || ($input.length ? 'focus' : 'click'));
- },
- popup: function () {
- if (settings.inline) {
- return;
- }
- if (!$activator.length) {
- $activator = $module.children().first();
- if (!$activator.length) {
- return;
- }
- }
- if ($.fn.popup === undefined) {
- module.error(error.popup);
- return;
- }
- if (!$container.length) {
- //prepend the popup element to the activator's parent so that it has less chance of messing with
- //the styling (eg input action button needs to be the last child to have correct border radius)
- var $activatorParent = $activator.parent(),
- domPositionFunction = $activatorParent.closest(selector.append).length !== 0 ? 'appendTo' : 'prependTo';
- $container = $('<div/>').addClass(className.popup)[domPositionFunction]($activatorParent);
- }
- $container.addClass(className.calendar);
- if(isInverted){
- $container.addClass(className.inverted);
- }
- var onVisible = function () {
- module.refreshTooltips();
- return settings.onVisible.apply($container, arguments);
- };
- var onHidden = settings.onHidden;
- if (!$input.length) {
- //no input, $container has to handle focus/blur
- $container.attr('tabindex', '0');
- onVisible = function () {
- module.refreshTooltips();
- module.focus();
- return settings.onVisible.apply($container, arguments);
- };
- onHidden = function () {
- module.blur();
- return settings.onHidden.apply($container, arguments);
- };
- }
- var onShow = function () {
- //reset the focus date onShow
- module.set.focusDate(module.get.date());
- module.set.mode(module.get.validatedMode(settings.startMode));
- return settings.onShow.apply($container, arguments);
- };
- var on = module.setting('on');
- var options = $.extend({}, settings.popupOptions, {
- popup: $container,
- on: on,
- hoverable: on === 'hover',
- closable: on === 'click',
- onShow: onShow,
- onVisible: onVisible,
- onHide: settings.onHide,
- onHidden: onHidden
- });
- module.popup(options);
- },
- inline: function () {
- if ($activator.length && !settings.inline) {
- return;
- }
- settings.inline = true;
- $container = $('<div/>').addClass(className.calendar).appendTo($module);
- if (!$input.length) {
- $container.attr('tabindex', '0');
- }
- },
- input: function () {
- if (settings.touchReadonly && $input.length && isTouch) {
- $input.prop('readonly', true);
- }
- module.check.disabled();
- },
- date: function () {
- var date;
- if (settings.initialDate) {
- date = parser.date(settings.initialDate, settings);
- } else if ($module.data(metadata.date) !== undefined) {
- date = parser.date($module.data(metadata.date), settings);
- } else if ($input.length) {
- date = parser.date($input.val(), settings);
- }
- module.set.date(date, settings.formatInput, false);
- module.set.mode(module.get.mode(), false);
- }
- },
-
- trigger: {
- change: function() {
- var
- inputElement = $input[0]
- ;
- if(inputElement) {
- var events = document.createEvent('HTMLEvents');
- module.verbose('Triggering native change event');
- events.initEvent('change', true, false);
- inputElement.dispatchEvent(events);
- }
- }
- },
-
- create: {
- calendar: function () {
- var i, r, c, p, row, cell, pageGrid;
-
- var
- mode = module.get.mode(),
- today = new Date(),
- date = module.get.date(),
- focusDate = module.get.focusDate(),
- display = module.helper.dateInRange(focusDate || date || settings.initialDate || today)
- ;
-
- if (!focusDate) {
- focusDate = display;
- module.set.focusDate(focusDate, false, false);
- }
-
- var
- isYear = mode === 'year',
- isMonth = mode === 'month',
- isDay = mode === 'day',
- isHour = mode === 'hour',
- isMinute = mode === 'minute',
- isTimeOnly = settings.type === 'time'
- ;
-
- var multiMonth = Math.max(settings.multiMonth, 1);
- var monthOffset = !isDay ? 0 : module.get.monthOffset();
-
- var
- minute = display.getMinutes(),
- hour = display.getHours(),
- day = display.getDate(),
- startMonth = display.getMonth() + monthOffset,
- year = display.getFullYear()
- ;
-
- var columns = isDay ? settings.showWeekNumbers ? 8 : 7 : isHour ? 4 : timeGap['column'];
- var rows = isDay || isHour ? 6 : timeGap['row'];
- var pages = isDay ? multiMonth : 1;
-
- var container = $container;
- var tooltipPosition = container.hasClass("left") ? "right center" : "left center";
- container.empty();
- if (pages > 1) {
- pageGrid = $('<div/>').addClass(className.grid).appendTo(container);
- }
-
- for (p = 0; p < pages; p++) {
- if (pages > 1) {
- var pageColumn = $('<div/>').addClass(className.column).appendTo(pageGrid);
- container = pageColumn;
- }
-
- var month = startMonth + p;
- var firstMonthDayColumn = (new Date(year, month, 1).getDay() - settings.firstDayOfWeek % 7 + 7) % 7;
- if (!settings.constantHeight && isDay) {
- var requiredCells = new Date(year, month + 1, 0).getDate() + firstMonthDayColumn;
- rows = Math.ceil(requiredCells / 7);
- }
-
- var
- yearChange = isYear ? 10 : isMonth ? 1 : 0,
- monthChange = isDay ? 1 : 0,
- dayChange = isHour || isMinute ? 1 : 0,
- prevNextDay = isHour || isMinute ? day : 1,
- prevDate = new Date(year - yearChange, month - monthChange, prevNextDay - dayChange, hour),
- nextDate = new Date(year + yearChange, month + monthChange, prevNextDay + dayChange, hour),
- prevLast = isYear ? new Date(Math.ceil(year / 10) * 10 - 9, 0, 0) :
- isMonth ? new Date(year, 0, 0) : isDay ? new Date(year, month, 0) : new Date(year, month, day, -1),
- nextFirst = isYear ? new Date(Math.ceil(year / 10) * 10 + 1, 0, 1) :
- isMonth ? new Date(year + 1, 0, 1) : isDay ? new Date(year, month + 1, 1) : new Date(year, month, day + 1)
- ;
-
- var tempMode = mode;
- if (isDay && settings.showWeekNumbers){
- tempMode += ' andweek';
- }
- var table = $('<table/>').addClass(className.table).addClass(tempMode).addClass(numberText[columns] + ' column').appendTo(container);
- if(isInverted){
- table.addClass(className.inverted);
- }
- var textColumns = columns;
- //no header for time-only mode
- if (!isTimeOnly) {
- var thead = $('<thead/>').appendTo(table);
-
- row = $('<tr/>').appendTo(thead);
- cell = $('<th/>').attr('colspan', '' + columns).appendTo(row);
-
- var headerDate = isYear || isMonth ? new Date(year, 0, 1) :
- isDay ? new Date(year, month, 1) : new Date(year, month, day, hour, minute);
- var headerText = $('<span/>').addClass(className.link).appendTo(cell);
- headerText.text(formatter.header(headerDate, mode, settings));
- var newMode = isMonth ? (settings.disableYear ? 'day' : 'year') :
- isDay ? (settings.disableMonth ? 'year' : 'month') : 'day';
- headerText.data(metadata.mode, newMode);
-
- if (p === 0) {
- var prev = $('<span/>').addClass(className.prev).appendTo(cell);
- prev.data(metadata.focusDate, prevDate);
- prev.toggleClass(className.disabledCell, !module.helper.isDateInRange(prevLast, mode));
- $('<i/>').addClass(className.prevIcon).appendTo(prev);
- }
-
- if (p === pages - 1) {
- var next = $('<span/>').addClass(className.next).appendTo(cell);
- next.data(metadata.focusDate, nextDate);
- next.toggleClass(className.disabledCell, !module.helper.isDateInRange(nextFirst, mode));
- $('<i/>').addClass(className.nextIcon).appendTo(next);
- }
- if (isDay) {
- row = $('<tr/>').appendTo(thead);
- if(settings.showWeekNumbers) {
- cell = $('<th/>').appendTo(row);
- cell.text(settings.text.weekNo);
- cell.addClass(className.weekCell);
- textColumns--;
- }
- for (i = 0; i < textColumns; i++) {
- cell = $('<th/>').appendTo(row);
- cell.text(formatter.dayColumnHeader((i + settings.firstDayOfWeek) % 7, settings));
- }
- }
- }
-
- var tbody = $('<tbody/>').appendTo(table);
- i = isYear ? Math.ceil(year / 10) * 10 - 9 : isDay ? 1 - firstMonthDayColumn : 0;
- for (r = 0; r < rows; r++) {
- row = $('<tr/>').appendTo(tbody);
- if(isDay && settings.showWeekNumbers){
- cell = $('<th/>').appendTo(row);
- cell.text(module.get.weekOfYear(year,month,i+1-settings.firstDayOfWeek));
- cell.addClass(className.weekCell);
- }
- for (c = 0; c < textColumns; c++, i++) {
- var cellDate = isYear ? new Date(i, month, 1, hour, minute) :
- isMonth ? new Date(year, i, 1, hour, minute) : isDay ? new Date(year, month, i, hour, minute) :
- isHour ? new Date(year, month, day, i) : new Date(year, month, day, hour, i * settings.minTimeGap);
- var cellText = isYear ? i :
- isMonth ? settings.text.monthsShort[i] : isDay ? cellDate.getDate() :
- formatter.time(cellDate, settings, true);
- cell = $('<td/>').addClass(className.cell).appendTo(row);
- cell.text(cellText);
- cell.data(metadata.date, cellDate);
- var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12);
- var disabled = (!settings.selectAdjacentDays && adjacent) || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode) || !module.helper.isEnabled(cellDate, mode);
- if (disabled) {
- var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates);
- if (disabledDate !== null && disabledDate[metadata.message]) {
- cell.attr("data-tooltip", disabledDate[metadata.message]);
- cell.attr("data-position", disabledDate[metadata.position] || tooltipPosition);
- if(disabledDate[metadata.inverted] || (isInverted && disabledDate[metadata.inverted] === undefined)) {
- cell.attr("data-inverted", '');
- }
- if(disabledDate[metadata.variation]) {
- cell.attr("data-variation", disabledDate[metadata.variation]);
- }
- }
- } else {
- var eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates);
- if (eventDate !== null) {
- cell.addClass(eventDate[metadata.class] || settings.eventClass);
- if (eventDate[metadata.message]) {
- cell.attr("data-tooltip", eventDate[metadata.message]);
- cell.attr("data-position", eventDate[metadata.position] || tooltipPosition);
- if(eventDate[metadata.inverted] || (isInverted && eventDate[metadata.inverted] === undefined)) {
- cell.attr("data-inverted", '');
- }
- if(eventDate[metadata.variation]) {
- cell.attr("data-variation", eventDate[metadata.variation]);
- }
- }
- }
- }
- var active = module.helper.dateEqual(cellDate, date, mode);
- var isToday = module.helper.dateEqual(cellDate, today, mode);
- cell.toggleClass(className.adjacentCell, adjacent);
- cell.toggleClass(className.disabledCell, disabled);
- cell.toggleClass(className.activeCell, active && !adjacent);
- if (!isHour && !isMinute) {
- cell.toggleClass(className.todayCell, !adjacent && isToday);
- }
-
- // Allow for external modifications of each cell
- var cellOptions = {
- mode: mode,
- adjacent: adjacent,
- disabled: disabled,
- active: active,
- today: isToday
- };
- formatter.cell(cell, cellDate, cellOptions);
-
- if (module.helper.dateEqual(cellDate, focusDate, mode)) {
- //ensure that the focus date is exactly equal to the cell date
- //so that, if selected, the correct value is set
- module.set.focusDate(cellDate, false, false);
- }
- }
- }
-
- if (settings.today) {
- var todayRow = $('<tr/>').appendTo(tbody);
- var todayButton = $('<td/>').attr('colspan', '' + columns).addClass(className.today).appendTo(todayRow);
- todayButton.text(formatter.today(settings));
- todayButton.data(metadata.date, today);
- }
-
- module.update.focus(false, table);
-
- if(settings.inline){
- module.refreshTooltips();
- }
- }
- }
- },
-
- update: {
- focus: function (updateRange, container) {
- container = container || $container;
- var mode = module.get.mode();
- var date = module.get.date();
- var focusDate = module.get.focusDate();
- var startDate = module.get.startDate();
- var endDate = module.get.endDate();
- var rangeDate = (updateRange ? focusDate : null) || date || (!isTouch ? focusDate : null);
-
- container.find('td').each(function () {
- var cell = $(this);
- var cellDate = cell.data(metadata.date);
- if (!cellDate) {
- return;
- }
- var disabled = cell.hasClass(className.disabledCell);
- var active = cell.hasClass(className.activeCell);
- var adjacent = cell.hasClass(className.adjacentCell);
- var focused = module.helper.dateEqual(cellDate, focusDate, mode);
- var inRange = !rangeDate ? false :
- ((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) ||
- (!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate)));
- cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && (!adjacent || (settings.selectAdjacentDays && adjacent)) && !disabled);
-
- if (module.helper.isTodayButton(cell)) {
- return;
- }
- cell.toggleClass(className.rangeCell, inRange && !active && !disabled);
- });
- }
- },
-
- refresh: function () {
- module.create.calendar();
- },
-
- refreshTooltips: function() {
- var winWidth = $(window).width();
- $container.find('td[data-position]').each(function () {
- var cell = $(this);
- var tooltipWidth = window.getComputedStyle(cell[0], ':after').width.replace(/[^0-9\.]/g,'');
- var tooltipPosition = cell.attr('data-position');
- // use a fallback width of 250 (calendar width) for IE/Edge (which return "auto")
- var calcPosition = (winWidth - cell.width() - (parseInt(tooltipWidth,10) || 250)) > cell.offset().left ? 'right' : 'left';
- if(tooltipPosition.indexOf(calcPosition) === -1) {
- cell.attr('data-position',tooltipPosition.replace(/(left|right)/,calcPosition));
- }
- });
- },
-
- bind: {
- events: function () {
- module.debug('Binding events');
- $container.on('mousedown' + eventNamespace, module.event.mousedown);
- $container.on('touchstart' + eventNamespace, module.event.mousedown);
- $container.on('mouseup' + eventNamespace, module.event.mouseup);
- $container.on('touchend' + eventNamespace, module.event.mouseup);
- $container.on('mouseover' + eventNamespace, module.event.mouseover);
- if ($input.length) {
- $input.on('input' + eventNamespace, module.event.inputChange);
- $input.on('focus' + eventNamespace, module.event.inputFocus);
- $input.on('blur' + eventNamespace, module.event.inputBlur);
- $input.on('keydown' + eventNamespace, module.event.keydown);
- } else {
- $container.on('keydown' + eventNamespace, module.event.keydown);
- }
- }
- },
-
- unbind: {
- events: function () {
- module.debug('Unbinding events');
- $container.off(eventNamespace);
- if ($input.length) {
- $input.off(eventNamespace);
- }
- }
- },
-
- event: {
- mouseover: function (event) {
- var target = $(event.target);
- var date = target.data(metadata.date);
- var mousedown = event.buttons === 1;
- if (date) {
- module.set.focusDate(date, false, true, mousedown);
- }
- },
- mousedown: function (event) {
- if ($input.length) {
- //prevent the mousedown on the calendar causing the input to lose focus
- event.preventDefault();
- }
- isTouchDown = event.type.indexOf('touch') >= 0;
- var target = $(event.target);
- var date = target.data(metadata.date);
- if (date) {
- module.set.focusDate(date, false, true, true);
- }
- },
- mouseup: function (event) {
- //ensure input has focus so that it receives keydown events for calendar navigation
- module.focus();
- event.preventDefault();
- event.stopPropagation();
- isTouchDown = false;
- var target = $(event.target);
- if (target.hasClass("disabled")) {
- return;
- }
- var parent = target.parent();
- if (parent.data(metadata.date) || parent.data(metadata.focusDate) || parent.data(metadata.mode)) {
- //clicked on a child element, switch to parent (used when clicking directly on prev/next <i> icon element)
- target = parent;
- }
- var date = target.data(metadata.date);
- var focusDate = target.data(metadata.focusDate);
- var mode = target.data(metadata.mode);
- if (date && settings.onSelect.call(element, date, module.get.mode()) !== false) {
- var forceSet = target.hasClass(className.today);
- module.selectDate(date, forceSet);
- }
- else if (focusDate) {
- module.set.focusDate(focusDate);
- }
- else if (mode) {
- module.set.mode(mode);
- }
- },
- keydown: function (event) {
- var keyCode = event.which;
- if (keyCode === 27 || keyCode === 9) {
- //esc || tab
- module.popup('hide');
- }
-
- if (module.popup('is visible')) {
- if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
- //arrow keys
- var mode = module.get.mode();
- var bigIncrement = mode === 'day' ? 7 : mode === 'hour' ? 4 : mode === 'minute' ? timeGap['column'] : 3;
- var increment = keyCode === 37 ? -1 : keyCode === 38 ? -bigIncrement : keyCode == 39 ? 1 : bigIncrement;
- increment *= mode === 'minute' ? settings.minTimeGap : 1;
- var focusDate = module.get.focusDate() || module.get.date() || new Date();
- var year = focusDate.getFullYear() + (mode === 'year' ? increment : 0);
- var month = focusDate.getMonth() + (mode === 'month' ? increment : 0);
- var day = focusDate.getDate() + (mode === 'day' ? increment : 0);
- var hour = focusDate.getHours() + (mode === 'hour' ? increment : 0);
- var minute = focusDate.getMinutes() + (mode === 'minute' ? increment : 0);
- var newFocusDate = new Date(year, month, day, hour, minute);
- if (settings.type === 'time') {
- newFocusDate = module.helper.mergeDateTime(focusDate, newFocusDate);
- }
- if (module.helper.isDateInRange(newFocusDate, mode)) {
- module.set.focusDate(newFocusDate);
- }
- } else if (keyCode === 13) {
- //enter
- var mode = module.get.mode();
- var date = module.get.focusDate();
- if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) {
- module.selectDate(date);
- }
- //disable form submission:
- event.preventDefault();
- event.stopPropagation();
- }
- }
-
- if (keyCode === 38 || keyCode === 40) {
- //arrow-up || arrow-down
- event.preventDefault(); //don't scroll
- module.popup('show');
- }
- },
- inputChange: function () {
- var val = $input.val();
- var date = parser.date(val, settings);
- module.set.date(date, false);
- },
- inputFocus: function () {
- $container.addClass(className.active);
- },
- inputBlur: function () {
- $container.removeClass(className.active);
- if (settings.formatInput) {
- var date = module.get.date();
- var text = formatter.datetime(date, settings);
- $input.val(text);
- }
- if(selectionComplete){
- module.trigger.change();
- selectionComplete = false;
- }
- },
- class: {
- mutation: function(mutations) {
- mutations.forEach(function(mutation) {
- if(mutation.attributeName === "class") {
- module.check.disabled();
- }
- });
- }
- }
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- classObserver = new MutationObserver(module.event.class.mutation);
- module.debug('Setting up mutation observer', classObserver);
- module.observe.class();
- }
- },
-
- disconnect: {
- classObserver: function() {
- if($input.length && classObserver) {
- classObserver.disconnect();
- }
- }
- },
-
- observe: {
- class: function() {
- if($input.length && classObserver) {
- classObserver.observe($module[0], {
- attributes : true
- });
- }
- }
- },
-
- is: {
- disabled: function() {
- return $module.hasClass(className.disabled);
- }
- },
-
- check: {
- disabled: function(){
- $input.attr('tabindex',module.is.disabled() ? -1 : 0);
- }
- },
-
- get: {
- weekOfYear: function(weekYear,weekMonth,weekDay) {
- // adapted from http://www.merlyn.demon.co.uk/weekcalc.htm
- var ms1d = 864e5, // milliseconds in a day
- ms7d = 7 * ms1d; // milliseconds in a week
-
- return function() { // return a closure so constants get calculated only once
- var DC3 = Date.UTC(weekYear, weekMonth, weekDay + 3) / ms1d, // an Absolute Day Number
- AWN = Math.floor(DC3 / 7), // an Absolute Week Number
- Wyr = new Date(AWN * ms7d).getUTCFullYear();
-
- return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
- }();
- },
- date: function () {
- return module.helper.sanitiseDate($module.data(metadata.date)) || null;
- },
- inputDate: function() {
- return $input.val();
- },
- focusDate: function () {
- return $module.data(metadata.focusDate) || null;
- },
- startDate: function () {
- var startModule = module.get.calendarModule(settings.startCalendar);
- return (startModule ? startModule.get.date() : $module.data(metadata.startDate)) || null;
- },
- endDate: function () {
- var endModule = module.get.calendarModule(settings.endCalendar);
- return (endModule ? endModule.get.date() : $module.data(metadata.endDate)) || null;
- },
- minDate: function() {
- return $module.data(metadata.minDate) || null;
- },
- maxDate: function() {
- return $module.data(metadata.maxDate) || null;
- },
- monthOffset: function () {
- return $module.data(metadata.monthOffset) || 0;
- },
- mode: function () {
- //only returns valid modes for the current settings
- var mode = $module.data(metadata.mode) || settings.startMode;
- return module.get.validatedMode(mode);
- },
- validatedMode: function(mode){
- var validModes = module.get.validModes();
- if ($.inArray(mode, validModes) >= 0) {
- return mode;
- }
- return settings.type === 'time' ? 'hour' :
- settings.type === 'month' ? 'month' :
- settings.type === 'year' ? 'year' : 'day';
- },
- type: function() {
- return $module.data(metadata.type) || settings.type;
- },
- validModes: function () {
- var validModes = [];
- if (settings.type !== 'time') {
- if (!settings.disableYear || settings.type === 'year') {
- validModes.push('year');
- }
- if (!(settings.disableMonth || settings.type === 'year') || settings.type === 'month') {
- validModes.push('month');
- }
- if (settings.type.indexOf('date') >= 0) {
- validModes.push('day');
- }
- }
- if (settings.type.indexOf('time') >= 0) {
- validModes.push('hour');
- if (!settings.disableMinute) {
- validModes.push('minute');
- }
- }
- return validModes;
- },
- isTouch: function () {
- try {
- document.createEvent('TouchEvent');
- return true;
- }
- catch (e) {
- return false;
- }
- },
- calendarModule: function (selector) {
- if (!selector) {
- return null;
- }
- if (!(selector instanceof $)) {
- selector = $(selector).first();
- }
- //assume range related calendars are using the same namespace
- return selector.data(moduleNamespace);
- }
- },
-
- set: {
- date: function (date, updateInput, fireChange) {
- updateInput = updateInput !== false;
- fireChange = fireChange !== false;
- date = module.helper.sanitiseDate(date);
- date = module.helper.dateInRange(date);
-
- var mode = module.get.mode();
- var text = formatter.datetime(date, settings);
-
- if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) {
- return false;
- }
-
- module.set.focusDate(date);
-
- if (settings.isDisabled(date, mode)) {
- return false;
- }
-
- var endDate = module.get.endDate();
- if (!!endDate && !!date && date > endDate) {
- //selected date is greater than end date in range, so clear end date
- module.set.endDate(undefined);
- }
- module.set.dataKeyValue(metadata.date, date);
-
- if (updateInput && $input.length) {
- $input.val(text);
- }
-
- if (fireChange) {
- settings.onChange.call(element, date, text, mode);
- }
- },
- startDate: function (date, refreshCalendar) {
- date = module.helper.sanitiseDate(date);
- var startModule = module.get.calendarModule(settings.startCalendar);
- if (startModule) {
- startModule.set.date(date);
- }
- module.set.dataKeyValue(metadata.startDate, date, refreshCalendar);
- },
- endDate: function (date, refreshCalendar) {
- date = module.helper.sanitiseDate(date);
- var endModule = module.get.calendarModule(settings.endCalendar);
- if (endModule) {
- endModule.set.date(date);
- }
- module.set.dataKeyValue(metadata.endDate, date, refreshCalendar);
- },
- focusDate: function (date, refreshCalendar, updateFocus, updateRange) {
- date = module.helper.sanitiseDate(date);
- date = module.helper.dateInRange(date);
- var isDay = module.get.mode() === 'day';
- var oldFocusDate = module.get.focusDate();
- if (isDay && date && oldFocusDate) {
- var yearDelta = date.getFullYear() - oldFocusDate.getFullYear();
- var monthDelta = yearDelta * 12 + date.getMonth() - oldFocusDate.getMonth();
- if (monthDelta) {
- var monthOffset = module.get.monthOffset() - monthDelta;
- module.set.monthOffset(monthOffset, false);
- }
- }
- var changed = module.set.dataKeyValue(metadata.focusDate, date, !!date && refreshCalendar);
- updateFocus = (updateFocus !== false && changed && refreshCalendar === false) || focusDateUsedForRange != updateRange;
- focusDateUsedForRange = updateRange;
- if (updateFocus) {
- module.update.focus(updateRange);
- }
- },
- minDate: function (date) {
- date = module.helper.sanitiseDate(date);
- if (settings.maxDate !== null && settings.maxDate <= date) {
- module.verbose('Unable to set minDate variable bigger that maxDate variable', date, settings.maxDate);
- } else {
- module.setting('minDate', date);
- module.set.dataKeyValue(metadata.minDate, date);
- }
- },
- maxDate: function (date) {
- date = module.helper.sanitiseDate(date);
- if (settings.minDate !== null && settings.minDate >= date) {
- module.verbose('Unable to set maxDate variable lower that minDate variable', date, settings.minDate);
- } else {
- module.setting('maxDate', date);
- module.set.dataKeyValue(metadata.maxDate, date);
- }
- },
- monthOffset: function (monthOffset, refreshCalendar) {
- var multiMonth = Math.max(settings.multiMonth, 1);
- monthOffset = Math.max(1 - multiMonth, Math.min(0, monthOffset));
- module.set.dataKeyValue(metadata.monthOffset, monthOffset, refreshCalendar);
- },
- mode: function (mode, refreshCalendar) {
- module.set.dataKeyValue(metadata.mode, mode, refreshCalendar);
- },
- dataKeyValue: function (key, value, refreshCalendar) {
- var oldValue = $module.data(key);
- var equal = oldValue === value || (oldValue <= value && oldValue >= value); //equality test for dates and string objects
- if (value) {
- $module.data(key, value);
- } else {
- $module.removeData(key);
- }
- refreshCalendar = refreshCalendar !== false && !equal;
- if (refreshCalendar) {
- module.refresh();
- }
- return !equal;
- }
- },
-
- selectDate: function (date, forceSet) {
- module.verbose('New date selection', date);
- var mode = module.get.mode();
- var complete = forceSet || mode === 'minute' ||
- (settings.disableMinute && mode === 'hour') ||
- (settings.type === 'date' && mode === 'day') ||
- (settings.type === 'month' && mode === 'month') ||
- (settings.type === 'year' && mode === 'year');
- if (complete) {
- var canceled = module.set.date(date) === false;
- if (!canceled) {
- selectionComplete = true;
- if(settings.closable) {
- module.popup('hide');
- //if this is a range calendar, focus the container or input. This will open the popup from its event listeners.
- var endModule = module.get.calendarModule(settings.endCalendar);
- if (endModule) {
- if (endModule.setting('on') !== 'focus') {
- endModule.popup('show');
- }
- endModule.focus();
- }
- }
- }
- } else {
- var newMode = mode === 'year' ? (!settings.disableMonth ? 'month' : 'day') :
- mode === 'month' ? 'day' : mode === 'day' ? 'hour' : 'minute';
- module.set.mode(newMode);
- if (mode === 'hour' || (mode === 'day' && module.get.date())) {
- //the user has chosen enough to consider a valid date/time has been chosen
- module.set.date(date, true, false);
- } else {
- module.set.focusDate(date);
- }
- }
- },
-
- changeDate: function (date) {
- module.set.date(date);
- },
-
- clear: function () {
- module.set.date(undefined);
- },
-
- popup: function () {
- return $activator.popup.apply($activator, arguments);
- },
-
- focus: function () {
- if ($input.length) {
- $input.focus();
- } else {
- $container.focus();
- }
- },
- blur: function () {
- if ($input.length) {
- $input.blur();
- } else {
- $container.blur();
- }
- },
-
- helper: {
- isDisabled: function(date, mode) {
- return (mode === 'day' || mode === 'month' || mode === 'year') && ((settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){
- if(typeof d === 'string') {
- d = module.helper.sanitiseDate(d);
- }
- if (d instanceof Date) {
- return module.helper.dateEqual(date, d, mode);
- }
- if (d !== null && typeof d === 'object') {
- if (d[metadata.year]) {
- if (typeof d[metadata.year] === 'number') {
- return date.getFullYear() == d[metadata.year];
- } else if (Array.isArray(d[metadata.year])) {
- return d[metadata.year].indexOf(date.getFullYear()) > -1;
- }
- } else if (d[metadata.month]) {
- if (typeof d[metadata.month] === 'number') {
- return date.getMonth() == d[metadata.month];
- } else if (Array.isArray(d[metadata.month])) {
- return d[metadata.month].indexOf(date.getMonth()) > -1;
- } else if (d[metadata.month] instanceof Date) {
- var sdate = module.helper.sanitiseDate(d[metadata.month]);
- return (date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())
- }
- } else if (d[metadata.date] && mode === 'day') {
- if (d[metadata.date] instanceof Date) {
- return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode);
- } else if (Array.isArray(d[metadata.date])) {
- return d[metadata.date].some(function(idate) {
- return module.helper.dateEqual(date, idate, mode);
- });
- }
- }
- }
- }));
- },
- isEnabled: function(date, mode) {
- if (mode === 'day') {
- return settings.enabledDates.length === 0 || settings.enabledDates.some(function(d){
- if(typeof d === 'string') {
- d = module.helper.sanitiseDate(d);
- }
- if (d instanceof Date) {
- return module.helper.dateEqual(date, d, mode);
- }
- if (d !== null && typeof d === 'object' && d[metadata.date]) {
- return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode);
- }
- });
- } else {
- return true;
- }
- },
- findDayAsObject: function(date, mode, dates) {
- if (mode === 'day' || mode === 'month' || mode === 'year') {
- var d;
- for (var i = 0; i < dates.length; i++) {
- d = dates[i];
- if(typeof d === 'string') {
- d = module.helper.sanitiseDate(d);
- }
- if (d instanceof Date && module.helper.dateEqual(date, d, mode)) {
- var dateObject = {};
- dateObject[metadata.date] = d;
- return dateObject;
- }
- else if (d !== null && typeof d === 'object') {
- if (d[metadata.year]) {
- if (typeof d[metadata.year] === 'number' && date.getFullYear() == d[metadata.year]) {
- return d;
- } else if (Array.isArray(d[metadata.year])) {
- if (d[metadata.year].indexOf(date.getFullYear()) > -1) {
- return d;
- }
- }
- } else if (d[metadata.month]) {
- if (typeof d[metadata.month] === 'number' && date.getMonth() == d[metadata.month]) {
- return d;
- } else if (Array.isArray(d[metadata.month])) {
- if (d[metadata.month].indexOf(date.getMonth()) > -1) {
- return d;
- }
- } else if (d[metadata.month] instanceof Date) {
- var sdate = module.helper.sanitiseDate(d[metadata.month]);
- if ((date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())) {
- return d;
- }
- }
- } else if (d[metadata.date] && mode === 'day') {
- if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode)) {
- return d;
- } else if (Array.isArray(d[metadata.date])) {
- if(d[metadata.date].some(function(idate) { return module.helper.dateEqual(date, idate, mode); })) {
- return d;
- }
- }
- }
- }
- }
- }
- return null;
- },
- sanitiseDate: function (date) {
- if (!date) {
- return undefined;
- }
- if (!(date instanceof Date)) {
- date = parser.date('' + date, settings);
- }
- if (!date || date === null || isNaN(date.getTime())) {
- return undefined;
- }
- return date;
- },
- dateDiff: function (date1, date2, mode) {
- mode = mode || 'day';
- var isTimeOnly = settings.type === 'time';
- var isYear = mode === 'year';
- var isYearOrMonth = isYear || mode === 'month';
- var isMinute = mode === 'minute';
- var isHourOrMinute = isMinute || mode === 'hour';
- //only care about a minute accuracy of settings.minTimeGap
- date1 = new Date(
- isTimeOnly ? 2000 : date1.getFullYear(),
- isTimeOnly ? 0 : isYear ? 0 : date1.getMonth(),
- isTimeOnly ? 1 : isYearOrMonth ? 1 : date1.getDate(),
- !isHourOrMinute ? 0 : date1.getHours(),
- !isMinute ? 0 : settings.minTimeGap * Math.floor(date1.getMinutes() / settings.minTimeGap));
- date2 = new Date(
- isTimeOnly ? 2000 : date2.getFullYear(),
- isTimeOnly ? 0 : isYear ? 0 : date2.getMonth(),
- isTimeOnly ? 1 : isYearOrMonth ? 1 : date2.getDate(),
- !isHourOrMinute ? 0 : date2.getHours(),
- !isMinute ? 0 : settings.minTimeGap * Math.floor(date2.getMinutes() / settings.minTimeGap));
- return date2.getTime() - date1.getTime();
- },
- dateEqual: function (date1, date2, mode) {
- return !!date1 && !!date2 && module.helper.dateDiff(date1, date2, mode) === 0;
- },
- isDateInRange: function (date, mode, minDate, maxDate) {
- if (!minDate && !maxDate) {
- var startDate = module.get.startDate();
- minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate;
- maxDate = settings.maxDate;
- }
- minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap));
- return !(!date ||
- (minDate && module.helper.dateDiff(date, minDate, mode) > 0) ||
- (maxDate && module.helper.dateDiff(maxDate, date, mode) > 0));
- },
- dateInRange: function (date, minDate, maxDate) {
- if (!minDate && !maxDate) {
- var startDate = module.get.startDate();
- minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate;
- maxDate = settings.maxDate;
- }
- minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap));
- var isTimeOnly = settings.type === 'time';
- return !date ? date :
- (minDate && module.helper.dateDiff(date, minDate, 'minute') > 0) ?
- (isTimeOnly ? module.helper.mergeDateTime(date, minDate) : minDate) :
- (maxDate && module.helper.dateDiff(maxDate, date, 'minute') > 0) ?
- (isTimeOnly ? module.helper.mergeDateTime(date, maxDate) : maxDate) :
- date;
- },
- mergeDateTime: function (date, time) {
- return (!date || !time) ? time :
- new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes());
- },
- isTodayButton: function(element) {
- return element.text() === settings.text.today;
- }
- },
-
- setting: function (name, value) {
- module.debug('Changing setting', name, value);
- if ($.isPlainObject(name)) {
- $.extend(true, settings, name);
- }
- else if (value !== undefined) {
- if ($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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 (Array.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.calendar.settings = {
-
- name : 'Calendar',
- namespace : 'calendar',
-
- silent: false,
- debug: false,
- verbose: false,
- performance: false,
-
- type : 'datetime', // picker type, can be 'datetime', 'date', 'time', 'month', or 'year'
- firstDayOfWeek : 0, // day for first day column (0 = Sunday)
- constantHeight : true, // add rows to shorter months to keep day calendar height consistent (6 rows)
- today : false, // show a 'today/now' button at the bottom of the calendar
- closable : true, // close the popup after selecting a date/time
- monthFirst : true, // month before day when parsing/converting date from/to text
- touchReadonly : true, // set input to readonly on touch devices
- inline : false, // create the calendar inline instead of inside a popup
- on : null, // when to show the popup (defaults to 'focus' for input, 'click' for others)
- initialDate : null, // date to display initially when no date is selected (null = now)
- startMode : false, // display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day')
- minDate : null, // minimum date/time that can be selected, dates/times before are disabled
- maxDate : null, // maximum date/time that can be selected, dates/times after are disabled
- ampm : true, // show am/pm in time mode
- disableYear : false, // disable year selection mode
- disableMonth : false, // disable month selection mode
- disableMinute : false, // disable minute selection mode
- formatInput : true, // format the input text upon input blur and module creation
- startCalendar : null, // jquery object or selector for another calendar that represents the start date of a date range
- endCalendar : null, // jquery object or selector for another calendar that represents the end date of a date range
- multiMonth : 1, // show multiple months when in 'day' mode
- minTimeGap : 5,
- showWeekNumbers : null, // show Number of Week at the very first column of a dayView
- disabledDates : [], // specific day(s) which won't be selectable and contain additional information.
- disabledDaysOfWeek : [], // day(s) which won't be selectable(s) (0 = Sunday)
- enabledDates : [], // specific day(s) which will be selectable, all other days will be disabled
- eventDates : [], // specific day(s) which will be shown in a different color and using tooltips
- centuryBreak : 60, // starting short year until 99 where it will be assumed to belong to the last century
- currentCentury : 2000, // century to be added to 2-digit years (00 to {centuryBreak}-1)
- selectAdjacentDays : false, // The calendar can show dates from adjacent month. These adjacent month dates can also be made selectable.
- // popup options ('popup', 'on', 'hoverable', and show/hide callbacks are overridden)
- popupOptions: {
- position: 'bottom left',
- lastResort: 'bottom left',
- prefer: 'opposite',
- hideOnScroll: false
- },
-
- text: {
- days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
- months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
- monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- today: 'Today',
- now: 'Now',
- am: 'AM',
- pm: 'PM',
- weekNo: 'Week'
- },
-
- formatter: {
- header: function (date, mode, settings) {
- return mode === 'year' ? settings.formatter.yearHeader(date, settings) :
- mode === 'month' ? settings.formatter.monthHeader(date, settings) :
- mode === 'day' ? settings.formatter.dayHeader(date, settings) :
- mode === 'hour' ? settings.formatter.hourHeader(date, settings) :
- settings.formatter.minuteHeader(date, settings);
- },
- yearHeader: function (date, settings) {
- var decadeYear = Math.ceil(date.getFullYear() / 10) * 10;
- return (decadeYear - 9) + ' - ' + (decadeYear + 2);
- },
- monthHeader: function (date, settings) {
- return date.getFullYear();
- },
- dayHeader: function (date, settings) {
- var month = settings.text.months[date.getMonth()];
- var year = date.getFullYear();
- return month + ' ' + year;
- },
- hourHeader: function (date, settings) {
- return settings.formatter.date(date, settings);
- },
- minuteHeader: function (date, settings) {
- return settings.formatter.date(date, settings);
- },
- dayColumnHeader: function (day, settings) {
- return settings.text.days[day];
- },
- datetime: function (date, settings) {
- if (!date) {
- return '';
- }
- var day = settings.type === 'time' ? '' : settings.formatter.date(date, settings);
- var time = settings.type.indexOf('time') < 0 ? '' : settings.formatter.time(date, settings, false);
- var separator = settings.type === 'datetime' ? ' ' : '';
- return day + separator + time;
- },
- date: function (date, settings) {
- if (!date) {
- return '';
- }
- var day = date.getDate();
- var month = settings.text.months[date.getMonth()];
- var year = date.getFullYear();
- return settings.type === 'year' ? year :
- settings.type === 'month' ? month + ' ' + year :
- (settings.monthFirst ? month + ' ' + day : day + ' ' + month) + ', ' + year;
- },
- time: function (date, settings, forCalendar) {
- if (!date) {
- return '';
- }
- var hour = date.getHours();
- var minute = date.getMinutes();
- var ampm = '';
- if (settings.ampm) {
- ampm = ' ' + (hour < 12 ? settings.text.am : settings.text.pm);
- hour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
- }
- return hour + ':' + (minute < 10 ? '0' : '') + minute + ampm;
- },
- today: function (settings) {
- return settings.type === 'date' ? settings.text.today : settings.text.now;
- },
- cell: function (cell, date, cellOptions) {
- }
- },
-
- parser: {
- date: function (text, settings) {
- if (text instanceof Date) {
- return text;
- }
- if (!text) {
- return null;
- }
- text = String(text).trim();
- if (text.length === 0) {
- return null;
- }
- if(text.match(/^[0-9]{4}[\/\-\.][0-9]{2}[\/\-\.][0-9]{2}$/)){
- text = text.replace(/[\/\-\.]/g,'/') + ' 00:00:00';
- }
- // Reverse date and month in some cases
- text = settings.monthFirst || !text.match(/^[0-9]{2}[\/\-\.]/) ? text : text.replace(/[\/\-\.]/g,'/').replace(/([0-9]+)\/([0-9]+)/,'$2/$1');
- var textDate = new Date(text);
- var numberOnly = text.match(/^[0-9]+$/) !== null;
- if(!numberOnly && !isNaN(textDate.getDate())) {
- return textDate;
- }
- text = text.toLowerCase();
-
- var i, j, k;
- var minute = -1, hour = -1, day = -1, month = -1, year = -1;
- var isAm = undefined;
-
- var isTimeOnly = settings.type === 'time';
- var isDateOnly = settings.type.indexOf('time') < 0;
-
- var words = text.split(settings.regExp.dateWords), word;
- var numbers = text.split(settings.regExp.dateNumbers), number;
-
- var parts;
- var monthString;
-
- if (!isDateOnly) {
- //am/pm
- isAm = $.inArray(settings.text.am.toLowerCase(), words) >= 0 ? true :
- $.inArray(settings.text.pm.toLowerCase(), words) >= 0 ? false : undefined;
-
- //time with ':'
- for (i = 0; i < numbers.length; i++) {
- number = numbers[i];
- if (number.indexOf(':') >= 0) {
- if (hour < 0 || minute < 0) {
- parts = number.split(':');
- for (k = 0; k < Math.min(2, parts.length); k++) {
- j = parseInt(parts[k]);
- if (isNaN(j)) {
- j = 0;
- }
- if (k === 0) {
- hour = j % 24;
- } else {
- minute = j % 60;
- }
- }
- }
- numbers.splice(i, 1);
- }
- }
- }
-
- if (!isTimeOnly) {
- //textual month
- for (i = 0; i < words.length; i++) {
- word = words[i];
- if (word.length <= 0) {
- continue;
- }
- for (j = 0; j < settings.text.months.length; j++) {
- monthString = settings.text.months[j];
- monthString = monthString.substring(0, word.length).toLowerCase();
- if (monthString === word) {
- month = j + 1;
- break;
- }
- }
- if (month >= 0) {
- break;
- }
- }
-
- //year > settings.centuryBreak
- for (i = 0; i < numbers.length; i++) {
- j = parseInt(numbers[i]);
- if (isNaN(j)) {
- continue;
- }
- if (j >= settings.centuryBreak && i === numbers.length-1) {
- if (j <= 99) {
- j += settings.currentCentury - 100;
- }
- year = j;
- numbers.splice(i, 1);
- break;
- }
- }
-
- //numeric month
- if (month < 0) {
- for (i = 0; i < numbers.length; i++) {
- k = i > 1 || settings.monthFirst ? i : i === 1 ? 0 : 1;
- j = parseInt(numbers[k]);
- if (isNaN(j)) {
- continue;
- }
- if (1 <= j && j <= 12) {
- month = j;
- numbers.splice(k, 1);
- break;
- }
- }
- }
-
- //day
- for (i = 0; i < numbers.length; i++) {
- j = parseInt(numbers[i]);
- if (isNaN(j)) {
- continue;
- }
- if (1 <= j && j <= 31) {
- day = j;
- numbers.splice(i, 1);
- break;
- }
- }
-
- //year <= settings.centuryBreak
- if (year < 0) {
- for (i = numbers.length - 1; i >= 0; i--) {
- j = parseInt(numbers[i]);
- if (isNaN(j)) {
- continue;
- }
- if (j <= 99) {
- j += settings.currentCentury;
- }
- year = j;
- numbers.splice(i, 1);
- break;
- }
- }
- }
-
- if (!isDateOnly) {
- //hour
- if (hour < 0) {
- for (i = 0; i < numbers.length; i++) {
- j = parseInt(numbers[i]);
- if (isNaN(j)) {
- continue;
- }
- if (0 <= j && j <= 23) {
- hour = j;
- numbers.splice(i, 1);
- break;
- }
- }
- }
-
- //minute
- if (minute < 0) {
- for (i = 0; i < numbers.length; i++) {
- j = parseInt(numbers[i]);
- if (isNaN(j)) {
- continue;
- }
- if (0 <= j && j <= 59) {
- minute = j;
- numbers.splice(i, 1);
- break;
- }
- }
- }
- }
-
- if (minute < 0 && hour < 0 && day < 0 && month < 0 && year < 0) {
- return null;
- }
-
- if (minute < 0) {
- minute = 0;
- }
- if (hour < 0) {
- hour = 0;
- }
- if (day < 0) {
- day = 1;
- }
- if (month < 0) {
- month = 1;
- }
- if (year < 0) {
- year = new Date().getFullYear();
- }
-
- if (isAm !== undefined) {
- if (isAm) {
- if (hour === 12) {
- hour = 0;
- }
- } else if (hour < 12) {
- hour += 12;
- }
- }
-
- var date = new Date(year, month - 1, day, hour, minute);
- if (date.getMonth() !== month - 1 || date.getFullYear() !== year) {
- //month or year don't match up, switch to last day of the month
- date = new Date(year, month, 0, hour, minute);
- }
- return isNaN(date.getTime()) ? null : date;
- }
- },
-
- // callback before date is changed, return false to cancel the change
- onBeforeChange: function (date, text, mode) {
- return true;
- },
-
- // callback when date changes
- onChange: function (date, text, mode) {
- },
-
- // callback before show animation, return false to prevent show
- onShow: function () {
- },
-
- // callback after show animation
- onVisible: function () {
- },
-
- // callback before hide animation, return false to prevent hide
- onHide: function () {
- },
-
- // callback after hide animation
- onHidden: function () {
- },
-
- // callback before item is selected, return false to prevent selection
- onSelect: function (date, mode) {
- },
-
- // is the given date disabled?
- isDisabled: function (date, mode) {
- return false;
- },
-
- selector: {
- popup: '.ui.popup',
- input: 'input',
- activator: 'input',
- append: '.inline.field,.inline.fields'
- },
-
- regExp: {
- dateWords: /[^A-Za-z\u00C0-\u024F]+/g,
- dateNumbers: /[^\d:]+/g
- },
-
- error: {
- popup: 'UI Popup, a required component is not included in this page',
- method: 'The method you called is not defined.'
- },
-
- className: {
- calendar: 'calendar',
- active: 'active',
- popup: 'ui popup',
- grid: 'ui equal width grid',
- column: 'column',
- table: 'ui celled center aligned unstackable table',
- inverted: 'inverted',
- prev: 'prev link',
- next: 'next link',
- prevIcon: 'chevron left icon',
- nextIcon: 'chevron right icon',
- link: 'link',
- cell: 'link',
- disabledCell: 'disabled',
- weekCell: 'disabled',
- adjacentCell: 'adjacent',
- activeCell: 'active',
- rangeCell: 'range',
- focusCell: 'focus',
- todayCell: 'today',
- today: 'today link',
- disabled: 'disabled'
- },
-
- metadata: {
- date: 'date',
- focusDate: 'focusDate',
- startDate: 'startDate',
- endDate: 'endDate',
- minDate: 'minDate',
- maxDate: 'maxDate',
- mode: 'mode',
- type: 'type',
- monthOffset: 'monthOffset',
- message: 'message',
- class: 'class',
- inverted: 'inverted',
- variation: 'variation',
- position: 'position',
- month: 'month',
- year: 'year'
- },
-
- eventClass: 'blue'
-};
-
-})(jQuery, window, document);
diff --git a/semantic/src/definitions/modules/calendar.less b/semantic/src/definitions/modules/calendar.less
deleted file mode 100644
index aaa7f11..0000000
--- a/semantic/src/definitions/modules/calendar.less
+++ /dev/null
@@ -1,195 +0,0 @@
-/*!
- * # Fomantic-UI - Calendar
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'calendar';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Popup
-*******************************/
-
-.ui.calendar .ui.popup {
- max-width: none;
- padding: 0;
- border: none;
- user-select: none;
-}
-
-/*******************************
- Calendar
-*******************************/
-
-.ui.calendar .calendar:focus {
- outline: 0;
-}
-
-/*******************************
- Grid
-*******************************/
-
-.ui.calendar .ui.popup .ui.grid {
- display: block;
- white-space: nowrap;
-}
-
-.ui.calendar .ui.popup .ui.grid > .column {
- width: auto;
-}
-
-/*******************************
- Table
-*******************************/
-
-.ui.calendar .ui.table.year,
-.ui.calendar .ui.table.month,
-.ui.calendar .ui.table.minute {
- min-width: 15em;
-}
-
-.ui.calendar .ui.table.day {
- min-width: 18em;
-}
-
-.ui.calendar .ui.table.day.andweek {
- min-width: 22em;
-}
-
-.ui.calendar .ui.table.hour {
- min-width: 20em;
-}
-
-.ui.calendar .ui.table tr th,
-.ui.calendar .ui.table tr td {
- padding: 0.5em;
- white-space: nowrap;
-}
-
-.ui.calendar .ui.table tr th {
- border-left: none;
-}
-
-.ui.calendar .ui.table tr th i.icon {
- margin: 0;
-}
-
-.ui.calendar .ui.table tr:first-child th {
- position: relative;
- padding-left: 0;
- padding-right: 0;
-}
-
-.ui.calendar .ui.table.day tr:first-child th {
- border: none;
-}
-
-.ui.calendar .ui.table.day tr:nth-child(2) th {
- padding-top: 0.2em;
- padding-bottom: 0.3em;
-}
-
-.ui.calendar .ui.table tr td {
- padding-left: 0.1em;
- padding-right: 0.1em;
-}
-
-.ui.calendar .ui.table tr .link {
- cursor: pointer;
-}
-
-.ui.calendar .ui.table tr .prev.link {
- width: 14.28571429%;
- position: absolute;
- left: 0;
-}
-
-.ui.calendar .ui.table tr .next.link {
- width: 14.28571429%;
- position: absolute;
- right: 0;
-}
-
-.ui.ui.calendar .ui.table tr .disabled {
- pointer-events: auto;
- cursor: default;
- color: @disabledTextColor;
-}
-
-.ui.calendar .ui.table tr .adjacent:not(.disabled) {
- color: @adjacentTextColor;
- background: @adjacentBackground;
-}
-
-/*--------------
- States
----------------*/
-
-.ui.calendar .ui.table tr td.today {
- font-weight: @todayFontWeight;
-}
-
-.ui.calendar .ui.table tr td.range {
- background: @rangeBackground;
- color: @rangeTextColor;
- box-shadow: @rangeBoxShadow;
-}
-
-.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
- box-shadow: @focusBoxShadow;
-}
-
-& when (@variationCalendarInverted) {
- .ui.inverted.calendar .ui.table.inverted tr td.range {
- background: @rangeInvertedBackground;
- color: @rangeInvertedTextColor;
- box-shadow: @rangeInvertedBoxShadow;
- }
-
- .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
- .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
- box-shadow: @focusInvertedBoxShadow;
- }
- .ui.inverted.calendar .ui.inverted.table tr .disabled {
- color: @invertedDisabledTextColor;
- }
-
- .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled) {
- color: @adjacentInvertedTextColor;
- background: @adjacentInvertedBackground;
- }
-}
-
-/*******************************
- States
-*******************************/
-
-& when (@variationCalendarDisabled) {
- /*--------------------
- Disabled
- ---------------------*/
-
- .ui.disabled.calendar {
- opacity: @disabledOpacity;
- }
-
- .ui.disabled.calendar > .input,
- .ui.disabled.calendar .ui.table tr .link {
- pointer-events: none;
- }
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/checkbox.js b/semantic/src/definitions/modules/checkbox.js
deleted file mode 100644
index c5540ba..0000000
--- a/semantic/src/definitions/modules/checkbox.js
+++ /dev/null
@@ -1,876 +0,0 @@
-/*!
- * # Fomantic-UI - Checkbox
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.checkbox = 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
- ;
-
- $allModules
- .each(function() {
- var
- settings = $.extend(true, {}, $.fn.checkbox.settings, parameters),
-
- className = settings.className,
- namespace = settings.namespace,
- selector = settings.selector,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $label = $(this).children(selector.label),
- $input = $(this).children(selector.input),
- input = $input[0],
-
- initialLoad = false,
- shortcutPressed = false,
- instance = $module.data(moduleNamespace),
-
- observer,
- element = this,
- module
- ;
-
- module = {
-
- initialize: function() {
- module.verbose('Initializing checkbox', settings);
-
- module.create.label();
- module.bind.events();
-
- module.set.tabbable();
- module.hide.input();
-
- module.observeChanges();
- module.instantiate();
- module.setup();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying module');
- module.unbind.events();
- module.show.input();
- $module.removeData(moduleNamespace);
- },
-
- fix: {
- reference: function() {
- if( $module.is(selector.input) ) {
- module.debug('Behavior called on <input> adjusting invoked element');
- $module = $module.closest(selector.checkbox);
- module.refresh();
- }
- }
- },
-
- setup: function() {
- module.set.initialLoad();
- if( module.is.indeterminate() ) {
- module.debug('Initial value is indeterminate');
- module.indeterminate();
- }
- else if( module.is.checked() ) {
- module.debug('Initial value is checked');
- module.check();
- }
- else {
- module.debug('Initial value is unchecked');
- module.uncheck();
- }
- module.remove.initialLoad();
- },
-
- refresh: function() {
- $label = $module.children(selector.label);
- $input = $module.children(selector.input);
- input = $input[0];
- },
-
- hide: {
- input: function() {
- module.verbose('Modifying <input> z-index to be unselectable');
- $input.addClass(className.hidden);
- }
- },
- show: {
- input: function() {
- module.verbose('Modifying <input> z-index to be selectable');
- $input.removeClass(className.hidden);
- }
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- observer = new MutationObserver(function(mutations) {
- module.debug('DOM tree modified, updating selector cache');
- module.refresh();
- });
- observer.observe(element, {
- childList : true,
- subtree : true
- });
- module.debug('Setting up mutation observer', observer);
- }
- },
-
- attachEvents: function(selector, event) {
- var
- $element = $(selector)
- ;
- event = $.isFunction(module[event])
- ? module[event]
- : module.toggle
- ;
- if($element.length > 0) {
- module.debug('Attaching checkbox events to element', selector, event);
- $element
- .on('click' + eventNamespace, event)
- ;
- }
- else {
- module.error(error.notFound);
- }
- },
-
- preventDefaultOnInputTarget: function() {
- if(typeof event !== 'undefined' && event !== null && $(event.target).is(selector.input)) {
- module.verbose('Preventing default check action after manual check action');
- event.preventDefault();
- }
- },
-
- event: {
- change: function(event) {
- if( !module.should.ignoreCallbacks() ) {
- settings.onChange.call(input);
- }
- },
- click: function(event) {
- var
- $target = $(event.target)
- ;
- if( $target.is(selector.input) ) {
- module.verbose('Using default check action on initialized checkbox');
- return;
- }
- if( $target.is(selector.link) ) {
- module.debug('Clicking link inside checkbox, skipping toggle');
- return;
- }
- module.toggle();
- $input.focus();
- event.preventDefault();
- },
- keydown: function(event) {
- var
- key = event.which,
- keyCode = {
- enter : 13,
- space : 32,
- escape : 27,
- left : 37,
- up : 38,
- right : 39,
- down : 40
- }
- ;
-
- var r = module.get.radios(),
- rIndex = r.index($module),
- rLen = r.length,
- checkIndex = false;
-
- if(key == keyCode.left || key == keyCode.up) {
- checkIndex = (rIndex === 0 ? rLen : rIndex) - 1;
- } else if(key == keyCode.right || key == keyCode.down) {
- checkIndex = rIndex === rLen-1 ? 0 : rIndex+1;
- }
-
- if (!module.should.ignoreCallbacks() && checkIndex !== false) {
- if(settings.beforeUnchecked.apply(input)===false) {
- module.verbose('Option not allowed to be unchecked, cancelling key navigation');
- return false;
- }
- if (settings.beforeChecked.apply($(r[checkIndex]).children(selector.input)[0])===false) {
- module.verbose('Next option should not allow check, cancelling key navigation');
- return false;
- }
- }
-
- if(key == keyCode.escape) {
- module.verbose('Escape key pressed blurring field');
- $input.blur();
- shortcutPressed = true;
- }
- else if(!event.ctrlKey && ( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey)) ) {
- module.verbose('Enter/space key pressed, toggling checkbox');
- module.toggle();
- shortcutPressed = true;
- }
- else {
- shortcutPressed = false;
- }
- },
- keyup: function(event) {
- if(shortcutPressed) {
- event.preventDefault();
- }
- }
- },
-
- check: function() {
- if( !module.should.allowCheck() ) {
- return;
- }
- module.debug('Checking checkbox', $input);
- module.set.checked();
- if( !module.should.ignoreCallbacks() ) {
- settings.onChecked.call(input);
- module.trigger.change();
- }
- module.preventDefaultOnInputTarget();
- },
-
- uncheck: function() {
- if( !module.should.allowUncheck() ) {
- return;
- }
- module.debug('Unchecking checkbox');
- module.set.unchecked();
- if( !module.should.ignoreCallbacks() ) {
- settings.onUnchecked.call(input);
- module.trigger.change();
- }
- module.preventDefaultOnInputTarget();
- },
-
- indeterminate: function() {
- if( module.should.allowIndeterminate() ) {
- module.debug('Checkbox is already indeterminate');
- return;
- }
- module.debug('Making checkbox indeterminate');
- module.set.indeterminate();
- if( !module.should.ignoreCallbacks() ) {
- settings.onIndeterminate.call(input);
- module.trigger.change();
- }
- },
-
- determinate: function() {
- if( module.should.allowDeterminate() ) {
- module.debug('Checkbox is already determinate');
- return;
- }
- module.debug('Making checkbox determinate');
- module.set.determinate();
- if( !module.should.ignoreCallbacks() ) {
- settings.onDeterminate.call(input);
- module.trigger.change();
- }
- },
-
- enable: function() {
- if( module.is.enabled() ) {
- module.debug('Checkbox is already enabled');
- return;
- }
- module.debug('Enabling checkbox');
- module.set.enabled();
- if( !module.should.ignoreCallbacks() ) {
- settings.onEnable.call(input);
- // preserve legacy callbacks
- settings.onEnabled.call(input);
- module.trigger.change();
- }
- },
-
- disable: function() {
- if( module.is.disabled() ) {
- module.debug('Checkbox is already disabled');
- return;
- }
- module.debug('Disabling checkbox');
- module.set.disabled();
- if( !module.should.ignoreCallbacks() ) {
- settings.onDisable.call(input);
- // preserve legacy callbacks
- settings.onDisabled.call(input);
- module.trigger.change();
- }
- },
-
- get: {
- radios: function() {
- var
- name = module.get.name()
- ;
- return $('input[name="' + name + '"]').closest(selector.checkbox);
- },
- otherRadios: function() {
- return module.get.radios().not($module);
- },
- name: function() {
- return $input.attr('name');
- }
- },
-
- is: {
- initialLoad: function() {
- return initialLoad;
- },
- radio: function() {
- return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');
- },
- indeterminate: function() {
- return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');
- },
- checked: function() {
- return $input.prop('checked') !== undefined && $input.prop('checked');
- },
- disabled: function() {
- return $input.prop('disabled') !== undefined && $input.prop('disabled');
- },
- enabled: function() {
- return !module.is.disabled();
- },
- determinate: function() {
- return !module.is.indeterminate();
- },
- unchecked: function() {
- return !module.is.checked();
- }
- },
-
- should: {
- allowCheck: function() {
- if(module.is.determinate() && module.is.checked() && !module.is.initialLoad() ) {
- module.debug('Should not allow check, checkbox is already checked');
- return false;
- }
- if(!module.should.ignoreCallbacks() && settings.beforeChecked.apply(input) === false) {
- module.debug('Should not allow check, beforeChecked cancelled');
- return false;
- }
- return true;
- },
- allowUncheck: function() {
- if(module.is.determinate() && module.is.unchecked() && !module.is.initialLoad() ) {
- module.debug('Should not allow uncheck, checkbox is already unchecked');
- return false;
- }
- if(!module.should.ignoreCallbacks() && settings.beforeUnchecked.apply(input) === false) {
- module.debug('Should not allow uncheck, beforeUnchecked cancelled');
- return false;
- }
- return true;
- },
- allowIndeterminate: function() {
- if(module.is.indeterminate() && !module.is.initialLoad() ) {
- module.debug('Should not allow indeterminate, checkbox is already indeterminate');
- return false;
- }
- if(!module.should.ignoreCallbacks() && settings.beforeIndeterminate.apply(input) === false) {
- module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
- return false;
- }
- return true;
- },
- allowDeterminate: function() {
- if(module.is.determinate() && !module.is.initialLoad() ) {
- module.debug('Should not allow determinate, checkbox is already determinate');
- return false;
- }
- if(!module.should.ignoreCallbacks() && settings.beforeDeterminate.apply(input) === false) {
- module.debug('Should not allow determinate, beforeDeterminate cancelled');
- return false;
- }
- return true;
- },
- ignoreCallbacks: function() {
- return (initialLoad && !settings.fireOnInit);
- }
- },
-
- can: {
- change: function() {
- return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );
- },
- uncheck: function() {
- return (typeof settings.uncheckable === 'boolean')
- ? settings.uncheckable
- : !module.is.radio()
- ;
- }
- },
-
- set: {
- initialLoad: function() {
- initialLoad = true;
- },
- checked: function() {
- module.verbose('Setting class to checked');
- $module
- .removeClass(className.indeterminate)
- .addClass(className.checked)
- ;
- if( module.is.radio() ) {
- module.uncheckOthers();
- }
- if(!module.is.indeterminate() && module.is.checked()) {
- module.debug('Input is already checked, skipping input property change');
- return;
- }
- module.verbose('Setting state to checked', input);
- $input
- .prop('indeterminate', false)
- .prop('checked', true)
- ;
- },
- unchecked: function() {
- module.verbose('Removing checked class');
- $module
- .removeClass(className.indeterminate)
- .removeClass(className.checked)
- ;
- if(!module.is.indeterminate() && module.is.unchecked() ) {
- module.debug('Input is already unchecked');
- return;
- }
- module.debug('Setting state to unchecked');
- $input
- .prop('indeterminate', false)
- .prop('checked', false)
- ;
- },
- indeterminate: function() {
- module.verbose('Setting class to indeterminate');
- $module
- .addClass(className.indeterminate)
- ;
- if( module.is.indeterminate() ) {
- module.debug('Input is already indeterminate, skipping input property change');
- return;
- }
- module.debug('Setting state to indeterminate');
- $input
- .prop('indeterminate', true)
- ;
- },
- determinate: function() {
- module.verbose('Removing indeterminate class');
- $module
- .removeClass(className.indeterminate)
- ;
- if( module.is.determinate() ) {
- module.debug('Input is already determinate, skipping input property change');
- return;
- }
- module.debug('Setting state to determinate');
- $input
- .prop('indeterminate', false)
- ;
- },
- disabled: function() {
- module.verbose('Setting class to disabled');
- $module
- .addClass(className.disabled)
- ;
- if( module.is.disabled() ) {
- module.debug('Input is already disabled, skipping input property change');
- return;
- }
- module.debug('Setting state to disabled');
- $input
- .prop('disabled', 'disabled')
- ;
- },
- enabled: function() {
- module.verbose('Removing disabled class');
- $module.removeClass(className.disabled);
- if( module.is.enabled() ) {
- module.debug('Input is already enabled, skipping input property change');
- return;
- }
- module.debug('Setting state to enabled');
- $input
- .prop('disabled', false)
- ;
- },
- tabbable: function() {
- module.verbose('Adding tabindex to checkbox');
- if( $input.attr('tabindex') === undefined) {
- $input.attr('tabindex', 0);
- }
- }
- },
-
- remove: {
- initialLoad: function() {
- initialLoad = false;
- }
- },
-
- trigger: {
- change: function() {
- var
- inputElement = $input[0]
- ;
- if(inputElement) {
- var events = document.createEvent('HTMLEvents');
- module.verbose('Triggering native change event');
- events.initEvent('change', true, false);
- inputElement.dispatchEvent(events);
- }
- }
- },
-
-
- create: {
- label: function() {
- if($input.prevAll(selector.label).length > 0) {
- $input.prev(selector.label).detach().insertAfter($input);
- module.debug('Moving existing label', $label);
- }
- else if( !module.has.label() ) {
- $label = $('<label>').insertAfter($input);
- module.debug('Creating label', $label);
- }
- }
- },
-
- has: {
- label: function() {
- return ($label.length > 0);
- }
- },
-
- bind: {
- events: function() {
- module.verbose('Attaching checkbox events');
- $module
- .on('click' + eventNamespace, module.event.click)
- .on('change' + eventNamespace, module.event.change)
- .on('keydown' + eventNamespace, selector.input, module.event.keydown)
- .on('keyup' + eventNamespace, selector.input, module.event.keyup)
- ;
- }
- },
-
- unbind: {
- events: function() {
- module.debug('Removing events');
- $module
- .off(eventNamespace)
- ;
- }
- },
-
- uncheckOthers: function() {
- var
- $radios = module.get.otherRadios()
- ;
- module.debug('Unchecking other radios', $radios);
- $radios.removeClass(className.checked);
- },
-
- toggle: function() {
- if( !module.can.change() ) {
- if(!module.is.radio()) {
- module.debug('Checkbox is read-only or disabled, ignoring toggle');
- }
- return;
- }
- if( module.is.indeterminate() || module.is.unchecked() ) {
- module.debug('Currently unchecked');
- module.check();
- }
- else if( module.is.checked() && module.can.uncheck() ) {
- module.debug('Currently checked');
- module.uncheck();
- }
- },
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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.checkbox.settings = {
-
- name : 'Checkbox',
- namespace : 'checkbox',
-
- silent : false,
- debug : false,
- verbose : true,
- performance : true,
-
- // delegated event context
- uncheckable : 'auto',
- fireOnInit : false,
- enableEnterKey : true,
-
- onChange : function(){},
-
- beforeChecked : function(){},
- beforeUnchecked : function(){},
- beforeDeterminate : function(){},
- beforeIndeterminate : function(){},
-
- onChecked : function(){},
- onUnchecked : function(){},
-
- onDeterminate : function() {},
- onIndeterminate : function() {},
-
- onEnable : function(){},
- onDisable : function(){},
-
- // preserve misspelled callbacks (will be removed in 3.0)
- onEnabled : function(){},
- onDisabled : function(){},
-
- className : {
- checked : 'checked',
- indeterminate : 'indeterminate',
- disabled : 'disabled',
- hidden : 'hidden',
- radio : 'radio',
- readOnly : 'read-only'
- },
-
- error : {
- method : 'The method you called is not defined'
- },
-
- selector : {
- checkbox : '.ui.checkbox',
- label : 'label, .box',
- input : 'input[type="checkbox"], input[type="radio"]',
- link : 'a[href]'
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/checkbox.less b/semantic/src/definitions/modules/checkbox.less
deleted file mode 100644
index 32974de..0000000
--- a/semantic/src/definitions/modules/checkbox.less
+++ /dev/null
@@ -1,814 +0,0 @@
-/*!
- * # Fomantic-UI - Checkbox
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'checkbox';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Checkbox
-*******************************/
-
-
-/*--------------
- Content
----------------*/
-
-.ui.checkbox {
- position: relative;
- display: inline-block;
- backface-visibility: hidden;
- outline: none;
- vertical-align: baseline;
- font-style: normal;
-
- min-height: @checkboxSize;
- font-size: @relativeMedium;
- line-height: @checkboxLineHeight;
- min-width: @checkboxSize;
-}
-
-/* HTML Checkbox */
-.ui.checkbox input[type="checkbox"],
-.ui.checkbox input[type="radio"] {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0 !important;
- outline: none;
- z-index: 3;
- width: @checkboxSize;
- height: @checkboxSize;
-}
-
-
-& when (@variationCheckboxBox) {
- /*--------------
- Box
- ---------------*/
-
- /* .box selector is deprecated and will be removed in v3 */
- .ui.checkbox .box {
- &:extend(.ui.checkbox label all);
- }
- .ui.checkbox + .box {
- &:extend(.ui.checkbox + label all);
- }
- .ui.checkbox input:focus ~ .box {
- &:extend(.ui.checkbox input:focus ~ label all);
- }
- .ui.checkbox input:checked ~ .box {
- &:extend(.ui.checkbox input:checked ~ label all);
- }
- & when (@variationCheckboxIndeterminate) {
- .ui.checkbox input:not([type=radio]):indeterminate ~ .box {
- &:extend(.ui.checkbox input:not([type=radio]):indeterminate ~ label all);
- }
- .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box {
- &:extend(.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label all);
- }
- }
- .ui.checkbox input:checked:focus ~ .box {
- &:extend(.ui.checkbox input:checked:focus ~ label all);
- }
- & when (@variationCheckboxDisabled) {
- .ui.disabled.checkbox .box {
- &:extend(.ui.disabled.checkbox label all);
- }
-
- .ui.checkbox input[disabled] ~ .box {
- &:extend(.ui.checkbox input[disabled] ~ label all);
- }
- }
- & when (@variationCheckboxRadio) {
- .ui.radio.checkbox .box {
- &:extend(.ui.radio.checkbox label all);
- }
- .ui.radio.checkbox input:focus ~ .box {
- &:extend(.ui.radio.checkbox input:focus ~ label all);
- }
- .ui.radio.checkbox input:indeterminate ~ .box {
- &:extend(.ui.radio.checkbox input:indeterminate ~ label all);
- }
- .ui.radio.checkbox input:checked ~ .box {
- &:extend(.ui.radio.checkbox input:checked ~ label all);
- }
- .ui.radio.checkbox input:focus:checked ~ .box {
- &:extend(.ui.radio.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxSlider) {
- .ui.slider.checkbox .box {
- &:extend(.ui.slider.checkbox label all);
- }
- .ui.slider.checkbox input:focus ~ .box {
- &:extend(.ui.slider.checkbox input:focus ~ label all);
- }
- .ui.slider.checkbox input:checked ~ .box {
- &:extend(.ui.slider.checkbox input:checked ~ label all);
- }
- .ui.slider.checkbox input:focus:checked ~ .box {
- &:extend(.ui.slider.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxToggle) {
- .ui.toggle.checkbox .box {
- &:extend(.ui.toggle.checkbox label all);
- }
- .ui.toggle.checkbox input ~ .box {
- &:extend(.ui.toggle.checkbox input ~ label all);
- }
- .ui.toggle.checkbox input:focus ~ .box {
- &:extend(.ui.toggle.checkbox input:focus ~ label all);
- }
- .ui.toggle.checkbox input:checked ~ .box {
- &:extend(.ui.toggle.checkbox input:checked ~ label all);
- }
- .ui.toggle.checkbox input:focus:checked ~ .box {
- &:extend(.ui.toggle.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxFitted) {
- .ui.fitted.checkbox .box {
- &:extend(.ui.fitted.checkbox label all);
- }
- }
- & when (@variationCheckboxInverted) {
- .ui.inverted.checkbox .box {
- &:extend(.ui.inverted.checkbox label all);
- }
- & when (@variationCheckboxSlider) {
- .ui.inverted.slider.checkbox .box {
- &:extend(.ui.inverted.slider.checkbox label all);
- }
- .ui.inverted.slider.checkbox input:checked ~ .box {
- &:extend(.ui.inverted.slider.checkbox input:checked ~ label all);
- }
- .ui.inverted.slider.checkbox input:focus:checked ~ .box {
- &:extend(.ui.inverted.slider.checkbox input:focus:checked ~ label all);
- }
- }
- & when (@variationCheckboxToggle) {
- .ui.inverted.toggle.checkbox .box {
- &:extend(.ui.inverted.toggle.checkbox label all);
- }
- .ui.inverted.toggle.checkbox input:checked ~ .box {
- &:extend(.ui.inverted.toggle.checkbox input:checked ~ label all);
- }
- .ui.inverted.toggle.checkbox input:focus:checked ~ .box {
- &:extend(.ui.inverted.toggle.checkbox input:focus:checked ~ label all);
- }
- }
- }
-}
-
-.ui.checkbox label {
- cursor: auto;
- position: relative;
- display: block;
- padding-left: @labelDistance;
- outline: none;
- font-size: @labelFontSize;
-}
-
-.ui.checkbox label:before {
- position: absolute;
- top: 0;
- left: 0;
-
- width: @checkboxSize;
- height: @checkboxSize;
- content: '';
-
- background: @checkboxBackground;
- border-radius: @checkboxBorderRadius;
-
- transition: @checkboxTransition;
- border: @checkboxBorder;
-}
-
-/*--------------
- Checkmark
----------------*/
-
-.ui.checkbox label:after {
- position: absolute;
- font-size: @checkboxCheckFontSize;
- top: @checkboxCheckTop;
- left: @checkboxCheckLeft;
- width: @checkboxCheckSize;
- height: @checkboxCheckSize;
- text-align: center;
-
- opacity: 0;
- color: @checkboxColor;
- transition: @checkboxTransition;
-}
-
-/*--------------
- Label
----------------*/
-
-/* Inside */
-.ui.checkbox label,
-.ui.checkbox + label {
- color: @labelColor;
- transition: @labelTransition;
-}
-
-/* Outside */
-.ui.checkbox + label {
- vertical-align: middle;
-}
-
-
-/*******************************
- States
-*******************************/
-
-
-/*--------------
- Hover
----------------*/
-
-.ui.checkbox label:hover::before {
- background: @checkboxHoverBackground;
- border-color: @checkboxHoverBorderColor;
-}
-.ui.checkbox label:hover,
-.ui.checkbox + label:hover {
- color: @labelHoverColor;
-}
-
-/*--------------
- Down
----------------*/
-
-.ui.checkbox label:active::before {
- background: @checkboxPressedBackground;
- border-color: @checkboxPressedBorderColor;
-}
-.ui.checkbox label:active::after {
- color: @checkboxPressedColor;
-}
-.ui.checkbox input:active ~ label {
- color: @labelPressedColor;
-}
-
-/*--------------
- Focus
----------------*/
-
-.ui.checkbox input:focus ~ label:before {
- background: @checkboxFocusBackground;
- border-color: @checkboxFocusBorderColor;
-}
-.ui.checkbox input:focus ~ label:after {
- color: @checkboxFocusCheckColor;
-}
-.ui.checkbox input:focus ~ label {
- color: @labelFocusColor;
-}
-
-/*--------------
- Active
----------------*/
-
-.ui.checkbox input:checked ~ label:before {
- background: @checkboxActiveBackground;
- border-color: @checkboxActiveBorderColor;
-}
-.ui.checkbox input:checked ~ label:after {
- opacity: @checkboxActiveCheckOpacity;
- color: @checkboxActiveCheckColor;
-}
-
-& when (@variationCheckboxIndeterminate){
- /*--------------
- Indeterminate
- ---------------*/
-
- .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
- background: @checkboxIndeterminateBackground;
- border-color: @checkboxIndeterminateBorderColor;
- }
- .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
- opacity: @checkboxIndeterminateCheckOpacity;
- color: @checkboxIndeterminateCheckColor;
- }
- .ui.indeterminate.toggle.checkbox {
- & input:not([type=radio]):indeterminate ~ label:before {
- background: @toggleCenterLaneBackground;
- }
- & input:not([type=radio]) ~ label:after {
- left: @toggleCenterOffset;
- }
- }
-}
-
-/*--------------
- Active Focus
----------------*/
-
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
-.ui.checkbox input:checked:focus ~ label:before {
- background: @checkboxActiveFocusBackground;
- border-color: @checkboxActiveFocusBorderColor;
-}
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
-.ui.checkbox input:checked:focus ~ label:after {
- color: @checkboxActiveFocusCheckColor;
-}
-
-
-/*--------------
- Read-Only
----------------*/
-
-.ui.read-only.checkbox,
-.ui.read-only.checkbox label {
- cursor: default;
-}
-
-& when (@variationCheckboxDisabled) {
- /*--------------
- Disabled
- ---------------*/
-
- .ui.disabled.checkbox label,
- .ui.checkbox input[disabled] ~ label {
- cursor: default !important;
- opacity: @disabledCheckboxOpacity;
- color: @disabledCheckboxLabelColor;
- pointer-events: none;
- }
-}
-
-/*--------------
- Hidden
----------------*/
-
-/* Initialized checkbox moves input below element
- to prevent manually triggering */
-.ui.checkbox input.hidden {
- z-index: -1;
-}
-
-/* Selectable Label */
-.ui.checkbox input.hidden + label {
- cursor: pointer;
- user-select: none;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationCheckboxRadio) {
- /*--------------
- Radio
- ---------------*/
-
- .ui.radio.checkbox {
- min-height: @radioSize;
- }
-
- .ui.radio.checkbox label {
- padding-left: @radioLabelDistance;
- }
-
- /* Box */
- .ui.radio.checkbox label:before {
- content: '';
- transform: none;
-
- width: @radioSize;
- height: @radioSize;
- border-radius: @circularRadius;
- top: @radioTop;
- left: @radioLeft;
- }
-
- /* Bullet */
- .ui.radio.checkbox label:after {
- border: none;
- content: '' !important;
- line-height: @radioSize;
- top: @bulletTop;
- left: @bulletLeft;
- width: @radioSize;
- height: @radioSize;
- border-radius: @bulletRadius;
- transform: scale(@bulletScale);
- background-color: @bulletColor;
- }
-
- /* Focus */
- .ui.radio.checkbox input:focus ~ label:before {
- background-color: @radioFocusBackground;
- }
- .ui.radio.checkbox input:focus ~ label:after {
- background-color: @radioFocusBulletColor;
- }
-
- /* Indeterminate */
- .ui.radio.checkbox input:indeterminate ~ label:after {
- opacity: 0;
- }
-
- /* Active */
- .ui.radio.checkbox input:checked ~ label:before {
- background-color: @radioActiveBackground;
- }
- .ui.radio.checkbox input:checked ~ label:after {
- background-color: @radioActiveBulletColor;
- }
-
- /* Active Focus */
- .ui.radio.checkbox input:focus:checked ~ label:before {
- background-color: @radioActiveFocusBackground;
- }
- .ui.radio.checkbox input:focus:checked ~ label:after {
- background-color: @radioActiveFocusBulletColor;
- }
-}
-
-& when (@variationCheckboxSlider) {
- /*--------------
- Slider
- ---------------*/
-
- .ui.slider.checkbox {
- min-height: @sliderHeight;
- }
-
- /* Input */
- .ui.slider.checkbox input {
- width: @sliderWidth;
- height: @sliderHeight;
- }
-
- /* Label */
- .ui.slider.checkbox label {
- padding-left: @sliderLabelDistance;
- line-height: @sliderLabelLineHeight;
- color: @sliderOffLabelColor;
- }
-
- /* Line */
- .ui.slider.checkbox label:before {
- display: block;
- position: absolute;
- content: '';
- transform: none;
- border: none !important;
- left: 0;
- z-index: 1;
-
- top: @sliderLineVerticalOffset;
-
- background-color: @sliderLineColor;
- width: @sliderLineWidth;
- height: @sliderLineHeight;
-
- border-radius: @sliderLineRadius;
- transition: @sliderLineTransition;
-
- }
-
- /* Handle */
- .ui.slider.checkbox label:after {
- background: @handleBackground;
- position: absolute;
- content: '' !important;
- opacity: 1;
- z-index: 2;
-
- border: none;
- box-shadow: @handleBoxShadow;
- width: @sliderHandleSize;
- height: @sliderHandleSize;
- top: @sliderHandleOffset;
- left: 0;
- transform: none;
-
- border-radius: @circularRadius;
- transition: @sliderHandleTransition;
- }
-
- /* Focus */
- .ui.slider.checkbox input:focus ~ label:before {
- background-color: @toggleFocusColor;
- border: none;
- }
-
- /* Hover */
- .ui.slider.checkbox label:hover {
- color: @sliderHoverLabelColor;
- }
- .ui.slider.checkbox label:hover::before {
- background: @sliderHoverLaneBackground;
- }
-
- /* Active */
- .ui.slider.checkbox input:checked ~ label {
- color: @sliderOnLabelColor !important;
- }
- .ui.slider.checkbox input:checked ~ label:before {
- background-color: @sliderOnLineColor !important;
- }
- .ui.slider.checkbox input:checked ~ label:after {
- left: @sliderTravelDistance;
- }
-
- /* Active Focus */
- .ui.slider.checkbox input:focus:checked ~ label {
- color: @sliderOnFocusLabelColor !important;
- }
- .ui.slider.checkbox input:focus:checked ~ label:before {
- background-color: @sliderOnFocusLineColor !important;
- }
-}
-
-& when (@variationCheckboxToggle) {
- /*--------------
- Toggle
- ---------------*/
-
- .ui.toggle.checkbox {
- min-height: @toggleHeight;
- }
-
- /* Input */
- .ui.toggle.checkbox input {
- width: @toggleWidth;
- height: @toggleHeight;
- }
-
- /* Label */
- .ui.toggle.checkbox label {
- min-height: @toggleHandleSize;
- padding-left: @toggleLabelDistance;
- color: @toggleOffLabelColor;
- }
- .ui.toggle.checkbox label {
- padding-top: @toggleLabelOffset;
- }
-
- /* Switch */
- .ui.toggle.checkbox label:before {
- display: block;
- position: absolute;
- content: '';
- z-index: 1;
- transform: none;
- border: none;
-
- top: @toggleLaneVerticalOffset;
-
- background: @toggleLaneBackground;
- box-shadow: @toggleLaneBoxShadow;
- width: @toggleLaneWidth;
- height: @toggleLaneHeight;
- border-radius: @toggleHandleRadius;
- }
-
- /* Handle */
- .ui.toggle.checkbox label:after {
- background: @handleBackground;
- position: absolute;
- content: '' !important;
- opacity: 1;
- z-index: 2;
-
- border: none;
- box-shadow: @handleBoxShadow;
- width: @toggleHandleSize;
- height: @toggleHandleSize;
- top: @toggleHandleOffset;
- left: 0;
-
- border-radius: @circularRadius;
- transition: @toggleHandleTransition;
- }
-
- .ui.toggle.checkbox input ~ label:after {
- left: @toggleOffOffset;
- box-shadow: @toggleOffHandleBoxShadow;
- }
-
- /* Focus */
- .ui.toggle.checkbox input:focus ~ label:before {
- background-color: @toggleFocusColor;
- border: none;
- }
-
- /* Hover */
- .ui.toggle.checkbox label:hover::before {
- background-color: @toggleHoverColor;
- border: none;
- }
-
- /* Active */
- .ui.toggle.checkbox input:checked ~ label {
- color: @toggleOnLabelColor !important;
- }
- .ui.toggle.checkbox input:checked ~ label:before {
- background-color: @toggleOnLaneColor !important;
- }
- .ui.toggle.checkbox input:checked ~ label:after {
- left: @toggleOnOffset;
- box-shadow: @toggleOnHandleBoxShadow;
- }
-
-
- /* Active Focus */
- .ui.toggle.checkbox input:focus:checked ~ label {
- color: @toggleOnFocusLabelColor !important;
- }
- .ui.toggle.checkbox input:focus:checked ~ label:before {
- background-color: @toggleOnFocusLaneColor !important;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-& when (@variationCheckboxFitted) {
- /*--------------
- Fitted
- ---------------*/
-
- .ui.fitted.checkbox label {
- padding-left: 0 !important;
- }
-
- .ui.fitted.toggle.checkbox {
- width: @toggleWidth;
- }
-
- .ui.fitted.slider.checkbox {
- width: @sliderWidth;
- }
-}
-
-& when (@variationCheckboxInverted) {
- /*--------------
- Inverted
- ---------------*/
- .ui.inverted.checkbox label,
- .ui.inverted.checkbox + label {
- color: @invertedTextColor !important;
- }
-
- /* Hover */
- .ui.inverted.checkbox label:hover {
- color: @invertedHoveredTextColor !important;
- }
- .ui.inverted.checkbox label:hover::before {
- border-color: @strongSelectedBorderColor;
- }
- & when (@variationCheckboxSlider) {
- /*Slider Label */
- .ui.inverted.slider.checkbox label {
- color: @invertedUnselectedTextColor;
- }
-
- /* Slider Line */
- .ui.inverted.slider.checkbox label:before {
- background-color: @invertedUnselectedTextColor !important;
- }
-
- /* Slider Hover */
- .ui.inverted.slider.checkbox label:hover::before {
- background: @invertedLightTextColor !important;
- }
-
- /* Slider Active */
- .ui.inverted.slider.checkbox input:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.slider.checkbox input:checked ~ label:before {
- background-color: @selectedWhiteBorderColor !important;
- }
-
- /* Slider Active Focus */
- .ui.inverted.slider.checkbox input:focus:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.slider.checkbox input:focus:checked ~ label:before {
- background-color: @selectedWhiteBorderColor !important;
- }
- }
- & when (@variationCheckboxToggle) {
- /* Toggle Switch */
- .ui.inverted.toggle.checkbox label:before {
- background-color: @invertedTextColor !important;
- }
-
- /* Toggle Hover */
- .ui.inverted.toggle.checkbox label:hover::before {
- background: @invertedHoveredTextColor !important;
- }
-
- /* Toggle Active */
- .ui.inverted.toggle.checkbox input:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.toggle.checkbox input:checked ~ label:before {
- background-color: @toggleOnLaneColor !important;
- }
-
- /* Toggle Active Focus */
- .ui.inverted.toggle.checkbox input:focus:checked ~ label {
- color: @invertedSelectedTextColor !important;
- }
- .ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
- background-color: @toggleOnFocusLaneColor !important;
- }
- }
-}
-
-/*--------------------
- Size
----------------------*/
-
-each(@variationCheckboxSizes, {
- @raw: @{value}Raw;
- @size: @{value}CheckboxSize;
- @circleScale: @{value}CheckboxCircleScale;
- @circleLeft: @{value}CheckboxCircleLeft;
-
- .ui.@{value}.checkbox {
- font-size: @@size;
- }
-
- & when (@@raw > 1) {
- .ui.@{value}.form .checkbox,
- .ui.@{value}.checkbox {
- &:not(.slider):not(.toggle):not(.radio) {
- &
- label:after,
- label:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- }
- &.radio when (@variationCheckboxRadio) {
- &
- label:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- &
- label:after {
- transform:scale(@@circleScale);
- transform-origin:left;
- left: @@circleLeft;
- }
- }
- }
- }
- & when (@@raw > 1) and (@variationCheckboxBox) {
- .ui.@{value}.form .checkbox,
- .ui.@{value}.checkbox {
- &:not(.slider):not(.toggle):not(.radio) {
- &
- .box:after,
- .box:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- }
- &.radio when (@variationCheckboxRadio) {
- &
- .box:before {
- transform: scale(@@raw);
- transform-origin:left;
- }
- &
- .box:after {
- transform:scale(@@circleScale);
- transform-origin:left;
- left: @@circleLeft;
- }
- }
- }
- }
-})
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/dimmer.js b/semantic/src/definitions/modules/dimmer.js
deleted file mode 100644
index 9429a9e..0000000
--- a/semantic/src/definitions/modules/dimmer.js
+++ /dev/null
@@ -1,753 +0,0 @@
-/*!
- * # Fomantic-UI - Dimmer
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.dimmer = function(parameters) {
- var
- $allModules = $(this),
-
- 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.dimmer.settings, parameters)
- : $.extend({}, $.fn.dimmer.settings),
-
- selector = settings.selector,
- namespace = settings.namespace,
- className = settings.className,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
- moduleSelector = $allModules.selector || '',
-
- clickEvent = ('ontouchstart' in document.documentElement)
- ? 'touchstart'
- : 'click',
-
- $module = $(this),
- $dimmer,
- $dimmable,
-
- element = this,
- instance = $module.data(moduleNamespace),
- module
- ;
-
- module = {
-
- preinitialize: function() {
- if( module.is.dimmer() ) {
-
- $dimmable = $module.parent();
- $dimmer = $module;
- }
- else {
- $dimmable = $module;
- if( module.has.dimmer() ) {
- if(settings.dimmerName) {
- $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName);
- }
- else {
- $dimmer = $dimmable.find(selector.dimmer);
- }
- }
- else {
- $dimmer = module.create();
- }
- }
- },
-
- initialize: function() {
- module.debug('Initializing dimmer', settings);
-
- module.bind.events();
- module.set.dimmable();
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module', $dimmer);
- module.unbind.events();
- module.remove.variation();
- $dimmable
- .off(eventNamespace)
- ;
- },
-
- bind: {
- events: function() {
- if(settings.on == 'hover') {
- $dimmable
- .on('mouseenter' + eventNamespace, module.show)
- .on('mouseleave' + eventNamespace, module.hide)
- ;
- }
- else if(settings.on == 'click') {
- $dimmable
- .on(clickEvent + eventNamespace, module.toggle)
- ;
- }
- if( module.is.page() ) {
- module.debug('Setting as a page dimmer', $dimmable);
- module.set.pageDimmer();
- }
-
- if( module.is.closable() ) {
- module.verbose('Adding dimmer close event', $dimmer);
- $dimmable
- .on(clickEvent + eventNamespace, selector.dimmer, module.event.click)
- ;
- }
- }
- },
-
- unbind: {
- events: function() {
- $module
- .removeData(moduleNamespace)
- ;
- $dimmable
- .off(eventNamespace)
- ;
- }
- },
-
- event: {
- click: function(event) {
- module.verbose('Determining if event occured on dimmer', event);
- if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
- module.hide();
- event.stopImmediatePropagation();
- }
- }
- },
-
- addContent: function(element) {
- var
- $content = $(element)
- ;
- module.debug('Add content to dimmer', $content);
- if($content.parent()[0] !== $dimmer[0]) {
- $content.detach().appendTo($dimmer);
- }
- },
-
- create: function() {
- var
- $element = $( settings.template.dimmer(settings) )
- ;
- if(settings.dimmerName) {
- module.debug('Creating named dimmer', settings.dimmerName);
- $element.addClass(settings.dimmerName);
- }
- $element
- .appendTo($dimmable)
- ;
- return $element;
- },
-
- show: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- module.debug('Showing dimmer', $dimmer, settings);
- module.set.variation();
- if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
- module.animate.show(callback);
- settings.onShow.call(element);
- settings.onChange.call(element);
- }
- else {
- module.debug('Dimmer is already shown or disabled');
- }
- },
-
- hide: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( module.is.dimmed() || module.is.animating() ) {
- module.debug('Hiding dimmer', $dimmer);
- module.animate.hide(callback);
- settings.onHide.call(element);
- settings.onChange.call(element);
- }
- else {
- module.debug('Dimmer is not visible');
- }
- },
-
- toggle: function() {
- module.verbose('Toggling dimmer visibility', $dimmer);
- if( !module.is.dimmed() ) {
- module.show();
- }
- else {
- if ( module.is.closable() ) {
- module.hide();
- }
- }
- },
-
- animate: {
- show: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
- if(settings.useFlex) {
- module.debug('Using flex dimmer');
- module.remove.legacy();
- }
- else {
- module.debug('Using legacy non-flex dimmer');
- module.set.legacy();
- }
- if(settings.opacity !== 'auto') {
- module.set.opacity();
- }
- $dimmer
- .transition({
- displayType : settings.useFlex
- ? 'flex'
- : 'block',
- animation : settings.transition + ' in',
- queue : false,
- duration : module.get.duration(),
- useFailSafe : true,
- onStart : function() {
- module.set.dimmed();
- },
- onComplete : function() {
- module.set.active();
- callback();
- }
- })
- ;
- }
- else {
- module.verbose('Showing dimmer animation with javascript');
- module.set.dimmed();
- if(settings.opacity == 'auto') {
- settings.opacity = 0.8;
- }
- $dimmer
- .stop()
- .css({
- opacity : 0,
- width : '100%',
- height : '100%'
- })
- .fadeTo(module.get.duration(), settings.opacity, function() {
- $dimmer.removeAttr('style');
- module.set.active();
- callback();
- })
- ;
- }
- },
- hide: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
- module.verbose('Hiding dimmer with css');
- $dimmer
- .transition({
- displayType : settings.useFlex
- ? 'flex'
- : 'block',
- animation : settings.transition + ' out',
- queue : false,
- duration : module.get.duration(),
- useFailSafe : true,
- onComplete : function() {
- module.remove.dimmed();
- module.remove.variation();
- module.remove.active();
- callback();
- }
- })
- ;
- }
- else {
- module.verbose('Hiding dimmer with javascript');
- $dimmer
- .stop()
- .fadeOut(module.get.duration(), function() {
- module.remove.dimmed();
- module.remove.active();
- $dimmer.removeAttr('style');
- callback();
- })
- ;
- }
- }
- },
-
- get: {
- dimmer: function() {
- return $dimmer;
- },
- duration: function() {
- if(typeof settings.duration == 'object') {
- if( module.is.active() ) {
- return settings.duration.hide;
- }
- else {
- return settings.duration.show;
- }
- }
- return settings.duration;
- }
- },
-
- has: {
- dimmer: function() {
- if(settings.dimmerName) {
- return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
- }
- else {
- return ( $module.find(selector.dimmer).length > 0 );
- }
- }
- },
-
- is: {
- active: function() {
- return $dimmer.hasClass(className.active);
- },
- animating: function() {
- return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
- },
- closable: function() {
- if(settings.closable == 'auto') {
- if(settings.on == 'hover') {
- return false;
- }
- return true;
- }
- return settings.closable;
- },
- dimmer: function() {
- return $module.hasClass(className.dimmer);
- },
- dimmable: function() {
- return $module.hasClass(className.dimmable);
- },
- dimmed: function() {
- return $dimmable.hasClass(className.dimmed);
- },
- disabled: function() {
- return $dimmable.hasClass(className.disabled);
- },
- enabled: function() {
- return !module.is.disabled();
- },
- page: function () {
- return $dimmable.is('body');
- },
- pageDimmer: function() {
- return $dimmer.hasClass(className.pageDimmer);
- }
- },
-
- can: {
- show: function() {
- return !$dimmer.hasClass(className.disabled);
- }
- },
-
- set: {
- opacity: function(opacity) {
- var
- color = $dimmer.css('background-color'),
- colorArray = color.split(','),
- isRGB = (colorArray && colorArray.length >= 3)
- ;
- opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
- if(isRGB) {
- colorArray[2] = colorArray[2].replace(')','');
- colorArray[3] = opacity + ')';
- color = colorArray.join(',');
- }
- else {
- color = 'rgba(0, 0, 0, ' + opacity + ')';
- }
- module.debug('Setting opacity to', opacity);
- $dimmer.css('background-color', color);
- },
- legacy: function() {
- $dimmer.addClass(className.legacy);
- },
- active: function() {
- $dimmer.addClass(className.active);
- },
- dimmable: function() {
- $dimmable.addClass(className.dimmable);
- },
- dimmed: function() {
- $dimmable.addClass(className.dimmed);
- },
- pageDimmer: function() {
- $dimmer.addClass(className.pageDimmer);
- },
- disabled: function() {
- $dimmer.addClass(className.disabled);
- },
- variation: function(variation) {
- variation = variation || settings.variation;
- if(variation) {
- $dimmer.addClass(variation);
- }
- }
- },
-
- remove: {
- active: function() {
- $dimmer
- .removeClass(className.active)
- ;
- },
- legacy: function() {
- $dimmer.removeClass(className.legacy);
- },
- dimmed: function() {
- $dimmable.removeClass(className.dimmed);
- },
- disabled: function() {
- $dimmer.removeClass(className.disabled);
- },
- variation: function(variation) {
- variation = variation || settings.variation;
- if(variation) {
- $dimmer.removeClass(variation);
- }
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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($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 {
- module.error(error.method, query);
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return found;
- }
- };
-
- module.preinitialize();
-
- 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.dimmer.settings = {
-
- name : 'Dimmer',
- namespace : 'dimmer',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- // whether should use flex layout
- useFlex : true,
-
- // name to distinguish between multiple dimmers in context
- dimmerName : false,
-
- // whether to add a variation type
- variation : false,
-
- // whether to bind close events
- closable : 'auto',
-
- // whether to use css animations
- useCSS : true,
-
- // css animation to use
- transition : 'fade',
-
- // event to bind to
- on : false,
-
- // overriding opacity value
- opacity : 'auto',
-
- // transition durations
- duration : {
- show : 500,
- hide : 500
- },
-// whether the dynamically created dimmer should have a loader
- displayLoader: false,
- loaderText : false,
- loaderVariation : '',
-
- onChange : function(){},
- onShow : function(){},
- onHide : function(){},
-
- error : {
- method : 'The method you called is not defined.'
- },
-
- className : {
- active : 'active',
- animating : 'animating',
- dimmable : 'dimmable',
- dimmed : 'dimmed',
- dimmer : 'dimmer',
- disabled : 'disabled',
- hide : 'hide',
- legacy : 'legacy',
- pageDimmer : 'page',
- show : 'show',
- loader : 'ui loader'
- },
-
- selector: {
- dimmer : '> .ui.dimmer',
- content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
- },
-
- template: {
- dimmer: function(settings) {
- var d = $('<div/>').addClass('ui dimmer'),l;
- if(settings.displayLoader) {
- l = $('<div/>')
- .addClass(settings.className.loader)
- .addClass(settings.loaderVariation);
- if(!!settings.loaderText){
- l.text(settings.loaderText);
- l.addClass('text');
- }
- d.append(l);
- }
- return d;
- }
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/dimmer.less b/semantic/src/definitions/modules/dimmer.less
deleted file mode 100644
index 04c3f54..0000000
--- a/semantic/src/definitions/modules/dimmer.less
+++ /dev/null
@@ -1,390 +0,0 @@
-/*!
- * # Fomantic-UI - Dimmer
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'dimmer';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Dimmer
-*******************************/
-
-.dimmable:not(body) {
- position: @dimmablePosition;
-}
-
-.ui.dimmer {
- display: none;
- position: @dimmerPosition;
- top: 0 !important;
- left: 0 !important;
-
- width: 100%;
- height: 100%;
-
- text-align: @textAlign;
- vertical-align: @verticalAlign;
- padding: @padding;
-
- background: @backgroundColor;
- opacity: @hiddenOpacity;
- line-height: @lineHeight;
-
- animation-fill-mode: both;
- animation-duration: @duration;
- transition: @transition;
-
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- user-select: none;
- will-change: opacity;
- z-index: @zIndex;
-}
-
-/* Dimmer Content */
-.ui.dimmer > .content {
- user-select: text;
- color: @textColor;
-}
-
-
-/* Loose Coupling */
-.ui.segment > .ui.dimmer:not(.page) {
- border-radius: inherit;
-}
-
-/* Scrollbars */
-.addScrollbars() when (@useCustomScrollbars) {
- .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
- background: @trackInvertedBackground;
- }
- .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
- background: @thumbInvertedBackground;
- }
- .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
- background: @thumbInvertedInactiveBackground;
- }
- .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
- background: @thumbInvertedHoverBackground;
- }
-}
-.addScrollbars();
-
-/*******************************
- States
-*******************************/
-
-/* Animating */
-.animating.dimmable:not(body),
-.dimmed.dimmable:not(body) {
- overflow: @overflow;
-}
-
-/* Animating / Active / Visible */
-.dimmed.dimmable > .ui.animating.dimmer,
-.dimmed.dimmable > .ui.visible.dimmer,
-.ui.active.dimmer {
- display: flex;
- opacity: @visibleOpacity;
-}
-
-& when (@variationDimmerDisabled) {
- /* Disabled */
- .ui.disabled.dimmer {
- width: 0 !important;
- height: 0 !important;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationDimmerLegacy) {
- /*--------------
- Legacy
- ---------------*/
-
- /* Animating / Active / Visible */
- .dimmed.dimmable > .ui.animating.legacy.dimmer,
- .dimmed.dimmable > .ui.visible.legacy.dimmer,
- .ui.active.legacy.dimmer {
- display: block;
- }
-}
-
-& when (@variationDimmerAligned) {
- /*--------------
- Alignment
- ---------------*/
-
- .ui[class*="top aligned"].dimmer {
- justify-content: flex-start;
- }
- .ui[class*="bottom aligned"].dimmer {
- justify-content: flex-end;
- }
-}
-
-& when (@variationDimmerPage) {
- /*--------------
- Page
- ---------------*/
-
- .ui.page.dimmer {
- position: @pageDimmerPosition;
- transform-style: @transformStyle;
- perspective: @perspective;
- transform-origin: center center;
- &.modals {
- -moz-perspective: none;
- }
- }
-}
-
-body.animating.in.dimmable,
-body.dimmed.dimmable {
- overflow: hidden;
-}
-
-body.dimmable > .dimmer {
- position: fixed;
-}
-
-& when (@variationDimmerBlurring) {
- /*--------------
- Blurring
- ---------------*/
-
- .blurring.dimmable > :not(.dimmer) {
- filter: @blurredStartFilter;
- transition: @blurredTransition;
- }
- .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
- filter: @blurredEndFilter;
- }
-
- /* Dimmer Color */
- .blurring.dimmable > .dimmer {
- background: @blurredBackgroundColor;
- }
- .blurring.dimmable > .inverted.dimmer {
- background: @blurredInvertedBackgroundColor;
- }
-}
-& when (@variationDimmerAligned) {
- /*--------------
- Aligned
- ---------------*/
-
- .ui.dimmer > .top.aligned.content > * {
- vertical-align: top;
- }
- .ui.dimmer > .bottom.aligned.content > * {
- vertical-align: bottom;
- }
-}
-
-& when (@variationDimmerShades) {
- /*--------------
- Shades
- ---------------*/
-
- .medium.medium.medium.medium.medium.dimmer {
- background: @mediumBackgroundColor;
- }
- .light.light.light.light.light.dimmer {
- background: @lightBackgroundColor;
- }
- .very.light.light.light.light.dimmer {
- background: @veryLightBackgroundColor;
- }
-}
-
-& when (@variationDimmerInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.dimmer {
- background: @invertedBackgroundColor;
- }
- .ui.inverted.dimmer > .content,
- .ui.inverted.dimmer > .content > * {
- color: @invertedTextColor;
- }
-
- & when (@variationDimmerShades) {
- /*--------------
- Inverted Shades
- ---------------*/
-
- .medium.medium.medium.medium.medium.inverted.dimmer {
- background: @mediumInvertedBackgroundColor;
- }
- .light.light.light.light.light.inverted.dimmer {
- background: @lightInvertedBackgroundColor;
- }
- .very.light.light.light.light.inverted.dimmer {
- background: @veryLightInvertedBackgroundColor;
- }
- }
-}
-
-& when (@variationDimmerSimple) {
- /*--------------
- Simple
- ---------------*/
-
- /* Displays without javascript */
- .ui.simple.dimmer {
- display: block;
- overflow: hidden;
- opacity: 0;
- width: 0;
- height: 0;
- z-index: -100;
- background: @simpleStartBackgroundColor;
- }
- .dimmed.dimmable > .ui.simple.dimmer {
- overflow: visible;
- opacity: 1;
- width: 100%;
- height: 100%;
- background: @simpleEndBackgroundColor;
- z-index: @simpleZIndex;
- }
-
- .ui.simple.inverted.dimmer {
- background: @simpleInvertedStartBackgroundColor;
- }
- .dimmed.dimmable > .ui.simple.inverted.dimmer {
- background: @simpleInvertedEndBackgroundColor;
- }
-}
-
-& when (@variationDimmerPartially) {
- /*--------------
- Partially
- ----------------*/
-
- .ui[class*="top dimmer"],
- .ui[class*="center dimmer"],
- .ui[class*="bottom dimmer"] {
- height: auto;
- }
- .ui[class*="bottom dimmer"] {
- top: auto !important;
- bottom: 0;
- }
- .ui[class*="center dimmer"] {
- top:50% !important;
- transform: translateY(-50%);
- -webkit-transform: translateY(calc(-50% - .5px));
- }
-
- .ui.segment > .ui.ui[class*="top dimmer"] {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .ui.segment > .ui.ui[class*="center dimmer"] {
- border-radius: 0;
- }
- .ui.segment > .ui.ui[class*="bottom dimmer"] {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
-
- .ui[class*="center dimmer"].transition[class*="fade up"].in {
- animation-name: fadeInUpCenter;
- }
- .ui[class*="center dimmer"].transition[class*="fade down"].in {
- animation-name: fadeInDownCenter;
- }
- .ui[class*="center dimmer"].transition[class*="fade up"].out {
- animation-name: fadeOutUpCenter;
- }
- .ui[class*="center dimmer"].transition[class*="fade down"].out {
- animation-name: fadeOutDownCenter;
- }
- .ui[class*="center dimmer"].bounce.transition {
- animation-name: bounceCenter;
- }
- @keyframes fadeInUpCenter {
- 0% {
- opacity: 0;
- transform: translateY(-40%);
- -webkit-transform: translateY(calc(-40% - .5px));
- }
- 100% {
- opacity: 1;
- transform: translateY(-50%);
- -webkit-transform: translateY(calc(-50% - .5px));
- }
- }
- @keyframes fadeInDownCenter {
- 0% {
- opacity: 0;
- transform: translateY(-60%);
- -webkit-transform: translateY(calc(-60% - .5px));
- }
- 100% {
- opacity: 1;
- transform: translateY(-50%);
- -webkit-transform: translateY(calc(-50% - .5px));
- }
- }
- @keyframes fadeOutUpCenter {
- 0% {
- opacity: 1;
- transform: translateY(-50%);
- -webkit-transform: translateY(calc(-50% - .5px));
- }
- 100% {
- opacity: 0;
- transform: translateY(-45%);
- -webkit-transform: translateY(calc(-45% - .5px));
- }
- }
- @keyframes fadeOutDownCenter {
- 0% {
- opacity: 1;
- transform: translateY(-50%);
- -webkit-transform: translateY(calc(-50% - .5px));
- }
- 100% {
- opacity: 0;
- transform: translateY(-55%);
- -webkit-transform: translateY(calc(-55% - .5px));
- }
- }
- @keyframes bounceCenter {
- 0%, 20%, 50%, 80%, 100% {
- transform: translateY(-50%);
- -webkit-transform: translateY(calc(-50% - .5px));
- }
- 40% {
- transform: translateY(calc(-50% - 30px));
- }
- 60% {
- transform: translateY(calc(-50% - 15px));
- }
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/dropdown.js b/semantic/src/definitions/modules/dropdown.js
deleted file mode 100644
index 9edd33d..0000000
--- a/semantic/src/definitions/modules/dropdown.js
+++ /dev/null
@@ -1,4238 +0,0 @@
-/*!
- * # Fomantic-UI - Dropdown
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.dropdown = function(parameters) {
- var
- $allModules = $(this),
- $document = $(document),
-
- moduleSelector = $allModules.selector || '',
-
- hasTouch = ('ontouchstart' in document.documentElement),
- clickEvent = hasTouch
- ? 'touchstart'
- : 'click',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
- returnedValue
- ;
-
- $allModules
- .each(function(elementIndex) {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.dropdown.settings, parameters)
- : $.extend({}, $.fn.dropdown.settings),
-
- className = settings.className,
- message = settings.message,
- fields = settings.fields,
- keys = settings.keys,
- metadata = settings.metadata,
- namespace = settings.namespace,
- regExp = settings.regExp,
- selector = settings.selector,
- error = settings.error,
- templates = settings.templates,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $context = $(settings.context),
- $text = $module.find(selector.text),
- $search = $module.find(selector.search),
- $sizer = $module.find(selector.sizer),
- $input = $module.find(selector.input),
- $icon = $module.find(selector.icon),
- $clear = $module.find(selector.clearIcon),
-
- $combo = ($module.prev().find(selector.text).length > 0)
- ? $module.prev().find(selector.text)
- : $module.prev(),
-
- $menu = $module.children(selector.menu),
- $item = $menu.find(selector.item),
- $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $(),
-
- activated = false,
- itemActivated = false,
- internalChange = false,
- iconClicked = false,
- element = this,
- instance = $module.data(moduleNamespace),
-
- selectActionActive,
- initialLoad,
- pageLostFocus,
- willRefocus,
- elementNamespace,
- id,
- selectObserver,
- menuObserver,
- classObserver,
- module
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing dropdown', settings);
-
- if( module.is.alreadySetup() ) {
- module.setup.reference();
- }
- else {
- if (settings.ignoreDiacritics && !String.prototype.normalize) {
- settings.ignoreDiacritics = false;
- module.error(error.noNormalize, element);
- }
-
- module.setup.layout();
-
- if(settings.values) {
- module.set.initialLoad();
- module.change.values(settings.values);
- module.remove.initialLoad();
- }
-
- module.refreshData();
-
- module.save.defaults();
- module.restore.selected();
-
- module.create.id();
- module.bind.events();
-
- module.observeChanges();
- module.instantiate();
- }
-
- },
-
- instantiate: function() {
- module.verbose('Storing instance of dropdown', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous dropdown', $module);
- module.remove.tabbable();
- module.remove.active();
- $menu.transition('stop all');
- $menu.removeClass(className.visible).addClass(className.hidden);
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- $menu
- .off(eventNamespace)
- ;
- $document
- .off(elementNamespace)
- ;
- module.disconnect.menuObserver();
- module.disconnect.selectObserver();
- module.disconnect.classObserver();
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- selectObserver = new MutationObserver(module.event.select.mutation);
- menuObserver = new MutationObserver(module.event.menu.mutation);
- classObserver = new MutationObserver(module.event.class.mutation);
- module.debug('Setting up mutation observer', selectObserver, menuObserver, classObserver);
- module.observe.select();
- module.observe.menu();
- module.observe.class();
- }
- },
-
- disconnect: {
- menuObserver: function() {
- if(menuObserver) {
- menuObserver.disconnect();
- }
- },
- selectObserver: function() {
- if(selectObserver) {
- selectObserver.disconnect();
- }
- },
- classObserver: function() {
- if(classObserver) {
- classObserver.disconnect();
- }
- }
- },
- observe: {
- select: function() {
- if(module.has.input() && selectObserver) {
- selectObserver.observe($module[0], {
- childList : true,
- subtree : true
- });
- }
- },
- menu: function() {
- if(module.has.menu() && menuObserver) {
- menuObserver.observe($menu[0], {
- childList : true,
- subtree : true
- });
- }
- },
- class: function() {
- if(module.has.search() && classObserver) {
- classObserver.observe($module[0], {
- attributes : true
- });
- }
- }
- },
-
- create: {
- id: function() {
- id = (Math.random().toString(16) + '000000000').substr(2, 8);
- elementNamespace = '.' + id;
- module.verbose('Creating unique id for element', id);
- },
- userChoice: function(values) {
- var
- $userChoices,
- $userChoice,
- isUserValue,
- html
- ;
- values = values || module.get.userValues();
- if(!values) {
- return false;
- }
- values = Array.isArray(values)
- ? values
- : [values]
- ;
- $.each(values, function(index, value) {
- if(module.get.item(value) === false) {
- html = settings.templates.addition( module.add.variables(message.addResult, value) );
- $userChoice = $('<div />')
- .html(html)
- .attr('data-' + metadata.value, value)
- .attr('data-' + metadata.text, value)
- .addClass(className.addition)
- .addClass(className.item)
- ;
- if(settings.hideAdditions) {
- $userChoice.addClass(className.hidden);
- }
- $userChoices = ($userChoices === undefined)
- ? $userChoice
- : $userChoices.add($userChoice)
- ;
- module.verbose('Creating user choices for value', value, $userChoice);
- }
- });
- return $userChoices;
- },
- userLabels: function(value) {
- var
- userValues = module.get.userValues()
- ;
- if(userValues) {
- module.debug('Adding user labels', userValues);
- $.each(userValues, function(index, value) {
- module.verbose('Adding custom user value');
- module.add.label(value, value);
- });
- }
- },
- menu: function() {
- $menu = $('<div />')
- .addClass(className.menu)
- .appendTo($module)
- ;
- },
- sizer: function() {
- $sizer = $('<span />')
- .addClass(className.sizer)
- .insertAfter($search)
- ;
- }
- },
-
- search: function(query) {
- query = (query !== undefined)
- ? query
- : module.get.query()
- ;
- module.verbose('Searching for query', query);
- if(module.has.minCharacters(query)) {
- module.filter(query);
- }
- else {
- module.hide(null,true);
- }
- },
-
- select: {
- firstUnfiltered: function() {
- module.verbose('Selecting first non-filtered element');
- module.remove.selectedItem();
- $item
- .not(selector.unselectable)
- .not(selector.addition + selector.hidden)
- .eq(0)
- .addClass(className.selected)
- ;
- },
- nextAvailable: function($selected) {
- $selected = $selected.eq(0);
- var
- $nextAvailable = $selected.nextAll(selector.item).not(selector.unselectable).eq(0),
- $prevAvailable = $selected.prevAll(selector.item).not(selector.unselectable).eq(0),
- hasNext = ($nextAvailable.length > 0)
- ;
- if(hasNext) {
- module.verbose('Moving selection to', $nextAvailable);
- $nextAvailable.addClass(className.selected);
- }
- else {
- module.verbose('Moving selection to', $prevAvailable);
- $prevAvailable.addClass(className.selected);
- }
- }
- },
-
- setup: {
- api: function() {
- var
- apiSettings = {
- debug : settings.debug,
- urlData : {
- value : module.get.value(),
- query : module.get.query()
- },
- on : false
- }
- ;
- module.verbose('First request, initializing API');
- $module
- .api(apiSettings)
- ;
- },
- layout: function() {
- if( $module.is('select') ) {
- module.setup.select();
- module.setup.returnedObject();
- }
- if( !module.has.menu() ) {
- module.create.menu();
- }
- if ( module.is.selection() && module.is.clearable() && !module.has.clearItem() ) {
- module.verbose('Adding clear icon');
- $clear = $('<i />')
- .addClass('remove icon')
- .insertBefore($text)
- ;
- }
- if( module.is.search() && !module.has.search() ) {
- module.verbose('Adding search input');
- $search = $('<input />')
- .addClass(className.search)
- .prop('autocomplete', 'off')
- .insertBefore($text)
- ;
- }
- if( module.is.multiple() && module.is.searchSelection() && !module.has.sizer()) {
- module.create.sizer();
- }
- if(settings.allowTab) {
- module.set.tabbable();
- }
- },
- select: function() {
- var
- selectValues = module.get.selectValues()
- ;
- module.debug('Dropdown initialized on a select', selectValues);
- if( $module.is('select') ) {
- $input = $module;
- }
- // see if select is placed correctly already
- if($input.parent(selector.dropdown).length > 0) {
- module.debug('UI dropdown already exists. Creating dropdown menu only');
- $module = $input.closest(selector.dropdown);
- if( !module.has.menu() ) {
- module.create.menu();
- }
- $menu = $module.children(selector.menu);
- module.setup.menu(selectValues);
- }
- else {
- module.debug('Creating entire dropdown from select');
- $module = $('<div />')
- .attr('class', $input.attr('class') )
- .addClass(className.selection)
- .addClass(className.dropdown)
- .html( templates.dropdown(selectValues, fields, settings.preserveHTML, settings.className) )
- .insertBefore($input)
- ;
- if($input.hasClass(className.multiple) && $input.prop('multiple') === false) {
- module.error(error.missingMultiple);
- $input.prop('multiple', true);
- }
- if($input.is('[multiple]')) {
- module.set.multiple();
- }
- if ($input.prop('disabled')) {
- module.debug('Disabling dropdown');
- $module.addClass(className.disabled);
- }
- $input
- .removeAttr('required')
- .removeAttr('class')
- .detach()
- .prependTo($module)
- ;
- }
- module.refresh();
- },
- menu: function(values) {
- $menu.html( templates.menu(values, fields,settings.preserveHTML,settings.className));
- $item = $menu.find(selector.item);
- $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
- },
- reference: function() {
- module.debug('Dropdown behavior was called on select, replacing with closest dropdown');
- // replace module reference
- $module = $module.parent(selector.dropdown);
- instance = $module.data(moduleNamespace);
- element = $module.get(0);
- module.refresh();
- module.setup.returnedObject();
- },
- returnedObject: function() {
- var
- $firstModules = $allModules.slice(0, elementIndex),
- $lastModules = $allModules.slice(elementIndex + 1)
- ;
- // adjust all modules to use correct reference
- $allModules = $firstModules.add($module).add($lastModules);
- }
- },
-
- refresh: function() {
- module.refreshSelectors();
- module.refreshData();
- },
-
- refreshItems: function() {
- $item = $menu.find(selector.item);
- $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
- },
-
- refreshSelectors: function() {
- module.verbose('Refreshing selector cache');
- $text = $module.find(selector.text);
- $search = $module.find(selector.search);
- $input = $module.find(selector.input);
- $icon = $module.find(selector.icon);
- $combo = ($module.prev().find(selector.text).length > 0)
- ? $module.prev().find(selector.text)
- : $module.prev()
- ;
- $menu = $module.children(selector.menu);
- $item = $menu.find(selector.item);
- $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
- },
-
- refreshData: function() {
- module.verbose('Refreshing cached metadata');
- $item
- .removeData(metadata.text)
- .removeData(metadata.value)
- ;
- },
-
- clearData: function() {
- module.verbose('Clearing metadata');
- $item
- .removeData(metadata.text)
- .removeData(metadata.value)
- ;
- $module
- .removeData(metadata.defaultText)
- .removeData(metadata.defaultValue)
- .removeData(metadata.placeholderText)
- ;
- },
-
- toggle: function() {
- module.verbose('Toggling menu visibility');
- if( !module.is.active() ) {
- module.show();
- }
- else {
- module.hide();
- }
- },
-
- show: function(callback, preventFocus) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(!module.can.show() && module.is.remote()) {
- module.debug('No API results retrieved, searching before show');
- module.queryRemote(module.get.query(), module.show);
- }
- if( module.can.show() && !module.is.active() ) {
- module.debug('Showing dropdown');
- if(module.has.message() && !(module.has.maxSelections() || module.has.allResultsFiltered()) ) {
- module.remove.message();
- }
- if(module.is.allFiltered()) {
- return true;
- }
- if(settings.onShow.call(element) !== false) {
- module.animate.show(function() {
- if( module.can.click() ) {
- module.bind.intent();
- }
- if(module.has.search() && !preventFocus) {
- module.focusSearch();
- }
- module.set.visible();
- callback.call(element);
- });
- }
- }
- },
-
- hide: function(callback, preventBlur) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( module.is.active() && !module.is.animatingOutward() ) {
- module.debug('Hiding dropdown');
- if(settings.onHide.call(element) !== false) {
- module.animate.hide(function() {
- module.remove.visible();
- // hidding search focus
- if ( module.is.focusedOnSearch() && preventBlur !== true ) {
- $search.blur();
- }
- callback.call(element);
- });
- }
- } else if( module.can.click() ) {
- module.unbind.intent();
- }
- iconClicked = false;
- },
-
- hideOthers: function() {
- module.verbose('Finding other dropdowns to hide');
- $allModules
- .not($module)
- .has(selector.menu + '.' + className.visible)
- .dropdown('hide')
- ;
- },
-
- hideMenu: function() {
- module.verbose('Hiding menu instantaneously');
- module.remove.active();
- module.remove.visible();
- $menu.transition('hide');
- },
-
- hideSubMenus: function() {
- var
- $subMenus = $menu.children(selector.item).find(selector.menu)
- ;
- module.verbose('Hiding sub menus', $subMenus);
- $subMenus.transition('hide');
- },
-
- bind: {
- events: function() {
- module.bind.keyboardEvents();
- module.bind.inputEvents();
- module.bind.mouseEvents();
- },
- keyboardEvents: function() {
- module.verbose('Binding keyboard events');
- $module
- .on('keydown' + eventNamespace, module.event.keydown)
- ;
- if( module.has.search() ) {
- $module
- .on(module.get.inputEvent() + eventNamespace, selector.search, module.event.input)
- ;
- }
- if( module.is.multiple() ) {
- $document
- .on('keydown' + elementNamespace, module.event.document.keydown)
- ;
- }
- },
- inputEvents: function() {
- module.verbose('Binding input change events');
- $module
- .on('change' + eventNamespace, selector.input, module.event.change)
- ;
- },
- mouseEvents: function() {
- module.verbose('Binding mouse events');
- if(module.is.multiple()) {
- $module
- .on(clickEvent + eventNamespace, selector.label, module.event.label.click)
- .on(clickEvent + eventNamespace, selector.remove, module.event.remove.click)
- ;
- }
- if( module.is.searchSelection() ) {
- $module
- .on('mousedown' + eventNamespace, module.event.mousedown)
- .on('mouseup' + eventNamespace, module.event.mouseup)
- .on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown)
- .on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup)
- .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
- .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
- .on('focus' + eventNamespace, selector.search, module.event.search.focus)
- .on(clickEvent + eventNamespace, selector.search, module.event.search.focus)
- .on('blur' + eventNamespace, selector.search, module.event.search.blur)
- .on(clickEvent + eventNamespace, selector.text, module.event.text.focus)
- ;
- if(module.is.multiple()) {
- $module
- .on(clickEvent + eventNamespace, module.event.click)
- ;
- }
- }
- else {
- if(settings.on == 'click') {
- $module
- .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
- .on(clickEvent + eventNamespace, module.event.test.toggle)
- ;
- }
- else if(settings.on == 'hover') {
- $module
- .on('mouseenter' + eventNamespace, module.delay.show)
- .on('mouseleave' + eventNamespace, module.delay.hide)
- ;
- }
- else {
- $module
- .on(settings.on + eventNamespace, module.toggle)
- ;
- }
- $module
- .on('mousedown' + eventNamespace, module.event.mousedown)
- .on('mouseup' + eventNamespace, module.event.mouseup)
- .on('focus' + eventNamespace, module.event.focus)
- .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
- ;
- if(module.has.menuSearch() ) {
- $module
- .on('blur' + eventNamespace, selector.search, module.event.search.blur)
- ;
- }
- else {
- $module
- .on('blur' + eventNamespace, module.event.blur)
- ;
- }
- }
- $menu
- .on((hasTouch ? 'touchstart' : 'mouseenter') + eventNamespace, selector.item, module.event.item.mouseenter)
- .on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave)
- .on('click' + eventNamespace, selector.item, module.event.item.click)
- ;
- },
- intent: function() {
- module.verbose('Binding hide intent event to document');
- if(hasTouch) {
- $document
- .on('touchstart' + elementNamespace, module.event.test.touch)
- .on('touchmove' + elementNamespace, module.event.test.touch)
- ;
- }
- $document
- .on(clickEvent + elementNamespace, module.event.test.hide)
- ;
- }
- },
-
- unbind: {
- intent: function() {
- module.verbose('Removing hide intent event from document');
- if(hasTouch) {
- $document
- .off('touchstart' + elementNamespace)
- .off('touchmove' + elementNamespace)
- ;
- }
- $document
- .off(clickEvent + elementNamespace)
- ;
- }
- },
-
- filter: function(query) {
- var
- searchTerm = (query !== undefined)
- ? query
- : module.get.query(),
- afterFiltered = function() {
- if(module.is.multiple()) {
- module.filterActive();
- }
- if(query || (!query && module.get.activeItem().length == 0)) {
- module.select.firstUnfiltered();
- }
- if( module.has.allResultsFiltered() ) {
- if( settings.onNoResults.call(element, searchTerm) ) {
- if(settings.allowAdditions) {
- if(settings.hideAdditions) {
- module.verbose('User addition with no menu, setting empty style');
- module.set.empty();
- module.hideMenu();
- }
- }
- else {
- module.verbose('All items filtered, showing message', searchTerm);
- module.add.message(message.noResults);
- }
- }
- else {
- module.verbose('All items filtered, hiding dropdown', searchTerm);
- module.hideMenu();
- }
- }
- else {
- module.remove.empty();
- module.remove.message();
- }
- if(settings.allowAdditions) {
- module.add.userSuggestion(module.escape.htmlEntities(query));
- }
- if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) {
- module.show();
- }
- }
- ;
- if(settings.useLabels && module.has.maxSelections()) {
- return;
- }
- if(settings.apiSettings) {
- if( module.can.useAPI() ) {
- module.queryRemote(searchTerm, function() {
- if(settings.filterRemoteData) {
- module.filterItems(searchTerm);
- }
- var preSelected = $input.val();
- if(!Array.isArray(preSelected)) {
- preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : [];
- }
- $.each(preSelected,function(index,value){
- $item.filter('[data-value="'+value+'"]')
- .addClass(className.filtered)
- ;
- });
- afterFiltered();
- });
- }
- else {
- module.error(error.noAPI);
- }
- }
- else {
- module.filterItems(searchTerm);
- afterFiltered();
- }
- },
-
- queryRemote: function(query, callback) {
- var
- apiSettings = {
- errorDuration : false,
- cache : 'local',
- throttle : settings.throttle,
- urlData : {
- query: query
- },
- onError: function() {
- module.add.message(message.serverError);
- callback();
- },
- onFailure: function() {
- module.add.message(message.serverError);
- callback();
- },
- onSuccess : function(response) {
- var
- values = response[fields.remoteValues]
- ;
- if (!Array.isArray(values)){
- values = [];
- }
- module.remove.message();
- var menuConfig = {};
- menuConfig[fields.values] = values;
- module.setup.menu(menuConfig);
-
- if(values.length===0 && !settings.allowAdditions) {
- module.add.message(message.noResults);
- }
- callback();
- }
- }
- ;
- if( !$module.api('get request') ) {
- module.setup.api();
- }
- apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings);
- $module
- .api('setting', apiSettings)
- .api('query')
- ;
- },
-
- filterItems: function(query) {
- var
- searchTerm = module.remove.diacritics(query !== undefined
- ? query
- : module.get.query()
- ),
- results = null,
- escapedTerm = module.escape.string(searchTerm),
- regExpFlags = (settings.ignoreSearchCase ? 'i' : '') + 'gm',
- beginsWithRegExp = new RegExp('^' + escapedTerm, regExpFlags)
- ;
- // avoid loop if we're matching nothing
- if( module.has.query() ) {
- results = [];
-
- module.verbose('Searching for matching values', searchTerm);
- $item
- .each(function(){
- var
- $choice = $(this),
- text,
- value
- ;
- if($choice.hasClass(className.unfilterable)) {
- results.push(this);
- return true;
- }
- if(settings.match === 'both' || settings.match === 'text') {
- text = module.remove.diacritics(String(module.get.choiceText($choice, false)));
- if(text.search(beginsWithRegExp) !== -1) {
- results.push(this);
- return true;
- }
- else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text)) {
- results.push(this);
- return true;
- }
- else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, text)) {
- results.push(this);
- return true;
- }
- }
- if(settings.match === 'both' || settings.match === 'value') {
- value = module.remove.diacritics(String(module.get.choiceValue($choice, text)));
- if(value.search(beginsWithRegExp) !== -1) {
- results.push(this);
- return true;
- }
- else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, value)) {
- results.push(this);
- return true;
- }
- else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, value)) {
- results.push(this);
- return true;
- }
- }
- })
- ;
- }
- module.debug('Showing only matched items', searchTerm);
- module.remove.filteredItem();
- if(results) {
- $item
- .not(results)
- .addClass(className.filtered)
- ;
- }
-
- if(!module.has.query()) {
- $divider
- .removeClass(className.hidden);
- } else if(settings.hideDividers === true) {
- $divider
- .addClass(className.hidden);
- } else if(settings.hideDividers === 'empty') {
- $divider
- .removeClass(className.hidden)
- .filter(function() {
- // First find the last divider in this divider group
- // Dividers which are direct siblings are considered a group
- var lastDivider = $(this).nextUntil(selector.item);
-
- return (lastDivider.length ? lastDivider : $(this))
- // Count all non-filtered items until the next divider (or end of the dropdown)
- .nextUntil(selector.divider)
- .filter(selector.item + ":not(." + className.filtered + ")")
- // Hide divider if no items are found
- .length === 0;
- })
- .addClass(className.hidden);
- }
- },
-
- fuzzySearch: function(query, term) {
- var
- termLength = term.length,
- queryLength = query.length
- ;
- query = (settings.ignoreSearchCase ? query.toLowerCase() : query);
- term = (settings.ignoreSearchCase ? term.toLowerCase() : term);
- if(queryLength > termLength) {
- return false;
- }
- if(queryLength === termLength) {
- return (query === term);
- }
- search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) {
- var
- queryCharacter = query.charCodeAt(characterIndex)
- ;
- while(nextCharacterIndex < termLength) {
- if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) {
- continue search;
- }
- }
- return false;
- }
- return true;
- },
- exactSearch: function (query, term) {
- query = (settings.ignoreSearchCase ? query.toLowerCase() : query);
- term = (settings.ignoreSearchCase ? term.toLowerCase() : term);
- return term.indexOf(query) > -1;
-
- },
- filterActive: function() {
- if(settings.useLabels) {
- $item.filter('.' + className.active)
- .addClass(className.filtered)
- ;
- }
- },
-
- focusSearch: function(skipHandler) {
- if( module.has.search() && !module.is.focusedOnSearch() ) {
- if(skipHandler) {
- $module.off('focus' + eventNamespace, selector.search);
- $search.focus();
- $module.on('focus' + eventNamespace, selector.search, module.event.search.focus);
- }
- else {
- $search.focus();
- }
- }
- },
-
- blurSearch: function() {
- if( module.has.search() ) {
- $search.blur();
- }
- },
-
- forceSelection: function() {
- var
- $currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
- $activeItem = $item.not(className.filtered).filter('.' + className.active).eq(0),
- $selectedItem = ($currentlySelected.length > 0)
- ? $currentlySelected
- : $activeItem,
- hasSelected = ($selectedItem.length > 0)
- ;
- if(settings.allowAdditions || (hasSelected && !module.is.multiple())) {
- module.debug('Forcing partial selection to selected item', $selectedItem);
- module.event.item.click.call($selectedItem, {}, true);
- }
- else {
- module.remove.searchTerm();
- }
- },
-
- change: {
- values: function(values) {
- if(!settings.allowAdditions) {
- module.clear();
- }
- module.debug('Creating dropdown with specified values', values);
- var menuConfig = {};
- menuConfig[fields.values] = values;
- module.setup.menu(menuConfig);
- $.each(values, function(index, item) {
- if(item.selected == true) {
- module.debug('Setting initial selection to', item[fields.value]);
- module.set.selected(item[fields.value]);
- if(!module.is.multiple()) {
- return false;
- }
- }
- });
-
- if(module.has.selectInput()) {
- module.disconnect.selectObserver();
- $input.html('');
- $input.append('<option disabled selected value></option>');
- $.each(values, function(index, item) {
- var
- value = settings.templates.deQuote(item[fields.value]),
- name = settings.templates.escape(
- item[fields.name] || '',
- settings.preserveHTML
- )
- ;
- $input.append('<option value="' + value + '">' + name + '</option>');
- });
- module.observe.select();
- }
- }
- },
-
- event: {
- change: function() {
- if(!internalChange) {
- module.debug('Input changed, updating selection');
- module.set.selected();
- }
- },
- focus: function() {
- if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) {
- module.show();
- }
- },
- blur: function(event) {
- pageLostFocus = (document.activeElement === this);
- if(!activated && !pageLostFocus) {
- module.remove.activeLabel();
- module.hide();
- }
- },
- mousedown: function() {
- if(module.is.searchSelection()) {
- // prevent menu hiding on immediate re-focus
- willRefocus = true;
- }
- else {
- // prevents focus callback from occurring on mousedown
- activated = true;
- }
- },
- mouseup: function() {
- if(module.is.searchSelection()) {
- // prevent menu hiding on immediate re-focus
- willRefocus = false;
- }
- else {
- activated = false;
- }
- },
- click: function(event) {
- var
- $target = $(event.target)
- ;
- // focus search
- if($target.is($module)) {
- if(!module.is.focusedOnSearch()) {
- module.focusSearch();
- }
- else {
- module.show();
- }
- }
- },
- search: {
- focus: function(event) {
- activated = true;
- if(module.is.multiple()) {
- module.remove.activeLabel();
- }
- if(settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin')) {
- module.search();
- }
- },
- blur: function(event) {
- pageLostFocus = (document.activeElement === this);
- if(module.is.searchSelection() && !willRefocus) {
- if(!itemActivated && !pageLostFocus) {
- if(settings.forceSelection) {
- module.forceSelection();
- } else if(!settings.allowAdditions){
- module.remove.searchTerm();
- }
- module.hide();
- }
- }
- willRefocus = false;
- }
- },
- clearIcon: {
- click: function(event) {
- module.clear();
- if(module.is.searchSelection()) {
- module.remove.searchTerm();
- }
- module.hide();
- event.stopPropagation();
- }
- },
- icon: {
- click: function(event) {
- iconClicked=true;
- if(module.has.search()) {
- if(!module.is.active()) {
- if(settings.showOnFocus){
- module.focusSearch();
- } else {
- module.toggle();
- }
- } else {
- module.blurSearch();
- }
- } else {
- module.toggle();
- }
- }
- },
- text: {
- focus: function(event) {
- activated = true;
- module.focusSearch();
- }
- },
- input: function(event) {
- if(module.is.multiple() || module.is.searchSelection()) {
- module.set.filtered();
- }
- clearTimeout(module.timer);
- module.timer = setTimeout(module.search, settings.delay.search);
- },
- label: {
- click: function(event) {
- var
- $label = $(this),
- $labels = $module.find(selector.label),
- $activeLabels = $labels.filter('.' + className.active),
- $nextActive = $label.nextAll('.' + className.active),
- $prevActive = $label.prevAll('.' + className.active),
- $range = ($nextActive.length > 0)
- ? $label.nextUntil($nextActive).add($activeLabels).add($label)
- : $label.prevUntil($prevActive).add($activeLabels).add($label)
- ;
- if(event.shiftKey) {
- $activeLabels.removeClass(className.active);
- $range.addClass(className.active);
- }
- else if(event.ctrlKey) {
- $label.toggleClass(className.active);
- }
- else {
- $activeLabels.removeClass(className.active);
- $label.addClass(className.active);
- }
- settings.onLabelSelect.apply(this, $labels.filter('.' + className.active));
- }
- },
- remove: {
- click: function() {
- var
- $label = $(this).parent()
- ;
- if( $label.hasClass(className.active) ) {
- // remove all selected labels
- module.remove.activeLabels();
- }
- else {
- // remove this label only
- module.remove.activeLabels( $label );
- }
- }
- },
- test: {
- toggle: function(event) {
- var
- toggleBehavior = (module.is.multiple())
- ? module.show
- : module.toggle
- ;
- if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) {
- return;
- }
- if( module.determine.eventOnElement(event, toggleBehavior) ) {
- event.preventDefault();
- }
- },
- touch: function(event) {
- module.determine.eventOnElement(event, function() {
- if(event.type == 'touchstart') {
- module.timer = setTimeout(function() {
- module.hide();
- }, settings.delay.touch);
- }
- else if(event.type == 'touchmove') {
- clearTimeout(module.timer);
- }
- });
- event.stopPropagation();
- },
- hide: function(event) {
- if(module.determine.eventInModule(event, module.hide)){
- if(element.id && $(event.target).attr('for') === element.id){
- event.preventDefault();
- }
- }
- }
- },
- class: {
- mutation: function(mutations) {
- mutations.forEach(function(mutation) {
- if(mutation.attributeName === "class") {
- module.check.disabled();
- }
- });
- }
- },
- select: {
- mutation: function(mutations) {
- module.debug('<select> modified, recreating menu');
- if(module.is.selectMutation(mutations)) {
- module.disconnect.selectObserver();
- module.refresh();
- module.setup.select();
- module.set.selected();
- module.observe.select();
- }
- }
- },
- menu: {
- mutation: function(mutations) {
- var
- mutation = mutations[0],
- $addedNode = mutation.addedNodes
- ? $(mutation.addedNodes[0])
- : $(false),
- $removedNode = mutation.removedNodes
- ? $(mutation.removedNodes[0])
- : $(false),
- $changedNodes = $addedNode.add($removedNode),
- isUserAddition = $changedNodes.is(selector.addition) || $changedNodes.closest(selector.addition).length > 0,
- isMessage = $changedNodes.is(selector.message) || $changedNodes.closest(selector.message).length > 0
- ;
- if(isUserAddition || isMessage) {
- module.debug('Updating item selector cache');
- module.refreshItems();
- }
- else {
- module.debug('Menu modified, updating selector cache');
- module.refresh();
- }
- },
- mousedown: function() {
- itemActivated = true;
- },
- mouseup: function() {
- itemActivated = false;
- }
- },
- item: {
- mouseenter: function(event) {
- var
- $target = $(event.target),
- $item = $(this),
- $subMenu = $item.children(selector.menu),
- $otherMenus = $item.siblings(selector.item).children(selector.menu),
- hasSubMenu = ($subMenu.length > 0),
- isBubbledEvent = ($subMenu.find($target).length > 0)
- ;
- if( !isBubbledEvent && hasSubMenu ) {
- clearTimeout(module.itemTimer);
- module.itemTimer = setTimeout(function() {
- module.verbose('Showing sub-menu', $subMenu);
- $.each($otherMenus, function() {
- module.animate.hide(false, $(this));
- });
- module.animate.show(false, $subMenu);
- }, settings.delay.show);
- event.preventDefault();
- }
- },
- mouseleave: function(event) {
- var
- $subMenu = $(this).children(selector.menu)
- ;
- if($subMenu.length > 0) {
- clearTimeout(module.itemTimer);
- module.itemTimer = setTimeout(function() {
- module.verbose('Hiding sub-menu', $subMenu);
- module.animate.hide(false, $subMenu);
- }, settings.delay.hide);
- }
- },
- click: function (event, skipRefocus) {
- var
- $choice = $(this),
- $target = (event)
- ? $(event.target)
- : $(''),
- $subMenu = $choice.find(selector.menu),
- text = module.get.choiceText($choice),
- value = module.get.choiceValue($choice, text),
- hasSubMenu = ($subMenu.length > 0),
- isBubbledEvent = ($subMenu.find($target).length > 0)
- ;
- // prevents IE11 bug where menu receives focus even though `tabindex=-1`
- if (document.activeElement.tagName.toLowerCase() !== 'input') {
- $(document.activeElement).blur();
- }
- if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) {
- if(module.is.searchSelection()) {
- if(settings.allowAdditions) {
- module.remove.userAddition();
- }
- module.remove.searchTerm();
- if(!module.is.focusedOnSearch() && !(skipRefocus == true)) {
- module.focusSearch(true);
- }
- }
- if(!settings.useLabels) {
- module.remove.filteredItem();
- module.set.scrollPosition($choice);
- }
- module.determine.selectAction.call(this, text, value);
- }
- }
- },
-
- document: {
- // label selection should occur even when element has no focus
- keydown: function(event) {
- var
- pressedKey = event.which,
- isShortcutKey = module.is.inObject(pressedKey, keys)
- ;
- if(isShortcutKey) {
- var
- $label = $module.find(selector.label),
- $activeLabel = $label.filter('.' + className.active),
- activeValue = $activeLabel.data(metadata.value),
- labelIndex = $label.index($activeLabel),
- labelCount = $label.length,
- hasActiveLabel = ($activeLabel.length > 0),
- hasMultipleActive = ($activeLabel.length > 1),
- isFirstLabel = (labelIndex === 0),
- isLastLabel = (labelIndex + 1 == labelCount),
- isSearch = module.is.searchSelection(),
- isFocusedOnSearch = module.is.focusedOnSearch(),
- isFocused = module.is.focused(),
- caretAtStart = (isFocusedOnSearch && module.get.caretPosition(false) === 0),
- isSelectedSearch = (caretAtStart && module.get.caretPosition(true) !== 0),
- $nextLabel
- ;
- if(isSearch && !hasActiveLabel && !isFocusedOnSearch) {
- return;
- }
-
- if(pressedKey == keys.leftArrow) {
- // activate previous label
- if((isFocused || caretAtStart) && !hasActiveLabel) {
- module.verbose('Selecting previous label');
- $label.last().addClass(className.active);
- }
- else if(hasActiveLabel) {
- if(!event.shiftKey) {
- module.verbose('Selecting previous label');
- $label.removeClass(className.active);
- }
- else {
- module.verbose('Adding previous label to selection');
- }
- if(isFirstLabel && !hasMultipleActive) {
- $activeLabel.addClass(className.active);
- }
- else {
- $activeLabel.prev(selector.siblingLabel)
- .addClass(className.active)
- .end()
- ;
- }
- event.preventDefault();
- }
- }
- else if(pressedKey == keys.rightArrow) {
- // activate first label
- if(isFocused && !hasActiveLabel) {
- $label.first().addClass(className.active);
- }
- // activate next label
- if(hasActiveLabel) {
- if(!event.shiftKey) {
- module.verbose('Selecting next label');
- $label.removeClass(className.active);
- }
- else {
- module.verbose('Adding next label to selection');
- }
- if(isLastLabel) {
- if(isSearch) {
- if(!isFocusedOnSearch) {
- module.focusSearch();
- }
- else {
- $label.removeClass(className.active);
- }
- }
- else if(hasMultipleActive) {
- $activeLabel.next(selector.siblingLabel).addClass(className.active);
- }
- else {
- $activeLabel.addClass(className.active);
- }
- }
- else {
- $activeLabel.next(selector.siblingLabel).addClass(className.active);
- }
- event.preventDefault();
- }
- }
- else if(pressedKey == keys.deleteKey || pressedKey == keys.backspace) {
- if(hasActiveLabel) {
- module.verbose('Removing active labels');
- if(isLastLabel) {
- if(isSearch && !isFocusedOnSearch) {
- module.focusSearch();
- }
- }
- $activeLabel.last().next(selector.siblingLabel).addClass(className.active);
- module.remove.activeLabels($activeLabel);
- event.preventDefault();
- }
- else if(caretAtStart && !isSelectedSearch && !hasActiveLabel && pressedKey == keys.backspace) {
- module.verbose('Removing last label on input backspace');
- $activeLabel = $label.last().addClass(className.active);
- module.remove.activeLabels($activeLabel);
- }
- }
- else {
- $activeLabel.removeClass(className.active);
- }
- }
- }
- },
-
- keydown: function(event) {
- var
- pressedKey = event.which,
- isShortcutKey = module.is.inObject(pressedKey, keys)
- ;
- if(isShortcutKey) {
- var
- $currentlySelected = $item.not(selector.unselectable).filter('.' + className.selected).eq(0),
- $activeItem = $menu.children('.' + className.active).eq(0),
- $selectedItem = ($currentlySelected.length > 0)
- ? $currentlySelected
- : $activeItem,
- $visibleItems = ($selectedItem.length > 0)
- ? $selectedItem.siblings(':not(.' + className.filtered +')').addBack()
- : $menu.children(':not(.' + className.filtered +')'),
- $subMenu = $selectedItem.children(selector.menu),
- $parentMenu = $selectedItem.closest(selector.menu),
- inVisibleMenu = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating) || $parentMenu.parent(selector.menu).length > 0),
- hasSubMenu = ($subMenu.length> 0),
- hasSelectedItem = ($selectedItem.length > 0),
- selectedIsSelectable = ($selectedItem.not(selector.unselectable).length > 0),
- delimiterPressed = (pressedKey == keys.delimiter && settings.allowAdditions && module.is.multiple()),
- isAdditionWithoutMenu = (settings.allowAdditions && settings.hideAdditions && (pressedKey == keys.enter || delimiterPressed) && selectedIsSelectable),
- $nextItem,
- isSubMenuItem,
- newIndex
- ;
- // allow selection with menu closed
- if(isAdditionWithoutMenu) {
- module.verbose('Selecting item from keyboard shortcut', $selectedItem);
- module.event.item.click.call($selectedItem, event);
- if(module.is.searchSelection()) {
- module.remove.searchTerm();
- }
- if(module.is.multiple()){
- event.preventDefault();
- }
- }
-
- // visible menu keyboard shortcuts
- if( module.is.visible() ) {
-
- // enter (select or open sub-menu)
- if(pressedKey == keys.enter || delimiterPressed) {
- if(pressedKey == keys.enter && hasSelectedItem && hasSubMenu && !settings.allowCategorySelection) {
- module.verbose('Pressed enter on unselectable category, opening sub menu');
- pressedKey = keys.rightArrow;
- }
- else if(selectedIsSelectable) {
- module.verbose('Selecting item from keyboard shortcut', $selectedItem);
- module.event.item.click.call($selectedItem, event);
- if(module.is.searchSelection()) {
- module.remove.searchTerm();
- if(module.is.multiple()) {
- $search.focus();
- }
- }
- }
- event.preventDefault();
- }
-
- // sub-menu actions
- if(hasSelectedItem) {
-
- if(pressedKey == keys.leftArrow) {
-
- isSubMenuItem = ($parentMenu[0] !== $menu[0]);
-
- if(isSubMenuItem) {
- module.verbose('Left key pressed, closing sub-menu');
- module.animate.hide(false, $parentMenu);
- $selectedItem
- .removeClass(className.selected)
- ;
- $parentMenu
- .closest(selector.item)
- .addClass(className.selected)
- ;
- event.preventDefault();
- }
- }
-
- // right arrow (show sub-menu)
- if(pressedKey == keys.rightArrow) {
- if(hasSubMenu) {
- module.verbose('Right key pressed, opening sub-menu');
- module.animate.show(false, $subMenu);
- $selectedItem
- .removeClass(className.selected)
- ;
- $subMenu
- .find(selector.item).eq(0)
- .addClass(className.selected)
- ;
- event.preventDefault();
- }
- }
- }
-
- // up arrow (traverse menu up)
- if(pressedKey == keys.upArrow) {
- $nextItem = (hasSelectedItem && inVisibleMenu)
- ? $selectedItem.prevAll(selector.item + ':not(' + selector.unselectable + ')').eq(0)
- : $item.eq(0)
- ;
- if($visibleItems.index( $nextItem ) < 0) {
- module.verbose('Up key pressed but reached top of current menu');
- event.preventDefault();
- return;
- }
- else {
- module.verbose('Up key pressed, changing active item');
- $selectedItem
- .removeClass(className.selected)
- ;
- $nextItem
- .addClass(className.selected)
- ;
- module.set.scrollPosition($nextItem);
- if(settings.selectOnKeydown && module.is.single()) {
- module.set.selectedItem($nextItem);
- }
- }
- event.preventDefault();
- }
-
- // down arrow (traverse menu down)
- if(pressedKey == keys.downArrow) {
- $nextItem = (hasSelectedItem && inVisibleMenu)
- ? $nextItem = $selectedItem.nextAll(selector.item + ':not(' + selector.unselectable + ')').eq(0)
- : $item.eq(0)
- ;
- if($nextItem.length === 0) {
- module.verbose('Down key pressed but reached bottom of current menu');
- event.preventDefault();
- return;
- }
- else {
- module.verbose('Down key pressed, changing active item');
- $item
- .removeClass(className.selected)
- ;
- $nextItem
- .addClass(className.selected)
- ;
- module.set.scrollPosition($nextItem);
- if(settings.selectOnKeydown && module.is.single()) {
- module.set.selectedItem($nextItem);
- }
- }
- event.preventDefault();
- }
-
- // page down (show next page)
- if(pressedKey == keys.pageUp) {
- module.scrollPage('up');
- event.preventDefault();
- }
- if(pressedKey == keys.pageDown) {
- module.scrollPage('down');
- event.preventDefault();
- }
-
- // escape (close menu)
- if(pressedKey == keys.escape) {
- module.verbose('Escape key pressed, closing dropdown');
- module.hide();
- }
-
- }
- else {
- // delimiter key
- if(delimiterPressed) {
- event.preventDefault();
- }
- // down arrow (open menu)
- if(pressedKey == keys.downArrow && !module.is.visible()) {
- module.verbose('Down key pressed, showing dropdown');
- module.show();
- event.preventDefault();
- }
- }
- }
- else {
- if( !module.has.search() ) {
- module.set.selectedLetter( String.fromCharCode(pressedKey) );
- }
- }
- }
- },
-
- trigger: {
- change: function() {
- var
- inputElement = $input[0]
- ;
- if(inputElement) {
- var events = document.createEvent('HTMLEvents');
- module.verbose('Triggering native change event');
- events.initEvent('change', true, false);
- inputElement.dispatchEvent(events);
- }
- }
- },
-
- determine: {
- selectAction: function(text, value) {
- selectActionActive = true;
- module.verbose('Determining action', settings.action);
- if( $.isFunction( module.action[settings.action] ) ) {
- module.verbose('Triggering preset action', settings.action, text, value);
- module.action[ settings.action ].call(element, text, value, this);
- }
- else if( $.isFunction(settings.action) ) {
- module.verbose('Triggering user action', settings.action, text, value);
- settings.action.call(element, text, value, this);
- }
- else {
- module.error(error.action, settings.action);
- }
- selectActionActive = false;
- },
- eventInModule: function(event, callback) {
- var
- $target = $(event.target),
- inDocument = ($target.closest(document.documentElement).length > 0),
- inModule = ($target.closest($module).length > 0)
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(inDocument && !inModule) {
- module.verbose('Triggering event', callback);
- callback();
- return true;
- }
- else {
- module.verbose('Event occurred in dropdown, canceling callback');
- return false;
- }
- },
- eventOnElement: function(event, callback) {
- var
- $target = $(event.target),
- $label = $target.closest(selector.siblingLabel),
- inVisibleDOM = document.body.contains(event.target),
- notOnLabel = ($module.find($label).length === 0 || !(module.is.multiple() && settings.useLabels)),
- notInMenu = ($target.closest($menu).length === 0)
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(inVisibleDOM && notOnLabel && notInMenu) {
- module.verbose('Triggering event', callback);
- callback();
- return true;
- }
- else {
- module.verbose('Event occurred in dropdown menu, canceling callback');
- return false;
- }
- }
- },
-
- action: {
-
- nothing: function() {},
-
- activate: function(text, value, element) {
- value = (value !== undefined)
- ? value
- : text
- ;
- if( module.can.activate( $(element) ) ) {
- module.set.selected(value, $(element));
- if(!module.is.multiple()) {
- module.hideAndClear();
- }
- }
- },
-
- select: function(text, value, element) {
- value = (value !== undefined)
- ? value
- : text
- ;
- if( module.can.activate( $(element) ) ) {
- module.set.value(value, text, $(element));
- if(!module.is.multiple()) {
- module.hideAndClear();
- }
- }
- },
-
- combo: function(text, value, element) {
- value = (value !== undefined)
- ? value
- : text
- ;
- module.set.selected(value, $(element));
- module.hideAndClear();
- },
-
- hide: function(text, value, element) {
- module.set.value(value, text, $(element));
- module.hideAndClear();
- }
-
- },
-
- get: {
- id: function() {
- return id;
- },
- defaultText: function() {
- return $module.data(metadata.defaultText);
- },
- defaultValue: function() {
- return $module.data(metadata.defaultValue);
- },
- placeholderText: function() {
- if(settings.placeholder != 'auto' && typeof settings.placeholder == 'string') {
- return settings.placeholder;
- }
- return $module.data(metadata.placeholderText) || '';
- },
- text: function() {
- return settings.preserveHTML ? $text.html() : $text.text();
- },
- query: function() {
- return String($search.val()).trim();
- },
- searchWidth: function(value) {
- value = (value !== undefined)
- ? value
- : $search.val()
- ;
- $sizer.text(value);
- // prevent rounding issues
- return Math.ceil( $sizer.width() + 1);
- },
- selectionCount: function() {
- var
- values = module.get.values(),
- count
- ;
- count = ( module.is.multiple() )
- ? Array.isArray(values)
- ? values.length
- : 0
- : (module.get.value() !== '')
- ? 1
- : 0
- ;
- return count;
- },
- transition: function($subMenu) {
- return (settings.transition == 'auto')
- ? module.is.upward($subMenu)
- ? 'slide up'
- : 'slide down'
- : settings.transition
- ;
- },
- userValues: function() {
- var
- values = module.get.values()
- ;
- if(!values) {
- return false;
- }
- values = Array.isArray(values)
- ? values
- : [values]
- ;
- return $.grep(values, function(value) {
- return (module.get.item(value) === false);
- });
- },
- uniqueArray: function(array) {
- return $.grep(array, function (value, index) {
- return $.inArray(value, array) === index;
- });
- },
- caretPosition: function(returnEndPos) {
- var
- input = $search.get(0),
- range,
- rangeLength
- ;
- if(returnEndPos && 'selectionEnd' in input){
- return input.selectionEnd;
- }
- else if(!returnEndPos && 'selectionStart' in input) {
- return input.selectionStart;
- }
- if (document.selection) {
- input.focus();
- range = document.selection.createRange();
- rangeLength = range.text.length;
- if(returnEndPos) {
- return rangeLength;
- }
- range.moveStart('character', -input.value.length);
- return range.text.length - rangeLength;
- }
- },
- value: function() {
- var
- value = ($input.length > 0)
- ? $input.val()
- : $module.data(metadata.value),
- isEmptyMultiselect = (Array.isArray(value) && value.length === 1 && value[0] === '')
- ;
- // prevents placeholder element from being selected when multiple
- return (value === undefined || isEmptyMultiselect)
- ? ''
- : value
- ;
- },
- values: function() {
- var
- value = module.get.value()
- ;
- if(value === '') {
- return '';
- }
- return ( !module.has.selectInput() && module.is.multiple() )
- ? (typeof value == 'string') // delimited string
- ? module.escape.htmlEntities(value).split(settings.delimiter)
- : ''
- : value
- ;
- },
- remoteValues: function() {
- var
- values = module.get.values(),
- remoteValues = false
- ;
- if(values) {
- if(typeof values == 'string') {
- values = [values];
- }
- $.each(values, function(index, value) {
- var
- name = module.read.remoteData(value)
- ;
- module.verbose('Restoring value from session data', name, value);
- if(name) {
- if(!remoteValues) {
- remoteValues = {};
- }
- remoteValues[value] = name;
- }
- });
- }
- return remoteValues;
- },
- choiceText: function($choice, preserveHTML) {
- preserveHTML = (preserveHTML !== undefined)
- ? preserveHTML
- : settings.preserveHTML
- ;
- if($choice) {
- if($choice.find(selector.menu).length > 0) {
- module.verbose('Retrieving text of element with sub-menu');
- $choice = $choice.clone();
- $choice.find(selector.menu).remove();
- $choice.find(selector.menuIcon).remove();
- }
- return ($choice.data(metadata.text) !== undefined)
- ? $choice.data(metadata.text)
- : (preserveHTML)
- ? $choice.html().trim()
- : $choice.text().trim()
- ;
- }
- },
- choiceValue: function($choice, choiceText) {
- choiceText = choiceText || module.get.choiceText($choice);
- if(!$choice) {
- return false;
- }
- return ($choice.data(metadata.value) !== undefined)
- ? String( $choice.data(metadata.value) )
- : (typeof choiceText === 'string')
- ? String(
- settings.ignoreSearchCase
- ? choiceText.toLowerCase()
- : choiceText
- ).trim()
- : String(choiceText)
- ;
- },
- inputEvent: function() {
- var
- input = $search[0]
- ;
- if(input) {
- return (input.oninput !== undefined)
- ? 'input'
- : (input.onpropertychange !== undefined)
- ? 'propertychange'
- : 'keyup'
- ;
- }
- return false;
- },
- selectValues: function() {
- var
- select = {},
- oldGroup = [],
- values = []
- ;
- $module
- .find('option')
- .each(function() {
- var
- $option = $(this),
- name = $option.html(),
- disabled = $option.attr('disabled'),
- value = ( $option.attr('value') !== undefined )
- ? $option.attr('value')
- : name,
- text = ( $option.data(metadata.text) !== undefined )
- ? $option.data(metadata.text)
- : name,
- group = $option.parent('optgroup')
- ;
- if(settings.placeholder === 'auto' && value === '') {
- select.placeholder = name;
- }
- else {
- if(group.length !== oldGroup.length || group[0] !== oldGroup[0]) {
- values.push({
- type: 'header',
- divider: settings.headerDivider,
- name: group.attr('label') || ''
- });
- oldGroup = group;
- }
- values.push({
- name : name,
- value : value,
- text : text,
- disabled : disabled
- });
- }
- })
- ;
- if(settings.placeholder && settings.placeholder !== 'auto') {
- module.debug('Setting placeholder value to', settings.placeholder);
- select.placeholder = settings.placeholder;
- }
- if(settings.sortSelect) {
- if(settings.sortSelect === true) {
- values.sort(function(a, b) {
- return a.name.localeCompare(b.name);
- });
- } else if(settings.sortSelect === 'natural') {
- values.sort(function(a, b) {
- return (a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
- });
- } else if($.isFunction(settings.sortSelect)) {
- values.sort(settings.sortSelect);
- }
- select[fields.values] = values;
- module.debug('Retrieved and sorted values from select', select);
- }
- else {
- select[fields.values] = values;
- module.debug('Retrieved values from select', select);
- }
- return select;
- },
- activeItem: function() {
- return $item.filter('.' + className.active);
- },
- selectedItem: function() {
- var
- $selectedItem = $item.not(selector.unselectable).filter('.' + className.selected)
- ;
- return ($selectedItem.length > 0)
- ? $selectedItem
- : $item.eq(0)
- ;
- },
- itemWithAdditions: function(value) {
- var
- $items = module.get.item(value),
- $userItems = module.create.userChoice(value),
- hasUserItems = ($userItems && $userItems.length > 0)
- ;
- if(hasUserItems) {
- $items = ($items.length > 0)
- ? $items.add($userItems)
- : $userItems
- ;
- }
- return $items;
- },
- item: function(value, strict) {
- var
- $selectedItem = false,
- shouldSearch,
- isMultiple
- ;
- value = (value !== undefined)
- ? value
- : ( module.get.values() !== undefined)
- ? module.get.values()
- : module.get.text()
- ;
- isMultiple = (module.is.multiple() && Array.isArray(value));
- shouldSearch = (isMultiple)
- ? (value.length > 0)
- : (value !== undefined && value !== null)
- ;
- strict = (value === '' || value === false || value === true)
- ? true
- : strict || false
- ;
- if(shouldSearch) {
- $item
- .each(function() {
- var
- $choice = $(this),
- optionText = module.get.choiceText($choice),
- optionValue = module.get.choiceValue($choice, optionText)
- ;
- // safe early exit
- if(optionValue === null || optionValue === undefined) {
- return;
- }
- if(isMultiple) {
- if($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(function(v){return String(v);})) !== -1) {
- $selectedItem = ($selectedItem)
- ? $selectedItem.add($choice)
- : $choice
- ;
- }
- }
- else if(strict) {
- module.verbose('Ambiguous dropdown value using strict type check', $choice, value);
- if( optionValue === value) {
- $selectedItem = $choice;
- return true;
- }
- }
- else {
- if(settings.ignoreCase) {
- optionValue = optionValue.toLowerCase();
- value = value.toLowerCase();
- }
- if(module.escape.htmlEntities(String(optionValue)) === module.escape.htmlEntities(String(value))) {
- module.verbose('Found select item by value', optionValue, value);
- $selectedItem = $choice;
- return true;
- }
- }
- })
- ;
- }
- return $selectedItem;
- }
- },
-
- check: {
- maxSelections: function(selectionCount) {
- if(settings.maxSelections) {
- selectionCount = (selectionCount !== undefined)
- ? selectionCount
- : module.get.selectionCount()
- ;
- if(selectionCount >= settings.maxSelections) {
- module.debug('Maximum selection count reached');
- if(settings.useLabels) {
- $item.addClass(className.filtered);
- module.add.message(message.maxSelections);
- }
- return true;
- }
- else {
- module.verbose('No longer at maximum selection count');
- module.remove.message();
- module.remove.filteredItem();
- if(module.is.searchSelection()) {
- module.filterItems();
- }
- return false;
- }
- }
- return true;
- },
- disabled: function(){
- $search.attr('tabindex',module.is.disabled() ? -1 : 0);
- }
- },
-
- restore: {
- defaults: function(preventChangeTrigger) {
- module.clear(preventChangeTrigger);
- module.restore.defaultText();
- module.restore.defaultValue();
- },
- defaultText: function() {
- var
- defaultText = module.get.defaultText(),
- placeholderText = module.get.placeholderText
- ;
- if(defaultText === placeholderText) {
- module.debug('Restoring default placeholder text', defaultText);
- module.set.placeholderText(defaultText);
- }
- else {
- module.debug('Restoring default text', defaultText);
- module.set.text(defaultText);
- }
- },
- placeholderText: function() {
- module.set.placeholderText();
- },
- defaultValue: function() {
- var
- defaultValue = module.get.defaultValue()
- ;
- if(defaultValue !== undefined) {
- module.debug('Restoring default value', defaultValue);
- if(defaultValue !== '') {
- module.set.value(defaultValue);
- module.set.selected();
- }
- else {
- module.remove.activeItem();
- module.remove.selectedItem();
- }
- }
- },
- labels: function() {
- if(settings.allowAdditions) {
- if(!settings.useLabels) {
- module.error(error.labels);
- settings.useLabels = true;
- }
- module.debug('Restoring selected values');
- module.create.userLabels();
- }
- module.check.maxSelections();
- },
- selected: function() {
- module.restore.values();
- if(module.is.multiple()) {
- module.debug('Restoring previously selected values and labels');
- module.restore.labels();
- }
- else {
- module.debug('Restoring previously selected values');
- }
- },
- values: function() {
- // prevents callbacks from occurring on initial load
- module.set.initialLoad();
- if(settings.apiSettings && settings.saveRemoteData && module.get.remoteValues()) {
- module.restore.remoteValues();
- }
- else {
- module.set.selected();
- }
- var value = module.get.value();
- if(value && value !== '' && !(Array.isArray(value) && value.length === 0)) {
- $input.removeClass(className.noselection);
- } else {
- $input.addClass(className.noselection);
- }
- module.remove.initialLoad();
- },
- remoteValues: function() {
- var
- values = module.get.remoteValues()
- ;
- module.debug('Recreating selected from session data', values);
- if(values) {
- if( module.is.single() ) {
- $.each(values, function(value, name) {
- module.set.text(name);
- });
- }
- else {
- $.each(values, function(value, name) {
- module.add.label(value, name);
- });
- }
- }
- }
- },
-
- read: {
- remoteData: function(value) {
- var
- name
- ;
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- name = sessionStorage.getItem(value);
- return (name !== undefined)
- ? name
- : false
- ;
- }
- },
-
- save: {
- defaults: function() {
- module.save.defaultText();
- module.save.placeholderText();
- module.save.defaultValue();
- },
- defaultValue: function() {
- var
- value = module.get.value()
- ;
- module.verbose('Saving default value as', value);
- $module.data(metadata.defaultValue, value);
- },
- defaultText: function() {
- var
- text = module.get.text()
- ;
- module.verbose('Saving default text as', text);
- $module.data(metadata.defaultText, text);
- },
- placeholderText: function() {
- var
- text
- ;
- if(settings.placeholder !== false && $text.hasClass(className.placeholder)) {
- text = module.get.text();
- module.verbose('Saving placeholder text as', text);
- $module.data(metadata.placeholderText, text);
- }
- },
- remoteData: function(name, value) {
- if(window.Storage === undefined) {
- module.error(error.noStorage);
- return;
- }
- module.verbose('Saving remote data to session storage', value, name);
- sessionStorage.setItem(value, name);
- }
- },
-
- clear: function(preventChangeTrigger) {
- if(module.is.multiple() && settings.useLabels) {
- module.remove.labels();
- }
- else {
- module.remove.activeItem();
- module.remove.selectedItem();
- module.remove.filteredItem();
- }
- module.set.placeholderText();
- module.clearValue(preventChangeTrigger);
- },
-
- clearValue: function(preventChangeTrigger) {
- module.set.value('', null, null, preventChangeTrigger);
- },
-
- scrollPage: function(direction, $selectedItem) {
- var
- $currentItem = $selectedItem || module.get.selectedItem(),
- $menu = $currentItem.closest(selector.menu),
- menuHeight = $menu.outerHeight(),
- currentScroll = $menu.scrollTop(),
- itemHeight = $item.eq(0).outerHeight(),
- itemsPerPage = Math.floor(menuHeight / itemHeight),
- maxScroll = $menu.prop('scrollHeight'),
- newScroll = (direction == 'up')
- ? currentScroll - (itemHeight * itemsPerPage)
- : currentScroll + (itemHeight * itemsPerPage),
- $selectableItem = $item.not(selector.unselectable),
- isWithinRange,
- $nextSelectedItem,
- elementIndex
- ;
- elementIndex = (direction == 'up')
- ? $selectableItem.index($currentItem) - itemsPerPage
- : $selectableItem.index($currentItem) + itemsPerPage
- ;
- isWithinRange = (direction == 'up')
- ? (elementIndex >= 0)
- : (elementIndex < $selectableItem.length)
- ;
- $nextSelectedItem = (isWithinRange)
- ? $selectableItem.eq(elementIndex)
- : (direction == 'up')
- ? $selectableItem.first()
- : $selectableItem.last()
- ;
- if($nextSelectedItem.length > 0) {
- module.debug('Scrolling page', direction, $nextSelectedItem);
- $currentItem
- .removeClass(className.selected)
- ;
- $nextSelectedItem
- .addClass(className.selected)
- ;
- if(settings.selectOnKeydown && module.is.single()) {
- module.set.selectedItem($nextSelectedItem);
- }
- $menu
- .scrollTop(newScroll)
- ;
- }
- },
-
- set: {
- filtered: function() {
- var
- isMultiple = module.is.multiple(),
- isSearch = module.is.searchSelection(),
- isSearchMultiple = (isMultiple && isSearch),
- searchValue = (isSearch)
- ? module.get.query()
- : '',
- hasSearchValue = (typeof searchValue === 'string' && searchValue.length > 0),
- searchWidth = module.get.searchWidth(),
- valueIsSet = searchValue !== ''
- ;
- if(isMultiple && hasSearchValue) {
- module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
- $search.css('width', searchWidth);
- }
- if(hasSearchValue || (isSearchMultiple && valueIsSet)) {
- module.verbose('Hiding placeholder text');
- $text.addClass(className.filtered);
- }
- else if(!isMultiple || (isSearchMultiple && !valueIsSet)) {
- module.verbose('Showing placeholder text');
- $text.removeClass(className.filtered);
- }
- },
- empty: function() {
- $module.addClass(className.empty);
- },
- loading: function() {
- $module.addClass(className.loading);
- },
- placeholderText: function(text) {
- text = text || module.get.placeholderText();
- module.debug('Setting placeholder text', text);
- module.set.text(text);
- $text.addClass(className.placeholder);
- },
- tabbable: function() {
- if( module.is.searchSelection() ) {
- module.debug('Added tabindex to searchable dropdown');
- $search
- .val('')
- ;
- module.check.disabled();
- $menu
- .attr('tabindex', -1)
- ;
- }
- else {
- module.debug('Added tabindex to dropdown');
- if( $module.attr('tabindex') === undefined) {
- $module
- .attr('tabindex', 0)
- ;
- $menu
- .attr('tabindex', -1)
- ;
- }
- }
- },
- initialLoad: function() {
- module.verbose('Setting initial load');
- initialLoad = true;
- },
- activeItem: function($item) {
- if( settings.allowAdditions && $item.filter(selector.addition).length > 0 ) {
- $item.addClass(className.filtered);
- }
- else {
- $item.addClass(className.active);
- }
- },
- partialSearch: function(text) {
- var
- length = module.get.query().length
- ;
- $search.val( text.substr(0, length));
- },
- scrollPosition: function($item, forceScroll) {
- var
- edgeTolerance = 5,
- $menu,
- hasActive,
- offset,
- itemHeight,
- itemOffset,
- menuOffset,
- menuScroll,
- menuHeight,
- abovePage,
- belowPage
- ;
-
- $item = $item || module.get.selectedItem();
- $menu = $item.closest(selector.menu);
- hasActive = ($item && $item.length > 0);
- forceScroll = (forceScroll !== undefined)
- ? forceScroll
- : false
- ;
- if(module.get.activeItem().length === 0){
- forceScroll = false;
- }
- if($item && $menu.length > 0 && hasActive) {
- itemOffset = $item.position().top;
-
- $menu.addClass(className.loading);
- menuScroll = $menu.scrollTop();
- menuOffset = $menu.offset().top;
- itemOffset = $item.offset().top;
- offset = menuScroll - menuOffset + itemOffset;
- if(!forceScroll) {
- menuHeight = $menu.height();
- belowPage = menuScroll + menuHeight < (offset + edgeTolerance);
- abovePage = ((offset - edgeTolerance) < menuScroll);
- }
- module.debug('Scrolling to active item', offset);
- if(forceScroll || abovePage || belowPage) {
- $menu.scrollTop(offset);
- }
- $menu.removeClass(className.loading);
- }
- },
- text: function(text) {
- if(settings.action === 'combo') {
- module.debug('Changing combo button text', text, $combo);
- if(settings.preserveHTML) {
- $combo.html(text);
- }
- else {
- $combo.text(text);
- }
- }
- else if(settings.action === 'activate') {
- if(text !== module.get.placeholderText()) {
- $text.removeClass(className.placeholder);
- }
- module.debug('Changing text', text, $text);
- $text
- .removeClass(className.filtered)
- ;
- if(settings.preserveHTML) {
- $text.html(text);
- }
- else {
- $text.text(text);
- }
- }
- },
- selectedItem: function($item) {
- var
- value = module.get.choiceValue($item),
- searchText = module.get.choiceText($item, false),
- text = module.get.choiceText($item, true)
- ;
- module.debug('Setting user selection to item', $item);
- module.remove.activeItem();
- module.set.partialSearch(searchText);
- module.set.activeItem($item);
- module.set.selected(value, $item);
- module.set.text(text);
- },
- selectedLetter: function(letter) {
- var
- $selectedItem = $item.filter('.' + className.selected),
- alreadySelectedLetter = $selectedItem.length > 0 && module.has.firstLetter($selectedItem, letter),
- $nextValue = false,
- $nextItem
- ;
- // check next of same letter
- if(alreadySelectedLetter) {
- $nextItem = $selectedItem.nextAll($item).eq(0);
- if( module.has.firstLetter($nextItem, letter) ) {
- $nextValue = $nextItem;
- }
- }
- // check all values
- if(!$nextValue) {
- $item
- .each(function(){
- if(module.has.firstLetter($(this), letter)) {
- $nextValue = $(this);
- return false;
- }
- })
- ;
- }
- // set next value
- if($nextValue) {
- module.verbose('Scrolling to next value with letter', letter);
- module.set.scrollPosition($nextValue);
- $selectedItem.removeClass(className.selected);
- $nextValue.addClass(className.selected);
- if(settings.selectOnKeydown && module.is.single()) {
- module.set.selectedItem($nextValue);
- }
- }
- },
- direction: function($menu) {
- if(settings.direction == 'auto') {
- // reset position, remove upward if it's base menu
- if (!$menu) {
- module.remove.upward();
- } else if (module.is.upward($menu)) {
- //we need make sure when make assertion openDownward for $menu, $menu does not have upward class
- module.remove.upward($menu);
- }
-
- if(module.can.openDownward($menu)) {
- module.remove.upward($menu);
- }
- else {
- module.set.upward($menu);
- }
- if(!module.is.leftward($menu) && !module.can.openRightward($menu)) {
- module.set.leftward($menu);
- }
- }
- else if(settings.direction == 'upward') {
- module.set.upward($menu);
- }
- },
- upward: function($currentMenu) {
- var $element = $currentMenu || $module;
- $element.addClass(className.upward);
- },
- leftward: function($currentMenu) {
- var $element = $currentMenu || $menu;
- $element.addClass(className.leftward);
- },
- value: function(value, text, $selected, preventChangeTrigger) {
- if(value !== undefined && value !== '' && !(Array.isArray(value) && value.length === 0)) {
- $input.removeClass(className.noselection);
- } else {
- $input.addClass(className.noselection);
- }
- var
- escapedValue = module.escape.value(value),
- hasInput = ($input.length > 0),
- currentValue = module.get.values(),
- stringValue = (value !== undefined)
- ? String(value)
- : value,
- newValue
- ;
- if(hasInput) {
- if(!settings.allowReselection && stringValue == currentValue) {
- module.verbose('Skipping value update already same value', value, currentValue);
- if(!module.is.initialLoad()) {
- return;
- }
- }
-
- if( module.is.single() && module.has.selectInput() && module.can.extendSelect() ) {
- module.debug('Adding user option', value);
- module.add.optionValue(value);
- }
- module.debug('Updating input value', escapedValue, currentValue);
- internalChange = true;
- $input
- .val(escapedValue)
- ;
- if(settings.fireOnInit === false && module.is.initialLoad()) {
- module.debug('Input native change event ignored on initial load');
- }
- else if(preventChangeTrigger !== true) {
- module.trigger.change();
- }
- internalChange = false;
- }
- else {
- module.verbose('Storing value in metadata', escapedValue, $input);
- if(escapedValue !== currentValue) {
- $module.data(metadata.value, stringValue);
- }
- }
- if(settings.fireOnInit === false && module.is.initialLoad()) {
- module.verbose('No callback on initial load', settings.onChange);
- }
- else if(preventChangeTrigger !== true) {
- settings.onChange.call(element, value, text, $selected);
- }
- },
- active: function() {
- $module
- .addClass(className.active)
- ;
- },
- multiple: function() {
- $module.addClass(className.multiple);
- },
- visible: function() {
- $module.addClass(className.visible);
- },
- exactly: function(value, $selectedItem) {
- module.debug('Setting selected to exact values');
- module.clear();
- module.set.selected(value, $selectedItem);
- },
- selected: function(value, $selectedItem) {
- var
- isMultiple = module.is.multiple()
- ;
- $selectedItem = (settings.allowAdditions)
- ? $selectedItem || module.get.itemWithAdditions(value)
- : $selectedItem || module.get.item(value)
- ;
- if(!$selectedItem) {
- return;
- }
- module.debug('Setting selected menu item to', $selectedItem);
- if(module.is.multiple()) {
- module.remove.searchWidth();
- }
- if(module.is.single()) {
- module.remove.activeItem();
- module.remove.selectedItem();
- }
- else if(settings.useLabels) {
- module.remove.selectedItem();
- }
- // select each item
- $selectedItem
- .each(function() {
- var
- $selected = $(this),
- selectedText = module.get.choiceText($selected),
- selectedValue = module.get.choiceValue($selected, selectedText),
-
- isFiltered = $selected.hasClass(className.filtered),
- isActive = $selected.hasClass(className.active),
- isUserValue = $selected.hasClass(className.addition),
- shouldAnimate = (isMultiple && $selectedItem.length == 1)
- ;
- if(isMultiple) {
- if(!isActive || isUserValue) {
- if(settings.apiSettings && settings.saveRemoteData) {
- module.save.remoteData(selectedText, selectedValue);
- }
- if(settings.useLabels) {
- module.add.label(selectedValue, selectedText, shouldAnimate);
- module.add.value(selectedValue, selectedText, $selected);
- module.set.activeItem($selected);
- module.filterActive();
- module.select.nextAvailable($selectedItem);
- }
- else {
- module.add.value(selectedValue, selectedText, $selected);
- module.set.text(module.add.variables(message.count));
- module.set.activeItem($selected);
- }
- }
- else if(!isFiltered && (settings.useLabels || selectActionActive)) {
- module.debug('Selected active value, removing label');
- module.remove.selected(selectedValue);
- }
- }
- else {
- if(settings.apiSettings && settings.saveRemoteData) {
- module.save.remoteData(selectedText, selectedValue);
- }
- module.set.text(selectedText);
- module.set.value(selectedValue, selectedText, $selected);
- $selected
- .addClass(className.active)
- .addClass(className.selected)
- ;
- }
- })
- ;
- module.remove.searchTerm();
- }
- },
-
- add: {
- label: function(value, text, shouldAnimate) {
- var
- $next = module.is.searchSelection()
- ? $search
- : $text,
- escapedValue = module.escape.value(value),
- $label
- ;
- if(settings.ignoreCase) {
- escapedValue = escapedValue.toLowerCase();
- }
- $label = $('<a />')
- .addClass(className.label)
- .attr('data-' + metadata.value, escapedValue)
- .html(templates.label(escapedValue, text, settings.preserveHTML, settings.className))
- ;
- $label = settings.onLabelCreate.call($label, escapedValue, text);
-
- if(module.has.label(value)) {
- module.debug('User selection already exists, skipping', escapedValue);
- return;
- }
- if(settings.label.variation) {
- $label.addClass(settings.label.variation);
- }
- if(shouldAnimate === true) {
- module.debug('Animating in label', $label);
- $label
- .addClass(className.hidden)
- .insertBefore($next)
- .transition({
- animation : settings.label.transition,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.label.duration
- })
- ;
- }
- else {
- module.debug('Adding selection label', $label);
- $label
- .insertBefore($next)
- ;
- }
- },
- message: function(message) {
- var
- $message = $menu.children(selector.message),
- html = settings.templates.message(module.add.variables(message))
- ;
- if($message.length > 0) {
- $message
- .html(html)
- ;
- }
- else {
- $message = $('<div/>')
- .html(html)
- .addClass(className.message)
- .appendTo($menu)
- ;
- }
- },
- optionValue: function(value) {
- var
- escapedValue = module.escape.value(value),
- $option = $input.find('option[value="' + module.escape.string(escapedValue) + '"]'),
- hasOption = ($option.length > 0)
- ;
- if(hasOption) {
- return;
- }
- // temporarily disconnect observer
- module.disconnect.selectObserver();
- if( module.is.single() ) {
- module.verbose('Removing previous user addition');
- $input.find('option.' + className.addition).remove();
- }
- $('<option/>')
- .prop('value', escapedValue)
- .addClass(className.addition)
- .html(value)
- .appendTo($input)
- ;
- module.verbose('Adding user addition as an <option>', value);
- module.observe.select();
- },
- userSuggestion: function(value) {
- var
- $addition = $menu.children(selector.addition),
- $existingItem = module.get.item(value),
- alreadyHasValue = $existingItem && $existingItem.not(selector.addition).length,
- hasUserSuggestion = $addition.length > 0,
- html
- ;
- if(settings.useLabels && module.has.maxSelections()) {
- return;
- }
- if(value === '' || alreadyHasValue) {
- $addition.remove();
- return;
- }
- if(hasUserSuggestion) {
- $addition
- .data(metadata.value, value)
- .data(metadata.text, value)
- .attr('data-' + metadata.value, value)
- .attr('data-' + metadata.text, value)
- .removeClass(className.filtered)
- ;
- if(!settings.hideAdditions) {
- html = settings.templates.addition( module.add.variables(message.addResult, value) );
- $addition
- .html(html)
- ;
- }
- module.verbose('Replacing user suggestion with new value', $addition);
- }
- else {
- $addition = module.create.userChoice(value);
- $addition
- .prependTo($menu)
- ;
- module.verbose('Adding item choice to menu corresponding with user choice addition', $addition);
- }
- if(!settings.hideAdditions || module.is.allFiltered()) {
- $addition
- .addClass(className.selected)
- .siblings()
- .removeClass(className.selected)
- ;
- }
- module.refreshItems();
- },
- variables: function(message, term) {
- var
- hasCount = (message.search('{count}') !== -1),
- hasMaxCount = (message.search('{maxCount}') !== -1),
- hasTerm = (message.search('{term}') !== -1),
- count,
- query
- ;
- module.verbose('Adding templated variables to message', message);
- if(hasCount) {
- count = module.get.selectionCount();
- message = message.replace('{count}', count);
- }
- if(hasMaxCount) {
- count = module.get.selectionCount();
- message = message.replace('{maxCount}', settings.maxSelections);
- }
- if(hasTerm) {
- query = term || module.get.query();
- message = message.replace('{term}', query);
- }
- return message;
- },
- value: function(addedValue, addedText, $selectedItem) {
- var
- currentValue = module.get.values(),
- newValue
- ;
- if(module.has.value(addedValue)) {
- module.debug('Value already selected');
- return;
- }
- if(addedValue === '') {
- module.debug('Cannot select blank values from multiselect');
- return;
- }
- // extend current array
- if(Array.isArray(currentValue)) {
- newValue = currentValue.concat([addedValue]);
- newValue = module.get.uniqueArray(newValue);
- }
- else {
- newValue = [addedValue];
- }
- // add values
- if( module.has.selectInput() ) {
- if(module.can.extendSelect()) {
- module.debug('Adding value to select', addedValue, newValue, $input);
- module.add.optionValue(addedValue);
- }
- }
- else {
- newValue = newValue.join(settings.delimiter);
- module.debug('Setting hidden input to delimited value', newValue, $input);
- }
-
- if(settings.fireOnInit === false && module.is.initialLoad()) {
- module.verbose('Skipping onadd callback on initial load', settings.onAdd);
- }
- else {
- settings.onAdd.call(element, addedValue, addedText, $selectedItem);
- }
- module.set.value(newValue, addedText, $selectedItem);
- module.check.maxSelections();
- },
- },
-
- remove: {
- active: function() {
- $module.removeClass(className.active);
- },
- activeLabel: function() {
- $module.find(selector.label).removeClass(className.active);
- },
- empty: function() {
- $module.removeClass(className.empty);
- },
- loading: function() {
- $module.removeClass(className.loading);
- },
- initialLoad: function() {
- initialLoad = false;
- },
- upward: function($currentMenu) {
- var $element = $currentMenu || $module;
- $element.removeClass(className.upward);
- },
- leftward: function($currentMenu) {
- var $element = $currentMenu || $menu;
- $element.removeClass(className.leftward);
- },
- visible: function() {
- $module.removeClass(className.visible);
- },
- activeItem: function() {
- $item.removeClass(className.active);
- },
- filteredItem: function() {
- if(settings.useLabels && module.has.maxSelections() ) {
- return;
- }
- if(settings.useLabels && module.is.multiple()) {
- $item.not('.' + className.active).removeClass(className.filtered);
- }
- else {
- $item.removeClass(className.filtered);
- }
- if(settings.hideDividers) {
- $divider.removeClass(className.hidden);
- }
- module.remove.empty();
- },
- optionValue: function(value) {
- var
- escapedValue = module.escape.value(value),
- $option = $input.find('option[value="' + module.escape.string(escapedValue) + '"]'),
- hasOption = ($option.length > 0)
- ;
- if(!hasOption || !$option.hasClass(className.addition)) {
- return;
- }
- // temporarily disconnect observer
- if(selectObserver) {
- selectObserver.disconnect();
- module.verbose('Temporarily disconnecting mutation observer');
- }
- $option.remove();
- module.verbose('Removing user addition as an <option>', escapedValue);
- if(selectObserver) {
- selectObserver.observe($input[0], {
- childList : true,
- subtree : true
- });
- }
- },
- message: function() {
- $menu.children(selector.message).remove();
- },
- searchWidth: function() {
- $search.css('width', '');
- },
- searchTerm: function() {
- module.verbose('Cleared search term');
- $search.val('');
- module.set.filtered();
- },
- userAddition: function() {
- $item.filter(selector.addition).remove();
- },
- selected: function(value, $selectedItem) {
- $selectedItem = (settings.allowAdditions)
- ? $selectedItem || module.get.itemWithAdditions(value)
- : $selectedItem || module.get.item(value)
- ;
-
- if(!$selectedItem) {
- return false;
- }
-
- $selectedItem
- .each(function() {
- var
- $selected = $(this),
- selectedText = module.get.choiceText($selected),
- selectedValue = module.get.choiceValue($selected, selectedText)
- ;
- if(module.is.multiple()) {
- if(settings.useLabels) {
- module.remove.value(selectedValue, selectedText, $selected);
- module.remove.label(selectedValue);
- }
- else {
- module.remove.value(selectedValue, selectedText, $selected);
- if(module.get.selectionCount() === 0) {
- module.set.placeholderText();
- }
- else {
- module.set.text(module.add.variables(message.count));
- }
- }
- }
- else {
- module.remove.value(selectedValue, selectedText, $selected);
- }
- $selected
- .removeClass(className.filtered)
- .removeClass(className.active)
- ;
- if(settings.useLabels) {
- $selected.removeClass(className.selected);
- }
- })
- ;
- },
- selectedItem: function() {
- $item.removeClass(className.selected);
- },
- value: function(removedValue, removedText, $removedItem) {
- var
- values = module.get.values(),
- newValue
- ;
- removedValue = module.escape.htmlEntities(removedValue);
- if( module.has.selectInput() ) {
- module.verbose('Input is <select> removing selected option', removedValue);
- newValue = module.remove.arrayValue(removedValue, values);
- module.remove.optionValue(removedValue);
- }
- else {
- module.verbose('Removing from delimited values', removedValue);
- newValue = module.remove.arrayValue(removedValue, values);
- newValue = newValue.join(settings.delimiter);
- }
- if(settings.fireOnInit === false && module.is.initialLoad()) {
- module.verbose('No callback on initial load', settings.onRemove);
- }
- else {
- settings.onRemove.call(element, removedValue, removedText, $removedItem);
- }
- module.set.value(newValue, removedText, $removedItem);
- module.check.maxSelections();
- },
- arrayValue: function(removedValue, values) {
- if( !Array.isArray(values) ) {
- values = [values];
- }
- values = $.grep(values, function(value){
- return (removedValue != value);
- });
- module.verbose('Removed value from delimited string', removedValue, values);
- return values;
- },
- label: function(value, shouldAnimate) {
- var
- $labels = $module.find(selector.label),
- $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(settings.ignoreCase ? value.toLowerCase() : value) +'"]')
- ;
- module.verbose('Removing label', $removedLabel);
- $removedLabel.remove();
- },
- activeLabels: function($activeLabels) {
- $activeLabels = $activeLabels || $module.find(selector.label).filter('.' + className.active);
- module.verbose('Removing active label selections', $activeLabels);
- module.remove.labels($activeLabels);
- },
- labels: function($labels) {
- $labels = $labels || $module.find(selector.label);
- module.verbose('Removing labels', $labels);
- $labels
- .each(function(){
- var
- $label = $(this),
- value = $label.data(metadata.value),
- stringValue = (value !== undefined)
- ? String(value)
- : value,
- isUserValue = module.is.userValue(stringValue)
- ;
- if(settings.onLabelRemove.call($label, value) === false) {
- module.debug('Label remove callback cancelled removal');
- return;
- }
- module.remove.message();
- if(isUserValue) {
- module.remove.value(stringValue);
- module.remove.label(stringValue);
- }
- else {
- // selected will also remove label
- module.remove.selected(stringValue);
- }
- })
- ;
- },
- tabbable: function() {
- if( module.is.searchSelection() ) {
- module.debug('Searchable dropdown initialized');
- $search
- .removeAttr('tabindex')
- ;
- $menu
- .removeAttr('tabindex')
- ;
- }
- else {
- module.debug('Simple selection dropdown initialized');
- $module
- .removeAttr('tabindex')
- ;
- $menu
- .removeAttr('tabindex')
- ;
- }
- },
- diacritics: function(text) {
- return settings.ignoreDiacritics ? text.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : text;
- }
- },
-
- has: {
- menuSearch: function() {
- return (module.has.search() && $search.closest($menu).length > 0);
- },
- clearItem: function() {
- return ($clear.length > 0);
- },
- search: function() {
- return ($search.length > 0);
- },
- sizer: function() {
- return ($sizer.length > 0);
- },
- selectInput: function() {
- return ( $input.is('select') );
- },
- minCharacters: function(searchTerm) {
- if(settings.minCharacters && !iconClicked) {
- searchTerm = (searchTerm !== undefined)
- ? String(searchTerm)
- : String(module.get.query())
- ;
- return (searchTerm.length >= settings.minCharacters);
- }
- iconClicked=false;
- return true;
- },
- firstLetter: function($item, letter) {
- var
- text,
- firstLetter
- ;
- if(!$item || $item.length === 0 || typeof letter !== 'string') {
- return false;
- }
- text = module.get.choiceText($item, false);
- letter = letter.toLowerCase();
- firstLetter = String(text).charAt(0).toLowerCase();
- return (letter == firstLetter);
- },
- input: function() {
- return ($input.length > 0);
- },
- items: function() {
- return ($item.length > 0);
- },
- menu: function() {
- return ($menu.length > 0);
- },
- message: function() {
- return ($menu.children(selector.message).length !== 0);
- },
- label: function(value) {
- var
- escapedValue = module.escape.value(value),
- $labels = $module.find(selector.label)
- ;
- if(settings.ignoreCase) {
- escapedValue = escapedValue.toLowerCase();
- }
- return ($labels.filter('[data-' + metadata.value + '="' + module.escape.string(escapedValue) +'"]').length > 0);
- },
- maxSelections: function() {
- return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections);
- },
- allResultsFiltered: function() {
- var
- $normalResults = $item.not(selector.addition)
- ;
- return ($normalResults.filter(selector.unselectable).length === $normalResults.length);
- },
- userSuggestion: function() {
- return ($menu.children(selector.addition).length > 0);
- },
- query: function() {
- return (module.get.query() !== '');
- },
- value: function(value) {
- return (settings.ignoreCase)
- ? module.has.valueIgnoringCase(value)
- : module.has.valueMatchingCase(value)
- ;
- },
- valueMatchingCase: function(value) {
- var
- values = module.get.values(),
- hasValue = Array.isArray(values)
- ? values && ($.inArray(value, values) !== -1)
- : (values == value)
- ;
- return (hasValue)
- ? true
- : false
- ;
- },
- valueIgnoringCase: function(value) {
- var
- values = module.get.values(),
- hasValue = false
- ;
- if(!Array.isArray(values)) {
- values = [values];
- }
- $.each(values, function(index, existingValue) {
- if(String(value).toLowerCase() == String(existingValue).toLowerCase()) {
- hasValue = true;
- return false;
- }
- });
- return hasValue;
- }
- },
-
- is: {
- active: function() {
- return $module.hasClass(className.active);
- },
- animatingInward: function() {
- return $menu.transition('is inward');
- },
- animatingOutward: function() {
- return $menu.transition('is outward');
- },
- bubbledLabelClick: function(event) {
- return $(event.target).is('select, input') && $module.closest('label').length > 0;
- },
- bubbledIconClick: function(event) {
- return $(event.target).closest($icon).length > 0;
- },
- alreadySetup: function() {
- return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0);
- },
- animating: function($subMenu) {
- return ($subMenu)
- ? $subMenu.transition && $subMenu.transition('is animating')
- : $menu.transition && $menu.transition('is animating')
- ;
- },
- leftward: function($subMenu) {
- var $selectedMenu = $subMenu || $menu;
- return $selectedMenu.hasClass(className.leftward);
- },
- clearable: function() {
- return ($module.hasClass(className.clearable) || settings.clearable);
- },
- disabled: function() {
- return $module.hasClass(className.disabled);
- },
- focused: function() {
- return (document.activeElement === $module[0]);
- },
- focusedOnSearch: function() {
- return (document.activeElement === $search[0]);
- },
- allFiltered: function() {
- return( (module.is.multiple() || module.has.search()) && !(settings.hideAdditions == false && module.has.userSuggestion()) && !module.has.message() && module.has.allResultsFiltered() );
- },
- hidden: function($subMenu) {
- return !module.is.visible($subMenu);
- },
- initialLoad: function() {
- return initialLoad;
- },
- inObject: function(needle, object) {
- var
- found = false
- ;
- $.each(object, function(index, property) {
- if(property == needle) {
- found = true;
- return true;
- }
- });
- return found;
- },
- multiple: function() {
- return $module.hasClass(className.multiple);
- },
- remote: function() {
- return settings.apiSettings && module.can.useAPI();
- },
- single: function() {
- return !module.is.multiple();
- },
- selectMutation: function(mutations) {
- var
- selectChanged = false
- ;
- $.each(mutations, function(index, mutation) {
- if($(mutation.target).is('select') || $(mutation.addedNodes).is('select')) {
- selectChanged = true;
- return false;
- }
- });
- return selectChanged;
- },
- search: function() {
- return $module.hasClass(className.search);
- },
- searchSelection: function() {
- return ( module.has.search() && $search.parent(selector.dropdown).length === 1 );
- },
- selection: function() {
- return $module.hasClass(className.selection);
- },
- userValue: function(value) {
- return ($.inArray(value, module.get.userValues()) !== -1);
- },
- upward: function($menu) {
- var $element = $menu || $module;
- return $element.hasClass(className.upward);
- },
- visible: function($subMenu) {
- return ($subMenu)
- ? $subMenu.hasClass(className.visible)
- : $menu.hasClass(className.visible)
- ;
- },
- verticallyScrollableContext: function() {
- var
- overflowY = ($context.get(0) !== window)
- ? $context.css('overflow-y')
- : false
- ;
- return (overflowY == 'auto' || overflowY == 'scroll');
- },
- horizontallyScrollableContext: function() {
- var
- overflowX = ($context.get(0) !== window)
- ? $context.css('overflow-X')
- : false
- ;
- return (overflowX == 'auto' || overflowX == 'scroll');
- }
- },
-
- can: {
- activate: function($item) {
- if(settings.useLabels) {
- return true;
- }
- if(!module.has.maxSelections()) {
- return true;
- }
- if(module.has.maxSelections() && $item.hasClass(className.active)) {
- return true;
- }
- return false;
- },
- openDownward: function($subMenu) {
- var
- $currentMenu = $subMenu || $menu,
- canOpenDownward = true,
- onScreen = {},
- calculations
- ;
- $currentMenu
- .addClass(className.loading)
- ;
- calculations = {
- context: {
- offset : ($context.get(0) === window)
- ? { top: 0, left: 0}
- : $context.offset(),
- scrollTop : $context.scrollTop(),
- height : $context.outerHeight()
- },
- menu : {
- offset: $currentMenu.offset(),
- height: $currentMenu.outerHeight()
- }
- };
- if(module.is.verticallyScrollableContext()) {
- calculations.menu.offset.top += calculations.context.scrollTop;
- }
- onScreen = {
- above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.context.offset.top - calculations.menu.height,
- below : (calculations.context.scrollTop + calculations.context.height) >= calculations.menu.offset.top - calculations.context.offset.top + calculations.menu.height
- };
- if(onScreen.below) {
- module.verbose('Dropdown can fit in context downward', onScreen);
- canOpenDownward = true;
- }
- else if(!onScreen.below && !onScreen.above) {
- module.verbose('Dropdown cannot fit in either direction, favoring downward', onScreen);
- canOpenDownward = true;
- }
- else {
- module.verbose('Dropdown cannot fit below, opening upward', onScreen);
- canOpenDownward = false;
- }
- $currentMenu.removeClass(className.loading);
- return canOpenDownward;
- },
- openRightward: function($subMenu) {
- var
- $currentMenu = $subMenu || $menu,
- canOpenRightward = true,
- isOffscreenRight = false,
- calculations
- ;
- $currentMenu
- .addClass(className.loading)
- ;
- calculations = {
- context: {
- offset : ($context.get(0) === window)
- ? { top: 0, left: 0}
- : $context.offset(),
- scrollLeft : $context.scrollLeft(),
- width : $context.outerWidth()
- },
- menu: {
- offset : $currentMenu.offset(),
- width : $currentMenu.outerWidth()
- }
- };
- if(module.is.horizontallyScrollableContext()) {
- calculations.menu.offset.left += calculations.context.scrollLeft;
- }
- isOffscreenRight = (calculations.menu.offset.left - calculations.context.offset.left + calculations.menu.width >= calculations.context.scrollLeft + calculations.context.width);
- if(isOffscreenRight) {
- module.verbose('Dropdown cannot fit in context rightward', isOffscreenRight);
- canOpenRightward = false;
- }
- $currentMenu.removeClass(className.loading);
- return canOpenRightward;
- },
- click: function() {
- return (hasTouch || settings.on == 'click');
- },
- extendSelect: function() {
- return settings.allowAdditions || settings.apiSettings;
- },
- show: function() {
- return !module.is.disabled() && (module.has.items() || module.has.message());
- },
- useAPI: function() {
- return $.fn.api !== undefined;
- }
- },
-
- animate: {
- show: function(callback, $subMenu) {
- var
- $currentMenu = $subMenu || $menu,
- start = ($subMenu)
- ? function() {}
- : function() {
- module.hideSubMenus();
- module.hideOthers();
- module.set.active();
- },
- transition
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- module.verbose('Doing menu show animation', $currentMenu);
- module.set.direction($subMenu);
- transition = module.get.transition($subMenu);
- if( module.is.selection() ) {
- module.set.scrollPosition(module.get.selectedItem(), true);
- }
- if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
- var displayType = $module.hasClass('column') ? 'flex' : false;
- if(transition == 'none') {
- start();
- $currentMenu.transition({
- displayType: displayType
- }).transition('show');
- callback.call(element);
- }
- else if($.fn.transition !== undefined && $module.transition('is supported')) {
- $currentMenu
- .transition({
- animation : transition + ' in',
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- queue : true,
- onStart : start,
- displayType: displayType,
- onComplete : function() {
- callback.call(element);
- }
- })
- ;
- }
- else {
- module.error(error.noTransition, transition);
- }
- }
- },
- hide: function(callback, $subMenu) {
- var
- $currentMenu = $subMenu || $menu,
- start = ($subMenu)
- ? function() {}
- : function() {
- if( module.can.click() ) {
- module.unbind.intent();
- }
- module.remove.active();
- },
- transition = module.get.transition($subMenu)
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) {
- module.verbose('Doing menu hide animation', $currentMenu);
-
- if(transition == 'none') {
- start();
- $currentMenu.transition('hide');
- callback.call(element);
- }
- else if($.fn.transition !== undefined && $module.transition('is supported')) {
- $currentMenu
- .transition({
- animation : transition + ' out',
- duration : settings.duration,
- debug : settings.debug,
- verbose : settings.verbose,
- queue : false,
- onStart : start,
- onComplete : function() {
- callback.call(element);
- }
- })
- ;
- }
- else {
- module.error(error.transition);
- }
- }
- }
- },
-
- hideAndClear: function() {
- module.remove.searchTerm();
- if( module.has.maxSelections() ) {
- return;
- }
- if(module.has.search()) {
- module.hide(function() {
- module.remove.filteredItem();
- });
- }
- else {
- module.hide();
- }
- },
-
- delay: {
- show: function() {
- module.verbose('Delaying show event to ensure user intent');
- clearTimeout(module.timer);
- module.timer = setTimeout(module.show, settings.delay.show);
- },
- hide: function() {
- module.verbose('Delaying hide event to ensure user intent');
- clearTimeout(module.timer);
- module.timer = setTimeout(module.hide, settings.delay.hide);
- }
- },
-
- escape: {
- value: function(value) {
- var
- multipleValues = Array.isArray(value),
- stringValue = (typeof value === 'string'),
- isUnparsable = (!stringValue && !multipleValues),
- hasQuotes = (stringValue && value.search(regExp.quote) !== -1),
- values = []
- ;
- if(isUnparsable || !hasQuotes) {
- return value;
- }
- module.debug('Encoding quote values for use in select', value);
- if(multipleValues) {
- $.each(value, function(index, value){
- values.push(value.replace(regExp.quote, '&quot;'));
- });
- return values;
- }
- return value.replace(regExp.quote, '&quot;');
- },
- string: function(text) {
- text = String(text);
- return text.replace(regExp.escape, '\\$&');
- },
- htmlEntities: function(string) {
- var
- badChars = /[<>"'`]/g,
- shouldEscape = /[&<>"'`]/,
- escape = {
- "<": "&lt;",
- ">": "&gt;",
- '"': "&quot;",
- "'": "&#x27;",
- "`": "&#x60;"
- },
- escapedChar = function(chr) {
- return escape[chr];
- }
- ;
- if(shouldEscape.test(string)) {
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
- return string.replace(badChars, escapedChar);
- }
- return string;
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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
- : $allModules
- ;
-};
-
-$.fn.dropdown.settings = {
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- on : 'click', // what event should show menu action on item selection
- action : 'activate', // action on item selection (nothing, activate, select, combo, hide, function(){})
-
- values : false, // specify values to use for dropdown
-
- clearable : false, // whether the value of the dropdown can be cleared
-
- apiSettings : false,
- selectOnKeydown : true, // Whether selection should occur automatically when keyboard shortcuts used
- minCharacters : 0, // Minimum characters required to trigger API call
-
- filterRemoteData : false, // Whether API results should be filtered after being returned for query term
- saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
-
- throttle : 200, // How long to wait after last user input to search remotely
-
- context : window, // Context to use when determining if on screen
- direction : 'auto', // Whether dropdown should always open in one direction
- keepOnScreen : true, // Whether dropdown should check whether it is on screen before showing
-
- match : 'both', // what to match against with search selection (both, text, or label)
- fullTextSearch : false, // search anywhere in value (set to 'exact' to require exact matches)
- ignoreDiacritics : false, // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
- hideDividers : false, // Whether to hide any divider elements (specified in selector.divider) that are sibling to any items when searched (set to true will hide all dividers, set to 'empty' will hide them when they are not followed by a visible item)
-
- placeholder : 'auto', // whether to convert blank <select> values to placeholder text
- preserveHTML : true, // preserve html when selecting value
- sortSelect : false, // sort selection on init
-
- forceSelection : true, // force a choice on blur with search selection
-
- allowAdditions : false, // whether multiple select should allow user added values
- ignoreCase : false, // whether to consider case sensitivity when creating labels
- ignoreSearchCase : true, // whether to consider case sensitivity when filtering items
- hideAdditions : true, // whether or not to hide special message prompting a user they can enter a value
-
- maxSelections : false, // When set to a number limits the number of selections to this count
- useLabels : true, // whether multiple select should filter currently active selections from choices
- delimiter : ',', // when multiselect uses normal <input> the values will be delimited with this character
-
- showOnFocus : true, // show menu on focus
- allowReselection : false, // whether current value should trigger callbacks when reselected
- allowTab : true, // add tabindex to element
- allowCategorySelection : false, // allow elements with sub-menus to be selected
-
- fireOnInit : false, // Whether callbacks should fire when initializing dropdown values
-
- transition : 'auto', // auto transition will slide down or up based on direction
- duration : 200, // duration of transition
-
- glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
-
- headerDivider : true, // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>
-
- // label settings on multi-select
- label: {
- transition : 'scale',
- duration : 200,
- variation : false
- },
-
- // delay before event
- delay : {
- hide : 300,
- show : 200,
- search : 20,
- touch : 50
- },
-
- /* Callbacks */
- onChange : function(value, text, $selected){},
- onAdd : function(value, text, $selected){},
- onRemove : function(value, text, $selected){},
-
- onLabelSelect : function($selectedLabels){},
- onLabelCreate : function(value, text) { return $(this); },
- onLabelRemove : function(value) { return true; },
- onNoResults : function(searchTerm) { return true; },
- onShow : function(){},
- onHide : function(){},
-
- /* Component */
- name : 'Dropdown',
- namespace : 'dropdown',
-
- message: {
- addResult : 'Add <b>{term}</b>',
- count : '{count} selected',
- maxSelections : 'Max {maxCount} selections',
- noResults : 'No results found.',
- serverError : 'There was an error contacting the server'
- },
-
- error : {
- action : 'You called a dropdown action that was not defined',
- alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
- labels : 'Allowing user additions currently requires the use of labels.',
- missingMultiple : '<select> requires multiple property to be set to correctly preserve multiple values',
- method : 'The method you called is not defined.',
- noAPI : 'The API module is required to load resources remotely',
- noStorage : 'Saving remote data requires session storage',
- noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>',
- noNormalize : '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including <https://cdn.jsdelivr.net/npm/[email protected]/lib/unorm.min.js> as a polyfill.'
- },
-
- regExp : {
- escape : /[-[\]{}()*+?.,\\^$|#\s:=@]/g,
- quote : /"/g
- },
-
- metadata : {
- defaultText : 'defaultText',
- defaultValue : 'defaultValue',
- placeholderText : 'placeholder',
- text : 'text',
- value : 'value'
- },
-
- // property names for remote query
- fields: {
- remoteValues : 'results', // grouping for api results
- values : 'values', // grouping for all dropdown values
- disabled : 'disabled', // whether value should be disabled
- name : 'name', // displayed dropdown text
- value : 'value', // actual dropdown value
- text : 'text', // displayed text when selected
- type : 'type', // type of dropdown element
- image : 'image', // optional image path
- imageClass : 'imageClass', // optional individual class for image
- icon : 'icon', // optional icon name
- iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead)
- class : 'class', // optional individual class for item/header
- divider : 'divider' // optional divider append for group headers
- },
-
- keys : {
- backspace : 8,
- delimiter : 188, // comma
- deleteKey : 46,
- enter : 13,
- escape : 27,
- pageUp : 33,
- pageDown : 34,
- leftArrow : 37,
- upArrow : 38,
- rightArrow : 39,
- downArrow : 40
- },
-
- selector : {
- addition : '.addition',
- divider : '.divider, .header',
- dropdown : '.ui.dropdown',
- hidden : '.hidden',
- icon : '> .dropdown.icon',
- input : '> input[type="hidden"], > select',
- item : '.item',
- label : '> .label',
- remove : '> .label > .delete.icon',
- siblingLabel : '.label',
- menu : '.menu',
- message : '.message',
- menuIcon : '.dropdown.icon',
- search : 'input.search, .menu > .search > input, .menu input.search',
- sizer : '> span.sizer',
- text : '> .text:not(.icon)',
- unselectable : '.disabled, .filtered',
- clearIcon : '> .remove.icon'
- },
-
- className : {
- active : 'active',
- addition : 'addition',
- animating : 'animating',
- disabled : 'disabled',
- empty : 'empty',
- dropdown : 'ui dropdown',
- filtered : 'filtered',
- hidden : 'hidden transition',
- icon : 'icon',
- image : 'image',
- item : 'item',
- label : 'ui label',
- loading : 'loading',
- menu : 'menu',
- message : 'message',
- multiple : 'multiple',
- placeholder : 'default',
- sizer : 'sizer',
- search : 'search',
- selected : 'selected',
- selection : 'selection',
- upward : 'upward',
- leftward : 'left',
- visible : 'visible',
- clearable : 'clearable',
- noselection : 'noselection',
- delete : 'delete',
- header : 'header',
- divider : 'divider',
- groupIcon : '',
- unfilterable : 'unfilterable'
- }
-
-};
-
-/* Templates */
-$.fn.dropdown.settings.templates = {
- deQuote: function(string) {
- return String(string).replace(/"/g,"");
- },
- escape: function(string, preserveHTML) {
- if (preserveHTML){
- return string;
- }
- var
- badChars = /[<>"'`]/g,
- shouldEscape = /[&<>"'`]/,
- escape = {
- "<": "&lt;",
- ">": "&gt;",
- '"': "&quot;",
- "'": "&#x27;",
- "`": "&#x60;"
- },
- escapedChar = function(chr) {
- return escape[chr];
- }
- ;
- if(shouldEscape.test(string)) {
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
- return string.replace(badChars, escapedChar);
- }
- return string;
- },
- // generates dropdown from select values
- dropdown: function(select, fields, preserveHTML, className) {
- var
- placeholder = select.placeholder || false,
- html = '',
- escape = $.fn.dropdown.settings.templates.escape
- ;
- html += '<i class="dropdown icon"></i>';
- if(placeholder) {
- html += '<div class="default text">' + escape(placeholder,preserveHTML) + '</div>';
- }
- else {
- html += '<div class="text"></div>';
- }
- html += '<div class="'+className.menu+'">';
- html += $.fn.dropdown.settings.templates.menu(select, fields, preserveHTML,className);
- html += '</div>';
- return html;
- },
-
- // generates just menu from select
- menu: function(response, fields, preserveHTML, className) {
- var
- values = response[fields.values] || [],
- html = '',
- escape = $.fn.dropdown.settings.templates.escape,
- deQuote = $.fn.dropdown.settings.templates.deQuote
- ;
- $.each(values, function(index, option) {
- var
- itemType = (option[fields.type])
- ? option[fields.type]
- : 'item'
- ;
-
- if( itemType === 'item' ) {
- var
- maybeText = (option[fields.text])
- ? ' data-text="' + deQuote(option[fields.text]) + '"'
- : '',
- maybeDisabled = (option[fields.disabled])
- ? className.disabled+' '
- : ''
- ;
- html += '<div class="'+ maybeDisabled + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + deQuote(option[fields.value]) + '"' + maybeText + '>';
- if(option[fields.image]) {
- html += '<img class="'+(option[fields.imageClass] ? deQuote(option[fields.imageClass]) : className.image)+'" src="' + deQuote(option[fields.image]) + '">';
- }
- if(option[fields.icon]) {
- html += '<i class="'+deQuote(option[fields.icon])+' '+(option[fields.iconClass] ? deQuote(option[fields.iconClass]) : className.icon)+'"></i>';
- }
- html += escape(option[fields.name] || '', preserveHTML);
- html += '</div>';
- } else if (itemType === 'header') {
- var groupName = escape(option[fields.name] || '', preserveHTML),
- groupIcon = option[fields.icon] ? deQuote(option[fields.icon]) : className.groupIcon
- ;
- if(groupName !== '' || groupIcon !== '') {
- html += '<div class="' + (option[fields.class] ? deQuote(option[fields.class]) : className.header) + '">';
- if (groupIcon !== '') {
- html += '<i class="' + groupIcon + ' ' + (option[fields.iconClass] ? deQuote(option[fields.iconClass]) : className.icon) + '"></i>';
- }
- html += groupName;
- html += '</div>';
- }
- if(option[fields.divider]){
- html += '<div class="'+className.divider+'"></div>';
- }
- }
- });
- return html;
- },
-
- // generates label for multiselect
- label: function(value, text, preserveHTML, className) {
- var
- escape = $.fn.dropdown.settings.templates.escape;
- return escape(text,preserveHTML) + '<i class="'+className.delete+' icon"></i>';
- },
-
-
- // generates messages like "No results"
- message: function(message) {
- return message;
- },
-
- // generates user addition to selection menu
- addition: function(choice) {
- return choice;
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/dropdown.less b/semantic/src/definitions/modules/dropdown.less
deleted file mode 100644
index 3953c20..0000000
--- a/semantic/src/definitions/modules/dropdown.less
+++ /dev/null
@@ -1,1850 +0,0 @@
-/*!
- * # Fomantic-UI - Dropdown
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'dropdown';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Dropdown
-*******************************/
-
-.ui.dropdown {
- cursor: pointer;
- position: relative;
- display: inline-block;
- outline: none;
- text-align: left;
- transition: @transition;
- user-select: none;
-
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-/*******************************
- Content
-*******************************/
-
-/*--------------
- Menu
----------------*/
-
-.ui.dropdown .menu {
- cursor: auto;
- position: absolute;
- display: none;
- outline: none;
- top: 100%;
- min-width: max-content;
-
- margin: @menuMargin;
- padding: @menuPadding;
- background: @menuBackground;
-
- font-size: @relativeMedium;
- text-shadow: none;
- text-align: @menuTextAlign;
-
- box-shadow: @menuBoxShadow;
- border: @menuBorder;
- border-radius: @menuBorderRadius;
- transition: @menuTransition;
- z-index: @menuZIndex;
- will-change: transform, opacity;
-}
-
-.ui.dropdown .menu > * {
- white-space: nowrap;
-}
-
-
-/*--------------
- Hidden Input
----------------*/
-
-.ui.dropdown > input:not(.search):first-child,
-.ui.dropdown > select {
- display: none !important;
-}
-
-/*--------------
- Dropdown Icon
----------------*/
-
-.ui.dropdown:not(.labeled) > .dropdown.icon {
- position: relative;
- width: auto;
- font-size: @dropdownIconSize;
- margin: @dropdownIconMargin;
-}
-.ui.dropdown .menu > .item .dropdown.icon {
- width: auto;
- float: @itemDropdownIconFloat;
- margin: @itemDropdownIconMargin;
-}
-.ui.dropdown .menu > .item .dropdown.icon + .text {
- margin-right: @itemDropdownIconDistance;
-}
-
-
-/*--------------
- Text
----------------*/
-
-.ui.dropdown > .text {
- display: inline-block;
- transition: @textTransition;
-}
-
-/*--------------
- Menu Item
----------------*/
-
-.ui.dropdown .menu > .item {
- position: relative;
- cursor: pointer;
- display: block;
- border: @itemBorder;
- height: @itemHeight;
- min-height: @itemMinHeight;
- text-align: @itemTextAlign;
-
- border-top: @itemDivider;
- line-height: @itemLineHeight;
- font-size: @itemFontSize;
- color: @itemColor;
-
- padding: @itemPadding !important;
- text-transform: @itemTextTransform;
- font-weight: @itemFontWeight;
- box-shadow: @itemBoxShadow;
- -webkit-touch-callout: none;
-}
-.ui.dropdown .menu > .item:first-child {
- border-top-width: 0;
-}
-
-.ui.dropdown .menu > .item.vertical {
- display: flex;
- flex-direction: column-reverse;
-}
-
-/*--------------
- Floated Content
----------------*/
-
-.ui.dropdown > .text > [class*="right floated"],
-.ui.dropdown .menu .item > [class*="right floated"] {
- float: right !important;
- margin-right: 0 !important;
- margin-left: @floatedDistance !important;
-}
-.ui.dropdown > .text > [class*="left floated"],
-.ui.dropdown .menu .item > [class*="left floated"] {
- float: left !important;
- margin-left: 0 !important;
- margin-right: @floatedDistance !important;
-}
-
-.ui.dropdown .menu .item > i.icon.floated,
-.ui.dropdown .menu .item > .flag.floated,
-.ui.dropdown .menu .item > .image.floated,
-.ui.dropdown .menu .item > img.floated {
- margin-top: @itemLineHeightOffset;
-}
-
-
-/*--------------
- Menu Divider
----------------*/
-
-.ui.dropdown .menu > .header {
- margin: @menuHeaderMargin;
- padding: @menuHeaderPadding;
- font-weight: @menuHeaderFontWeight;
- text-transform: @menuHeaderTextTransform;
-}
-.ui.dropdown .menu > .header:not(.ui) {
- color: @menuHeaderColor;
- font-size: @menuHeaderFontSize;
-}
-.ui.dropdown .menu > .divider {
- border-top: @menuDividerBorder;
- height: 0;
- margin: @menuDividerMargin;
-}
-.ui.dropdown .menu > .horizontal.divider {
- border-top: none;
-}
-
-.ui.dropdown.dropdown .menu > .input {
- width: auto;
- display: flex;
- margin: @menuInputMargin;
- min-width: @menuInputMinWidth;
-}
-.ui.dropdown .menu > .header + .input {
- margin-top: 0;
-}
-.ui.dropdown .menu > .input:not(.transparent) input {
- padding: @menuInputPadding;
-}
-.ui.dropdown .menu > .input:not(.transparent) .button,
-.ui.dropdown .menu > .input:not(.transparent) i.icon,
-.ui.dropdown .menu > .input:not(.transparent) .label {
- padding-top: @menuInputVerticalPadding;
- padding-bottom: @menuInputVerticalPadding;
-}
-
-/*-----------------
- Item Description
--------------------*/
-
-.ui.dropdown > .text > .description,
-.ui.dropdown .menu > .item > .description {
- float: @itemDescriptionFloat;
- margin: @itemDescriptionMargin;
- color: @itemDescriptionColor;
-}
-
-.ui.dropdown .menu > .item.vertical > .description {
- margin: 0;
-}
-
-/*-----------------
- Item Text
--------------------*/
-
-.ui.dropdown .menu > .item.vertical > .text {
- margin-bottom: @verticalItemMargin;
-}
-
-/*-----------------
- Message
--------------------*/
-
-.ui.dropdown .menu > .message {
- padding: @messagePadding;
- font-weight: @messageFontWeight;
-}
-.ui.dropdown .menu > .message:not(.ui) {
- color: @messageColor;
-}
-
-/*--------------
- Sub Menu
----------------*/
-
-.ui.dropdown .menu .menu {
- top: @subMenuTop;
- left: @subMenuLeft;
- right: @subMenuRight;
- margin: @subMenuMargin !important;
- border-radius: @subMenuBorderRadius !important;
- z-index: @subMenuZIndex !important;
-}
-
-/* Hide Arrow */
-.ui.dropdown .menu .menu:after {
- display: none;
-}
-
-/*--------------
- Sub Elements
----------------*/
-
-/* Icons / Flags / Labels / Image */
-.ui.dropdown > .text > i.icon,
-.ui.dropdown > .text > .label,
-.ui.dropdown > .text > .flag,
-.ui.dropdown > .text > img,
-.ui.dropdown > .text > .image {
- margin-top: @textLineHeightOffset;
-}
-.ui.dropdown .menu > .item > i.icon,
-.ui.dropdown .menu > .item > .label,
-.ui.dropdown .menu > .item > .flag,
-.ui.dropdown .menu > .item > .image,
-.ui.dropdown .menu > .item > img {
- margin-top: @itemLineHeightOffset;
-}
-
-.ui.dropdown > .text > i.icon,
-.ui.dropdown > .text > .label,
-.ui.dropdown > .text > .flag,
-.ui.dropdown > .text > img,
-.ui.dropdown > .text > .image,
-.ui.dropdown .menu > .item > i.icon,
-.ui.dropdown .menu > .item > .label,
-.ui.dropdown .menu > .item > .flag,
-.ui.dropdown .menu > .item > .image,
-.ui.dropdown .menu > .item > img {
- margin-left: 0;
- float: @itemElementFloat;
- margin-right: @itemElementDistance;
-}
-
-/*--------------
- Image
----------------*/
-
-.ui.dropdown > .text > img,
-.ui.dropdown > .text > .image:not(.icon),
-.ui.dropdown .menu > .item > .image:not(.icon),
-.ui.dropdown .menu > .item > img {
- display: inline-block;
- vertical-align: top;
- width: auto;
- margin-top: @menuImageVerticalMargin;
- margin-bottom: @menuImageVerticalMargin;
- max-height: @menuImageMaxHeight;
-}
-
-
-/*******************************
- Coupling
-*******************************/
-
-
-/*--------------
- Menu
----------------*/
-
-/* Remove Menu Item Divider */
-.ui.dropdown .ui.menu > .item:before,
-.ui.menu .ui.dropdown .menu > .item:before {
- display: none;
-}
-
-/* Prevent Menu Item Border */
-.ui.menu .ui.dropdown .menu .active.item {
- border-left: none;
-}
-
-/* Automatically float dropdown menu right on last menu item */
-.ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
-.ui.menu .right.dropdown.item > .menu:not(.left),
-.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
- left: auto;
- right: 0;
-}
-
-& when (@variationDropdownLabel) {
- /*--------------
- Label
- ---------------*/
-
- /* Dropdown Menu */
- .ui.label.dropdown .menu {
- min-width: 100%;
- }
-}
-
-& when (@variationDropdownButton) {
- /*--------------
- Button
- ---------------*/
-
- /* No Margin On Icon Button */
- .ui.dropdown.icon.button > .dropdown.icon {
- margin: 0;
- }
- .ui.button.dropdown .menu {
- min-width: 100%;
- }
-}
-
-
-
-/*******************************
- Types
-*******************************/
-select.ui.dropdown {
- height: @selectHeight;
- padding: @selectPadding;
- border: @selectBorder;
- visibility: @selectVisibility;
-}
-
-& when (@variationDropdownSelection) {
- /*--------------
- Selection
- ---------------*/
-
- /* Displays like a select box */
- .ui.selection.dropdown {
- cursor: pointer;
- word-wrap: break-word;
- line-height: 1em;
- white-space: normal;
- outline: 0;
- transform: rotateZ(0deg);
-
- min-width: @selectionMinWidth;
- min-height: @selectionMinHeight;
-
- background: @selectionBackground;
- display: @selectionDisplay;
- padding: @selectionPadding;
- color: @selectionTextColor;
- box-shadow: @selectionBoxShadow;
- border: @selectionBorder;
- border-radius: @selectionBorderRadius;
- transition: @selectionTransition;
- }
- .ui.selection.dropdown.visible,
- .ui.selection.dropdown.active {
- z-index: @selectionZIndex;
- }
-
- .ui.selection.dropdown > .search.icon,
- .ui.selection.dropdown > .delete.icon,
- .ui.selection.dropdown > .dropdown.icon {
- cursor: pointer;
- position: absolute;
- width: auto;
- height: auto;
- line-height: @searchSelectionLineHeight;
- top: @selectionVerticalPadding;
- right: @selectionHorizontalPadding;
- z-index: @selectionIconZIndex;
- margin: @selectionIconMargin;
- padding: @selectionIconPadding;
- opacity: @selectionIconOpacity;
- transition: @selectionIconTransition;
- }
- & when (@variationDropdownCompact) {
- /* Compact */
- .ui.compact.selection.dropdown {
- min-width: 0;
- }
- }
-
- /* Selection Menu */
- .ui.selection.dropdown .menu {
- overflow-x: hidden;
- overflow-y: auto;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: touch;
- border-top-width: 0 !important;
- width: auto;
- outline: none;
- margin: 0 -@menuBorderWidth;
- min-width: @menuMinWidth;
- width: @menuMinWidth;
-
- border-radius: @selectionMenuBorderRadius;
- box-shadow: @selectionMenuBoxShadow;
- transition: @selectionMenuTransition;
- }
- .ui.selection.dropdown .menu:after,
- .ui.selection.dropdown .menu:before {
- display: none;
- }
-
- /*--------------
- Message
- ---------------*/
-
- .ui.selection.dropdown .menu > .message {
- padding: @selectionMessagePadding;
- }
-
- @media only screen and (max-width : @largestMobileScreen) {
- & when (@variationDropdownShort) {
- .ui.selection.dropdown.short .menu {
- max-height: @selectionMobileMaxMenuHeight * 0.75;
- }
- .ui.selection.dropdown[class*="very short"] .menu {
- max-height: @selectionMobileMaxMenuHeight * 0.5;
- }
- }
- .ui.selection.dropdown .menu {
- max-height: @selectionMobileMaxMenuHeight;
- }
- & when (@variationDropdownLong) {
- .ui.selection.dropdown.long .menu {
- max-height: @selectionMobileMaxMenuHeight * 2;
- }
- .ui.selection.dropdown[class*="very long"] .menu {
- max-height: @selectionMobileMaxMenuHeight * 3;
- }
- }
- }
- @media only screen and (min-width: @tabletBreakpoint) {
- & when (@variationDropdownShort) {
- .ui.selection.dropdown.short .menu {
- max-height: @selectionTabletMaxMenuHeight * 0.75;
- }
- .ui.selection.dropdown[class*="very short"] .menu {
- max-height: @selectionTabletMaxMenuHeight * 0.5;
- }
- }
- .ui.selection.dropdown .menu {
- max-height: @selectionTabletMaxMenuHeight;
- }
- & when (@variationDropdownLong) {
- .ui.selection.dropdown.long .menu {
- max-height: @selectionTabletMaxMenuHeight * 2;
- }
- .ui.selection.dropdown[class*="very long"] .menu {
- max-height: @selectionTabletMaxMenuHeight * 3;
- }
- }
- }
- @media only screen and (min-width: @computerBreakpoint) {
- & when (@variationDropdownShort) {
- .ui.selection.dropdown.short .menu {
- max-height: @selectionComputerMaxMenuHeight * 0.75;
- }
- .ui.selection.dropdown[class*="very short"] .menu {
- max-height: @selectionComputerMaxMenuHeight * 0.5;
- }
- }
- .ui.selection.dropdown .menu {
- max-height: @selectionComputerMaxMenuHeight;
- }
- & when (@variationDropdownLong) {
- .ui.selection.dropdown.long .menu {
- max-height: @selectionComputerMaxMenuHeight * 2;
- }
- .ui.selection.dropdown[class*="very long"] .menu {
- max-height: @selectionComputerMaxMenuHeight * 3;
- }
- }
- }
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
- & when (@variationDropdownShort) {
- .ui.selection.dropdown.short .menu {
- max-height: @selectionWidescreenMaxMenuHeight * 0.75;
- }
- .ui.selection.dropdown[class*="very short"] .menu {
- max-height: @selectionWidescreenMaxMenuHeight * 0.5;
- }
- }
- .ui.selection.dropdown .menu {
- max-height: @selectionWidescreenMaxMenuHeight;
- }
- & when (@variationDropdownLong) {
- .ui.selection.dropdown.long .menu {
- max-height: @selectionWidescreenMaxMenuHeight * 2;
- }
- .ui.selection.dropdown[class*="very long"] .menu {
- max-height: @selectionWidescreenMaxMenuHeight * 3;
- }
- }
- }
-
- /* Menu Item */
- .ui.selection.dropdown .menu > .item {
- border-top: @selectionItemDivider;
- padding: @selectionItemPadding !important;
- white-space: normal;
- word-wrap: normal;
- }
-
- /* User Item */
- .ui.selection.dropdown .menu > .hidden.addition.item {
- display: none;
- }
-
- /* Hover */
- .ui.selection.dropdown:hover {
- border-color: @selectionHoverBorderColor;
- box-shadow: @selectionHoverBoxShadow;
- }
-
- /* Active */
- .ui.selection.active.dropdown {
- border-color: @selectionVisibleBorderColor;
- box-shadow: @selectionVisibleBoxShadow;
- }
- .ui.selection.active.dropdown .menu {
- border-color: @selectionVisibleBorderColor;
- box-shadow: @selectionVisibleMenuBoxShadow;
- }
-
- /* Focus */
- .ui.selection.dropdown:focus {
- border-color: @selectionFocusBorderColor;
- box-shadow: @selectionFocusBoxShadow;
- }
- .ui.selection.dropdown:focus .menu {
- border-color: @selectionFocusBorderColor;
- box-shadow: @selectionFocusMenuBoxShadow;
- }
-
- /* Visible */
- .ui.selection.visible.dropdown > .text:not(.default) {
- font-weight: @selectionVisibleTextFontWeight;
- color: @selectionVisibleTextColor;
- }
-
- /* Visible Hover */
- .ui.selection.active.dropdown:hover {
- border-color: @selectionActiveHoverBorderColor;
- box-shadow: @selectionActiveHoverBoxShadow;
- }
- .ui.selection.active.dropdown:hover .menu {
- border-color: @selectionActiveHoverBorderColor;
- box-shadow: @selectionActiveHoverMenuBoxShadow;
- }
-
- /* Dropdown Icon */
- .ui.active.selection.dropdown > .dropdown.icon,
- .ui.visible.selection.dropdown > .dropdown.icon {
- opacity: @selectionVisibleIconOpacity;
- z-index: 3;
- }
-
- /* Connecting Border */
- .ui.active.selection.dropdown {
- border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
- border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
- }
-
- /* Empty Connecting Border */
- .ui.active.empty.selection.dropdown {
- border-radius: @selectionBorderRadius !important;
- box-shadow: @selectionBoxShadow !important;
- }
- .ui.active.empty.selection.dropdown .menu {
- border: none !important;
- box-shadow: none !important;
- }
- & when (@variationDropdownScrollhint) {
- /* CSS specific to iOS devices or firefox mobile only */
- @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
- @media (-moz-touch-enabled), (pointer: coarse) {
- .ui.dropdown .scrollhint.menu:not(.hidden):before {
- animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration;
- content: '';
- z-index: @scrollhintZIndex;
- display: block;
- position: absolute;
- opacity: 0;
- right: @scrollhintOffsetRight;
- top: 0;
- height: 100%;
- border-right: @scrollhintRightBorder;
- border-left: @scrollhintLeftBorder;
- border-image: linear-gradient(to bottom, @scrollhintStartColor, @scrollhintEndColor) 1 100%;
- }
-
- .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
- border-image: linear-gradient(to bottom, @invertedScrollhintStartColor, @invertedScrollhintEndColor) 1 100%;
- }
-
- @keyframes scrollhint {
- 0% {
- opacity: 1;
- top: 100%;
- }
- 100% {
- opacity: 0;
- top: 0;
- }
- }
- }
- }
- }
-}
-
-& when (@variationDropdownSearch) {
- /*--------------
- Searchable
- ---------------*/
-
- /* Search Selection */
- .ui.search.dropdown {
- min-width: @searchMinWidth;
- }
-
- /* Search Dropdown */
- .ui.search.dropdown > input.search {
- background: none transparent !important;
- border: none !important;
- box-shadow: none !important;
- cursor: text;
- top: 0;
- left: @textCursorSpacing;
- width: 100%;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- padding: inherit;
- }
-
- /* Text Layering */
- .ui.search.dropdown > input.search {
- position: absolute;
- z-index: 2;
- }
- .ui.search.dropdown > .text {
- cursor: text;
- position: relative;
- left: @textCursorSpacing;
- z-index: auto;
- }
-
- & when (@variationDropdownSelection) {
- /* Search Selection */
- .ui.search.selection.dropdown > input.search {
- line-height: @searchSelectionLineHeight;
- padding: @searchSelectionInputPadding;
- }
-
- /* Used to size multi select input to character width */
- .ui.search.selection.dropdown > span.sizer {
- line-height: @searchSelectionLineHeight;
- padding: @searchSelectionInputPadding;
- display: none;
- white-space: pre;
- }
- }
-
- /* Active/Visible Search */
- .ui.search.dropdown.active > input.search,
- .ui.search.dropdown.visible > input.search {
- cursor: auto;
- }
- .ui.search.dropdown.active > .text,
- .ui.search.dropdown.visible > .text {
- pointer-events: none;
- }
-
- /* Filtered Text */
- .ui.active.search.dropdown input.search:focus + .text i.icon,
- .ui.active.search.dropdown input.search:focus + .text .flag {
- opacity: @selectionTextUnderlayIconOpacity;
- }
- .ui.active.search.dropdown input.search:focus + .text {
- color: @selectionTextUnderlayColor !important;
- }
-
- .ui.search.dropdown.button > span.sizer {
- display: none;
- }
-
- /* Search Menu */
- .ui.search.dropdown .menu {
- overflow-x: hidden;
- overflow-y: auto;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: touch;
- }
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.search.dropdown .menu {
- max-height: @searchMobileMaxMenuHeight;
- }
- }
- @media only screen and (min-width: @tabletBreakpoint) {
- .ui.search.dropdown .menu {
- max-height: @searchTabletMaxMenuHeight;
- }
- }
- @media only screen and (min-width: @computerBreakpoint) {
- .ui.search.dropdown .menu {
- max-height: @searchComputerMaxMenuHeight;
- }
- }
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui.search.dropdown .menu {
- max-height: @searchWidescreenMaxMenuHeight;
- }
- }
-}
-
-/* Clearable Selection */
-.ui.dropdown > .remove.icon {
- cursor: pointer;
- font-size: @dropdownIconSize;
- margin: @selectionIconMargin;
- padding: @selectionIconPadding;
- right: 3em;
- top: @selectionVerticalPadding;
- position: absolute;
- opacity: 0.6;
- z-index: @selectionIconZIndex;
-}
-
-.ui.clearable.dropdown .text,
-.ui.clearable.dropdown a:last-of-type {
- margin-right: 1.5em;
-}
-
-.ui.dropdown select.noselection ~ .remove.icon,
-.ui.dropdown input[value=''] ~ .remove.icon,
-.ui.dropdown input:not([value]) ~ .remove.icon,
-.ui.dropdown.loading > .remove.icon {
- display: none;
-}
-
-& when (@variationDropdownMultiple) {
- /*--------------
- Multiple
- ---------------*/
-
- /* Multiple Selection */
- .ui.ui.multiple.dropdown {
- padding: @multipleSelectionPadding;
- }
- .ui.multiple.dropdown .menu {
- cursor: auto;
- }
-
- /* Selection Label */
- .ui.multiple.dropdown > .label {
- display: inline-block;
- white-space: normal;
- font-size: @labelSize;
- padding: @labelPadding;
- margin: @labelMargin;
- box-shadow: @labelBoxShadow;
- }
-
- /* Dropdown Icon */
- .ui.multiple.dropdown .dropdown.icon {
- margin: @multipleSelectionDropdownIconMargin;
- padding: @multipleSelectionDropdownIconPadding;
- }
-
- /* Text */
- .ui.multiple.dropdown > .text {
- position: static;
- padding: 0;
- max-width: 100%;
- margin: @multipleSelectionChildMargin;
- line-height: @multipleSelectionChildLineHeight;
- &.default {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .ui.multiple.dropdown > .label ~ input.search {
- margin-left: @multipleSelectionSearchAfterLabelDistance !important;
- }
- .ui.multiple.dropdown > .label ~ .text {
- display: none;
- }
- .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
- margin-right: @itemElementDistance;
- }
- .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
- margin-bottom: @itemElementBottomDistance;
- }
- .ui.multiple.dropdown > .image.label img {
- margin: @imageLabelImageMargin;
- height: @imageLabelHeight;
- }
-
- & when (@variationDropdownSearch) {
- /*-----------------
- Multiple Search
- -----------------*/
-
- /* Multiple Search Selection */
- .ui.multiple.search.dropdown,
- .ui.multiple.search.dropdown > input.search {
- cursor: text;
- }
-
- /* Prompt Text */
- .ui.multiple.search.dropdown > .text {
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- padding: inherit;
- margin: @multipleSelectionChildMargin;
- line-height: @multipleSelectionChildLineHeight;
- }
-
- .ui.multiple.search.dropdown > .label ~ .text {
- display: none;
- }
-
- /* Search */
- .ui.multiple.search.dropdown > input.search {
- position: static;
- padding: 0;
- max-width: 100%;
- margin: @multipleSelectionChildMargin;
- width: @multipleSelectionSearchStartWidth;
- line-height: @multipleSelectionChildLineHeight;
- }
-
- .ui.multiple.search.dropdown.button {
- min-width: @selectionMinWidth;
- }
- }
-}
-
-& when (@variationDropdownInline) {
- /*--------------
- Inline
- ---------------*/
-
- .ui.inline.dropdown {
- cursor: pointer;
- display: inline-block;
- color: @inlineTextColor;
- }
- .ui.inline.dropdown .dropdown.icon {
- margin: @inlineIconMargin;
- vertical-align: baseline;
- }
- .ui.inline.dropdown > .text {
- font-weight: @inlineTextFontWeight;
- }
- .ui.inline.dropdown .menu {
- cursor: auto;
- margin-top: @inlineMenuDistance;
- border-radius: @inlineMenuBorderRadius;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-
-/*--------------------
- Active
-----------------------*/
-
-/* Menu Item Active */
-.ui.dropdown .menu .active.item {
- background: @activeItemBackground;
- font-weight: @activeItemFontWeight;
- color: @activeItemColor;
- box-shadow: @activeItemBoxShadow;
- z-index: @activeItemZIndex;
-}
-
-
-/*--------------------
- Hover
-----------------------*/
-
-/* Menu Item Hover */
-.ui.dropdown .menu > .item:hover {
- background: @hoveredItemBackground;
- color: @hoveredItemColor;
- z-index: @hoveredZIndex;
-}
-
-/*--------------------
- Default Text
-----------------------*/
-
-.ui.dropdown:not(.button) > .default.text,
-.ui.default.dropdown:not(.button) > .text {
- color: @defaultTextColor;
-}
-.ui.dropdown:not(.button) > input:focus ~ .default.text,
-.ui.default.dropdown:not(.button) > input:focus ~ .text {
- color: @defaultTextFocusColor;
-}
-
-& when (@variationDropdownLoading) {
-
- /*--------------------
- Loading
- ---------------------*/
-
- .ui.loading.dropdown > i.icon {
- height: @relative14px !important;
- }
- .ui.loading.selection.dropdown > i.icon {
- padding: @relative21px @relative18px !important;
- }
- .ui.loading.dropdown > i.icon:before {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @loaderFillColor;
- }
- .ui.loading.dropdown > i.icon:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
- box-shadow: 0 0 0 1px transparent;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid @loaderLineColor;
- border-radius: @circularRadius;
-
- }
-
- /* Coupling */
- .ui.loading.dropdown.button > i.icon:before,
- .ui.loading.dropdown.button > i.icon:after {
- display: none;
- }
-
- .ui.loading.dropdown > .text {
- transition: none;
- }
-
- /* Used To Check Position */
- .ui.dropdown .loading.menu {
- display: block;
- visibility: hidden;
- z-index: @loadingZIndex;
- }
- .ui.dropdown > .loading.menu {
- left: 0 !important;
- right: auto !important;
- }
- .ui.dropdown > .menu .loading.menu {
- left: 100% !important;
- right: auto !important;
- }
-}
-
-/*--------------------
- Keyboard Select
-----------------------*/
-
-/* Selected Item */
-.ui.dropdown.selected,
-.ui.dropdown .menu .selected.item {
- background: @selectedBackground;
- color: @selectedColor;
-}
-
-
-/*--------------------
- Search Filtered
-----------------------*/
-
-/* Filtered Item */
-.ui.dropdown > .filtered.text {
- visibility: hidden;
-}
-.ui.dropdown .filtered.item {
- display: none !important;
-}
-
-& when (@variationDropdownStates) {
- /*--------------------
- States
- ----------------------*/
- each(@formStates, {
- @state: replace(@key, '@', '');
- @c: @formStates[@@state][dropdownLabelColor];
- @bdc: @formStates[@@state][borderColor];
-
- .ui.dropdown.@{state},
- .ui.dropdown.@{state} > .text,
- .ui.dropdown.@{state} > .default.text {
- color: @c;
- }
- & when (@variationDropdownSelection) {
- .ui.selection.dropdown.@{state} {
- background: @formStates[@@state][background];
- border-color: @bdc;
- }
-
- .ui.selection.dropdown.@{state}:hover {
- border-color: @bdc;
- }
-
- & when (@variationDropdownMultiple) {
- .ui.multiple.selection.@{state}.dropdown > .label {
- border-color: @bdc;
- }
- }
- }
- .ui.dropdown.@{state} > .menu,
- .ui.dropdown.@{state} > .menu .menu {
- border-color: @bdc;
- }
- .ui.dropdown.@{state} > .menu > .item {
- color: @c;
- }
-
- /* Item Hover */
- .ui.dropdown.@{state} > .menu > .item:hover {
- background-color: @formStates[@@state][dropdownHoverBackground];
- }
-
- /* Item Active */
- .ui.dropdown.@{state} > .menu .active.item {
- background-color: @formStates[@@state][dropdownActiveBackground];
- }
- })
-}
-
-& when (@variationDropdownClear) {
-/*--------------------
- Clear
-----------------------*/
-
- .ui.dropdown > .clear.dropdown.icon {
- opacity: @clearableIconOpacity;
- transition: opacity @defaultDuration @defaultEasing;
- }
- .ui.dropdown > .clear.dropdown.icon:hover {
- opacity: @clearableIconActiveOpacity;
- }
-}
-
-& when (@variationDropdownDisabled) {
- /*--------------------
- Disabled
- ----------------------*/
-
- /* Disabled */
- .ui.disabled.dropdown,
- .ui.dropdown .menu > .disabled.item {
- cursor: default;
- pointer-events: none;
- opacity: @disabledOpacity;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-/*--------------
- Direction
----------------*/
-
-/* Flyout Direction */
-.ui.dropdown .menu {
- left: 0;
-}
-
-
-/* Default Side (Right) */
-.ui.dropdown .right.menu > .menu,
-.ui.dropdown .menu .right.menu {
- left: 100% !important;
- right: auto !important;
- border-radius: @subMenuBorderRadius !important;
-}
-& when (@variationDropdownLeft) {
- /* Leftward Opening Menu */
- .ui.dropdown > .left.menu {
- left: auto !important;
- right: 0 !important;
- }
-
- .ui.dropdown > .left.menu .menu,
- .ui.dropdown .menu .left.menu {
- left: auto;
- right: 100%;
- margin: @leftSubMenuMargin !important;
- border-radius: @leftSubMenuBorderRadius !important;
- }
-}
-
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
- width: auto;
- float: @leftMenuDropdownIconFloat;
- margin: @leftMenuDropdownIconMargin;
-}
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
- width: auto;
- float: @leftMenuDropdownIconFloat;
- margin: @leftMenuDropdownIconMargin;
-}
-.ui.dropdown .item .left.dropdown.icon + .text,
-.ui.dropdown .left.menu .item .dropdown.icon + .text {
- margin-left: @itemDropdownIconDistance;
- margin-right: 0;
-}
-
-& when (@variationDropdownUpward) {
- /*--------------
- Upward
- ---------------*/
-
- /* Upward Main Menu */
- .ui.upward.dropdown > .menu {
- top: auto;
- bottom: 100%;
- box-shadow: @upwardMenuBoxShadow;
- border-radius: @upwardMenuBorderRadius;
- }
-
- /* Upward Sub Menu */
- .ui.dropdown .upward.menu {
- top: auto !important;
- bottom: 0 !important;
- }
-
- /* Active Upward */
- .ui.simple.upward.active.dropdown,
- .ui.simple.upward.dropdown:hover {
- border-radius: @borderRadius @borderRadius 0 0 !important;
- }
- .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
- border-radius: @borderRadius @borderRadius 0 0;
- }
-
- /* Selection */
- .ui.upward.selection.dropdown .menu {
- border-top-width: @menuBorderWidth !important;
- border-bottom-width: 0 !important;
- box-shadow: @upwardSelectionMenuBoxShadow;
- }
- .ui.upward.selection.dropdown:hover {
- box-shadow: @upwardSelectionHoverBoxShadow;
- }
-
- /* Active Upward */
- .ui.active.upward.selection.dropdown {
- border-radius: @upwardSelectionVisibleBorderRadius !important;
- }
-
- /* Visible Upward */
- .ui.upward.selection.dropdown.visible {
- box-shadow: @upwardSelectionVisibleBoxShadow;
- border-radius: @upwardSelectionVisibleBorderRadius !important;
- }
-
- /* Visible Hover Upward */
- .ui.upward.active.selection.dropdown:hover {
- box-shadow: @upwardSelectionActiveHoverBoxShadow;
- }
- .ui.upward.active.selection.dropdown:hover .menu {
- box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
- }
-}
-
-& when (@variationDropdownScrolling) {
- /*--------------
- Scrolling
- ---------------*/
-
- /* Selection Menu */
- .ui.scrolling.dropdown .menu,
- .ui.dropdown .scrolling.menu {
- overflow-x: hidden;
- overflow-y: auto;
- }
-
- .ui.scrolling.dropdown .menu {
- overflow-x: hidden;
- overflow-y: auto;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: touch;
- min-width: 100% !important;
- width: auto !important;
- }
-
- .ui.dropdown .scrolling.menu {
- position: static;
- overflow-y: auto;
- border: none;
- box-shadow: none !important;
- border-radius: 0 !important;
- margin: 0 !important;
- min-width: 100% !important;
- width: auto !important;
- border-top: @menuBorder;
- }
- .ui.scrolling.dropdown .menu .item.item.item,
- .ui.dropdown .scrolling.menu > .item.item.item {
- border-top: @scrollingMenuItemBorder;
- }
- .ui.scrolling.dropdown .menu .item:first-child,
- .ui.dropdown .scrolling.menu .item:first-child {
- border-top: none;
- }
- .ui.dropdown > .animating.menu .scrolling.menu,
- .ui.dropdown > .visible.menu .scrolling.menu {
- display: block;
- }
-
- /* Scrollbar in IE */
- @media all and (-ms-high-contrast:none) {
- .ui.scrolling.dropdown .menu,
- .ui.dropdown .scrolling.menu {
- min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
- }
- }
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.scrolling.dropdown .menu,
- .ui.dropdown .scrolling.menu {
- max-height: @scrollingMobileMaxMenuHeight;
- }
- }
- @media only screen and (min-width: @tabletBreakpoint) {
- .ui.scrolling.dropdown .menu,
- .ui.dropdown .scrolling.menu {
- max-height: @scrollingTabletMaxMenuHeight;
- }
- }
- @media only screen and (min-width: @computerBreakpoint) {
- .ui.scrolling.dropdown .menu,
- .ui.dropdown .scrolling.menu {
- max-height: @scrollingComputerMaxMenuHeight;
- }
- }
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui.scrolling.dropdown .menu,
- .ui.dropdown .scrolling.menu {
- max-height: @scrollingWidescreenMaxMenuHeight;
- }
- }
-}
-
-/*--------------
- Columnar
----------------*/
-.ui.column.dropdown > .menu {
- flex-wrap:wrap;
-}
-.ui.dropdown[class*="two column"] > .menu > .item {
- width: 50%;
-}
-.ui.dropdown[class*="three column"] > .menu > .item {
- width: 33%;
-}
-.ui.dropdown[class*="four column"] > .menu > .item {
- width: 25%;
-}
-.ui.dropdown[class*="five column"] > .menu > .item {
- width: 20%;
-}
-
-& when (@variationDropdownSimple) {
- /*--------------
- Simple
- ---------------*/
-
- /* Displays without javascript */
-
- .ui.simple.dropdown .menu:before,
- .ui.simple.dropdown .menu:after {
- display: none;
- }
- .ui.simple.dropdown .menu {
- position: absolute;
- /* IE hack to make dropdown icons appear inline */
- display: -ms-inline-flexbox !important;
- display: block;
- overflow: hidden;
- top: -9999px;
- opacity: 0;
- width: 0;
- height: 0;
- transition: @simpleTransition;
- margin-top: 0 !important;
- }
-
- .ui.simple.active.dropdown,
- .ui.simple.dropdown:hover {
- border-bottom-left-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
- }
-
- .ui.simple.active.dropdown > .menu,
- .ui.simple.dropdown:hover > .menu {
- overflow: visible;
- width: auto;
- height: auto;
- top: 100%;
- opacity: 1;
- }
- .ui.simple.dropdown > .menu > .item:active > .menu,
- .ui.simple.dropdown .menu .item:hover > .menu {
- overflow: visible;
- width: auto;
- height: auto;
- top: 0 !important;
- left: 100%;
- opacity: 1;
- }
- .ui.simple.dropdown > .menu > .item:active > .left.menu,
- .ui.simple.dropdown .menu .item:hover > .left.menu,
- .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
- .right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
- left: auto;
- right: 100%;
- }
- & when (@variationDropdownDisabled) {
- .ui.simple.disabled.dropdown:hover .menu {
- display: none;
- height: 0;
- width: 0;
- overflow: hidden;
- }
- }
-
- /* Visible */
- .ui.simple.visible.dropdown > .menu {
- display: block;
- }
- & when (@variationDropdownScrolling) {
- /* Scrolling */
- .ui.simple.scrolling.active.dropdown > .menu,
- .ui.simple.scrolling.dropdown:hover > .menu {
- overflow-x: hidden;
- overflow-y: auto;
- }
- }
-}
-
-& when (@variationDropdownFluid) {
- /*--------------
- Fluid
- ---------------*/
-
- .ui.fluid.dropdown {
- display: block;
- width: 100% !important;
- min-width: 0;
- }
- .ui.fluid.dropdown > .dropdown.icon {
- float: right;
- }
-}
-
-& when (@variationDropdownFloating) {
- /*--------------
- Floating
- ---------------*/
-
- .ui.floating.dropdown .menu {
- left: 0;
- right: auto;
- box-shadow: @floatingMenuBoxShadow !important;
- border-radius: @floatingMenuBorderRadius !important;
- }
- .ui.floating.dropdown > .menu {
- border-radius: @floatingMenuBorderRadius !important;
- }
- .ui:not(.upward).floating.dropdown > .menu {
- margin-top: @floatingMenuDistance;
- }
- .ui.upward.floating.dropdown > .menu {
- margin-bottom: @floatingMenuDistance;
- }
-}
-
-& when (@variationDropdownPointing) {
- /*--------------
- Pointing
- ---------------*/
-
- .ui.pointing.dropdown > .menu {
- top: 100%;
- margin-top: @pointingMenuDistance;
- border-radius: @pointingMenuBorderRadius;
- }
-
- .ui.pointing.dropdown > .menu:not(.hidden):after {
- display: block;
- position: absolute;
- pointer-events: none;
- content: '';
- visibility: visible;
- transform: rotate(45deg);
-
- width: @pointingArrowSize;
- height: @pointingArrowSize;
- box-shadow: @pointingArrowBoxShadow;
- background: @pointingArrowBackground;
- z-index: @pointingArrowZIndex;
- }
-
- .ui.pointing.dropdown > .menu:not(.hidden):after {
- top: @pointingArrowOffset;
- left: 50%;
- margin: 0 0 0 @pointingArrowOffset;
- }
-
- /* Top Left Pointing */
- .ui.top.left.pointing.dropdown > .menu {
- top: 100%;
- bottom: auto;
- left: 0;
- right: auto;
- margin: @pointingArrowDistanceFromEdge 0 0;
- }
- .ui.top.left.pointing.dropdown > .menu {
- top: 100%;
- bottom: auto;
- left: 0;
- right: auto;
- margin: @pointingArrowDistanceFromEdge 0 0;
- }
- .ui.top.left.pointing.dropdown > .menu:after {
- top: @pointingArrowOffset;
- left: @pointingArrowDistanceFromEdge;
- right: auto;
- margin: 0;
- transform: rotate(45deg);
- }
- /* Top Right Pointing */
- .ui.top.right.pointing.dropdown > .menu {
- top: 100%;
- bottom: auto;
- right: 0;
- left: auto;
- margin: @pointingArrowDistanceFromEdge 0 0;
- }
- .ui.top.pointing.dropdown > .left.menu:after,
- .ui.top.right.pointing.dropdown > .menu:after {
- top: @pointingArrowOffset;
- left: auto !important;
- right: @pointingArrowDistanceFromEdge !important;
- margin: 0;
- transform: rotate(45deg);
- }
-
- /* Left Pointing */
- .ui.left.pointing.dropdown > .menu {
- top: 0;
- left: 100%;
- right: auto;
- margin: 0 0 0 @pointingArrowDistanceFromEdge;
- }
- .ui.left.pointing.dropdown > .menu:after {
- top: 1em;
- left: @pointingArrowOffset;
- margin: 0 0 0 0;
- transform: rotate(-45deg);
- }
- .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
- left: auto !important;
- right: 100% !important;
- margin: 0 @pointingArrowDistanceFromEdge 0 0;
- }
- .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
- top: 1em;
- left: auto;
- right: @pointingArrowOffset;
- margin: 0 0 0 0;
- transform: rotate(135deg);
- }
-
-
- /* Right Pointing */
- .ui.right.pointing.dropdown > .menu {
- top: 0;
- left: auto;
- right: 100%;
- margin: 0 @pointingArrowDistanceFromEdge 0 0;
- }
- .ui.right.pointing.dropdown > .menu:after {
- top: 1em;
- left: auto;
- right: @pointingArrowOffset;
- margin: 0 0 0 0;
- transform: rotate(135deg);
- }
-
- /* Bottom Pointing */
- .ui.bottom.pointing.dropdown > .menu {
- top: auto;
- bottom: 100%;
- left: 0;
- right: auto;
- margin: 0 0 @pointingArrowDistanceFromEdge ;
- }
- .ui.bottom.pointing.dropdown > .menu:after {
- top: auto;
- bottom: @pointingArrowOffset;
- right: auto;
- margin: 0;
- transform: rotate(-135deg);
- }
- /* Reverse Sub-Menu Direction */
- .ui.bottom.pointing.dropdown > .menu .menu {
- top: auto !important;
- bottom: 0 !important;
- }
-
- /* Bottom Left */
- .ui.bottom.left.pointing.dropdown > .menu {
- left: 0;
- right: auto;
- }
- .ui.bottom.left.pointing.dropdown > .menu:after {
- left: @pointingArrowDistanceFromEdge;
- right: auto;
- }
-
- /* Bottom Right */
- .ui.bottom.right.pointing.dropdown > .menu {
- right: 0;
- left: auto;
- }
- .ui.bottom.right.pointing.dropdown > .menu:after {
- left: auto;
- right: @pointingArrowDistanceFromEdge;
- }
-
- /* Upward pointing */
- .ui.pointing.upward.dropdown .menu,
- .ui.top.pointing.upward.dropdown .menu {
- top: auto !important;
- bottom: 100% !important;
- margin: 0 0 @pointingMenuDistance;
- border-radius: @pointingUpwardMenuBorderRadius;
- }
- .ui.pointing.upward.dropdown .menu:after,
- .ui.top.pointing.upward.dropdown .menu:after {
- top: 100% !important;
- bottom: auto !important;
- box-shadow: @pointingUpwardArrowBoxShadow;
- margin: @pointingArrowOffset 0 0;
- }
-
- /* Right Pointing Upward */
- .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
- top: auto !important;
- bottom: 0 !important;
- margin: 0 @pointingArrowDistanceFromEdge 0 0;
- }
- .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
- top: auto !important;
- bottom: 0 !important;
- margin: 0 0 @pointingArrowDistanceFromEdge 0;
- box-shadow: @pointingArrowBoxShadow;
- }
-
-
- /* Left Pointing Upward */
- .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
- top: auto !important;
- bottom: 0 !important;
- margin: 0 0 0 @pointingArrowDistanceFromEdge;
- }
- .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
- top: auto !important;
- bottom: 0 !important;
- margin: 0 0 @pointingArrowDistanceFromEdge 0;
- box-shadow: @pointingArrowBoxShadow;
- }
-}
-
-/*--------------------
- Sizes
----------------------*/
-
-.ui.dropdown,
-.ui.dropdown .menu > .item {
- font-size: @medium;
-}
-& when not (@variationDropdownSizes = false) {
- each(@variationDropdownSizes, {
- @s: @@value;
- .ui.@{value}.dropdown,
- .ui.@{value}.dropdown .menu > .item {
- font-size: @s;
- }
- })
-}
-
-& when (@variationDropdownInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- /* General rules and basic dropdowns */
- .ui.inverted.dropdown .menu {
- background: @invertedMenuBackground;
- box-shadow: @invertedMenuBoxShadow;
- border: @invertedMenuBorder;
- }
-
- .ui.inverted.dropdown .menu > .item {
- color: @invertedMenuColor;
- }
-
- .ui.inverted.dropdown .menu .active.item {
- background: @invertedActiveItemBackground;
- color: @invertedActiveItemColor;
- box-shadow: @invertedActiveItemBoxShadow;
- }
-
- .ui.inverted.dropdown .menu > .item:hover {
- background: @invertedHoveredItemBackground;
- color: @invertedHoveredItemColor;
- }
-
- .ui.inverted.dropdown.selected,
- .ui.inverted.dropdown .menu .selected.item {
- background: @invertedSelectedBackground;
- color: @invertedSelectedColor;
- }
-
- .ui.inverted.dropdown .menu > .header {
- color: @invertedMenuHeaderColor;
- }
-
- .ui.inverted.dropdown > .text > .description,
- .ui.inverted.dropdown .menu > .item > .description {
- color: @invertedItemDescriptionColor;
- }
-
- .ui.inverted.dropdown .menu > .divider {
- border-top: @invertedMenuDividerBorder;
- }
-
- .ui.inverted.dropdown .scrolling.menu {
- border: none;
- border-top: @invertedMenuBorder;
- }
-
- & when (@variationDropdownSelection) {
- /* Selection */
- .ui.inverted.selection.dropdown {
- border: @invertedSelectionBorder;
- background: @invertedSelectionBackground;
- color: @invertedSelectionTextColor;
- }
-
- .ui.inverted.selection.dropdown:hover {
- border-color: @invertedSelectionHoverBorderColor;
- box-shadow: @invertedSelectionHoverBoxShadow;
- }
-
- .ui.inverted.selection.dropdown input {
- color: @invertedSelectionInputTextColor;
- }
-
- .ui.inverted.selection.visible.dropdown > .text:not(.default) {
- color: @invertedSelectionVisibleTextColor;
- }
-
- .ui.inverted.selection.active.dropdown .menu,
- .ui.inverted.selection.active.dropdown:hover {
- border-color: @invertedSelectionVisibleBorderColor;
- }
-
- .ui.inverted.selection.dropdown .menu > .item {
- border-top: @invertedSelectionItemDivider;
- }
- }
-
- .ui.inverted.dropdown:not(.button) > .default.text,
- .ui.inverted.default.dropdown:not(.button) > .text {
- color: @invertedDefaultTextColor;
- }
- .ui.inverted.dropdown:not(.button) > input:focus ~ .default.text,
- .ui.inverted.default.dropdown:not(.button) > input:focus ~ .text {
- color: @invertedDefaultTextFocusColor;
- }
-
- .ui.inverted.active.search.dropdown input.search:focus + .text i.icon,
- .ui.inverted.active.search.dropdown input.search:focus + .text .flag {
- opacity: @invertedSelectionTextUnderlayIconOpacity;
- }
- .ui.inverted.active.search.dropdown input.search:focus + .text {
- color: @invertedSelectionTextUnderlayColor !important;
- }
-
- .ui.inverted.dropdown .menu > .message:not(.ui) {
- color: @invertedMessageColor;
- }
-
- /* Fixing the border */
- .ui.inverted.dropdown .menu > .item:first-child {
- border-top-width: 0;
- }
-
- & when (@variationDropdownMultiple) {
- /* Labels */
- .ui.inverted.multiple.dropdown > .label {
- background-color: @invertedLabelBackgroundColor;
- background-image: @invertedLabelBackgroundImage;
- color: @invertedLabelColor;
- box-shadow: @invertedLabelBoxShadow;
- }
-
- .ui.inverted.multiple.dropdown > .label:hover {
- background-color: @invertedLabelHoverBackgroundColor;
- border-color: @invertedLabelHoverBackgroundColor;
-
- background-image: @invertedLabelHoverBackgroundImage;
- color: @invertedLabelHoverTextColor;
- }
-
- .ui.inverted.multiple.dropdown > .label > .close.icon,
- .ui.inverted.multiple.dropdown > .label > .delete.icon {
- opacity: @invertedLabelIconOpacity;
- }
-
- .ui.inverted.multiple.dropdown > .label > .close.icon:hover,
- .ui.inverted.multiple.dropdown > .label > .delete.icon:hover {
- opacity: @invertedLabelIconHoverOpacity;
- }
- }
-
- /* Selection for form elements */
- .ui.inverted.dropdown textarea::-webkit-selection,
- .ui.inverted.dropdown input::-webkit-selection {
- background-color: @invertedInputHighlightBackground;
- color: @invertedInputHighlightColor;
- }
- .ui.inverted.dropdown textarea::-moz-selection,
- .ui.inverted.dropdown input::-moz-selection {
- background-color: @invertedInputHighlightBackground;
- color: @invertedInputHighlightColor;
- }
- .ui.inverted.dropdown textarea::selection,
- .ui.inverted.dropdown input::selection {
- background-color: @invertedInputHighlightBackground;
- color: @invertedInputHighlightColor;
- }
-
- /* Scrollbars */
- .ui.inverted.dropdown .menu::-webkit-scrollbar-track {
- background: @trackInvertedBackground;
- }
- .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb {
- background: @thumbInvertedBackground;
- }
- .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive {
- background: @thumbInvertedInactiveBackground;
- }
- .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
- background: @thumbInvertedHoverBackground;
- }
- & when (@variationDropdownPointing) {
- .ui.inverted.pointing.dropdown > .menu:after {
- background: @invertedPointingArrowBackground;
- box-shadow: @invertedPointingArrowBoxShadow;
- }
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/embed.js b/semantic/src/definitions/modules/embed.js
deleted file mode 100644
index 06fed09..0000000
--- a/semantic/src/definitions/modules/embed.js
+++ /dev/null
@@ -1,709 +0,0 @@
-/*!
- * # Fomantic-UI - Embed
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-"use strict";
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.embed = 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
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.embed.settings, parameters)
- : $.extend({}, $.fn.embed.settings),
-
- selector = settings.selector,
- className = settings.className,
- sources = settings.sources,
- error = settings.error,
- metadata = settings.metadata,
- namespace = settings.namespace,
- templates = settings.templates,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $placeholder = $module.find(selector.placeholder),
- $icon = $module.find(selector.icon),
- $embed = $module.find(selector.embed),
-
- element = this,
- instance = $module.data(moduleNamespace),
- module
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing embed');
- module.determine.autoplay();
- module.create();
- module.bind.events();
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous instance of embed');
- module.reset();
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing selector cache');
- $placeholder = $module.find(selector.placeholder);
- $icon = $module.find(selector.icon);
- $embed = $module.find(selector.embed);
- },
-
- bind: {
- events: function() {
- if( module.has.placeholder() ) {
- module.debug('Adding placeholder events');
- $module
- .on('click' + eventNamespace, selector.placeholder, module.createAndShow)
- .on('click' + eventNamespace, selector.icon, module.createAndShow)
- ;
- }
- }
- },
-
- create: function() {
- var
- placeholder = module.get.placeholder()
- ;
- if(placeholder) {
- module.createPlaceholder();
- }
- else {
- module.createAndShow();
- }
- },
-
- createPlaceholder: function(placeholder) {
- var
- icon = module.get.icon(),
- url = module.get.url(),
- embed = module.generate.embed(url)
- ;
- placeholder = placeholder || module.get.placeholder();
- $module.html( templates.placeholder(placeholder, icon) );
- module.debug('Creating placeholder for embed', placeholder, icon);
- },
-
- createEmbed: function(url) {
- module.refresh();
- url = url || module.get.url();
- $embed = $('<div/>')
- .addClass(className.embed)
- .html( module.generate.embed(url) )
- .appendTo($module)
- ;
- settings.onCreate.call(element, url);
- module.debug('Creating embed object', $embed);
- },
-
- changeEmbed: function(url) {
- $embed
- .html( module.generate.embed(url) )
- ;
- },
-
- createAndShow: function() {
- module.createEmbed();
- module.show();
- },
-
- // sets new embed
- change: function(source, id, url) {
- module.debug('Changing video to ', source, id, url);
- $module
- .data(metadata.source, source)
- .data(metadata.id, id)
- ;
- if(url) {
- $module.data(metadata.url, url);
- }
- else {
- $module.removeData(metadata.url);
- }
- if(module.has.embed()) {
- module.changeEmbed();
- }
- else {
- module.create();
- }
- },
-
- // clears embed
- reset: function() {
- module.debug('Clearing embed and showing placeholder');
- module.remove.data();
- module.remove.active();
- module.remove.embed();
- module.showPlaceholder();
- settings.onReset.call(element);
- },
-
- // shows current embed
- show: function() {
- module.debug('Showing embed');
- module.set.active();
- settings.onDisplay.call(element);
- },
-
- hide: function() {
- module.debug('Hiding embed');
- module.showPlaceholder();
- },
-
- showPlaceholder: function() {
- module.debug('Showing placeholder image');
- module.remove.active();
- settings.onPlaceholderDisplay.call(element);
- },
-
- get: {
- id: function() {
- return settings.id || $module.data(metadata.id);
- },
- placeholder: function() {
- return settings.placeholder || $module.data(metadata.placeholder);
- },
- icon: function() {
- return (settings.icon)
- ? settings.icon
- : ($module.data(metadata.icon) !== undefined)
- ? $module.data(metadata.icon)
- : module.determine.icon()
- ;
- },
- source: function(url) {
- return (settings.source)
- ? settings.source
- : ($module.data(metadata.source) !== undefined)
- ? $module.data(metadata.source)
- : module.determine.source()
- ;
- },
- type: function() {
- var source = module.get.source();
- return (sources[source] !== undefined)
- ? sources[source].type
- : false
- ;
- },
- url: function() {
- return (settings.url)
- ? settings.url
- : ($module.data(metadata.url) !== undefined)
- ? $module.data(metadata.url)
- : module.determine.url()
- ;
- }
- },
-
- determine: {
- autoplay: function() {
- if(module.should.autoplay()) {
- settings.autoplay = true;
- }
- },
- source: function(url) {
- var
- matchedSource = false
- ;
- url = url || module.get.url();
- if(url) {
- $.each(sources, function(name, source) {
- if(url.search(source.domain) !== -1) {
- matchedSource = name;
- return false;
- }
- });
- }
- return matchedSource;
- },
- icon: function() {
- var
- source = module.get.source()
- ;
- return (sources[source] !== undefined)
- ? sources[source].icon
- : false
- ;
- },
- url: function() {
- var
- id = settings.id || $module.data(metadata.id),
- source = settings.source || $module.data(metadata.source),
- url
- ;
- url = (sources[source] !== undefined)
- ? sources[source].url.replace('{id}', id)
- : false
- ;
- if(url) {
- $module.data(metadata.url, url);
- }
- return url;
- }
- },
-
-
- set: {
- active: function() {
- $module.addClass(className.active);
- }
- },
-
- remove: {
- data: function() {
- $module
- .removeData(metadata.id)
- .removeData(metadata.icon)
- .removeData(metadata.placeholder)
- .removeData(metadata.source)
- .removeData(metadata.url)
- ;
- },
- active: function() {
- $module.removeClass(className.active);
- },
- embed: function() {
- $embed.empty();
- }
- },
-
- encode: {
- parameters: function(parameters) {
- var
- urlString = [],
- index
- ;
- for (index in parameters) {
- urlString.push( encodeURIComponent(index) + '=' + encodeURIComponent( parameters[index] ) );
- }
- return urlString.join('&amp;');
- }
- },
-
- generate: {
- embed: function(url) {
- module.debug('Generating embed html');
- var
- source = module.get.source(),
- html,
- parameters
- ;
- url = module.get.url(url);
- if(url) {
- parameters = module.generate.parameters(source);
- html = templates.iframe(url, parameters);
- }
- else {
- module.error(error.noURL, $module);
- }
- return html;
- },
- parameters: function(source, extraParameters) {
- var
- parameters = (sources[source] && sources[source].parameters !== undefined)
- ? sources[source].parameters(settings)
- : {}
- ;
- extraParameters = extraParameters || settings.parameters;
- if(extraParameters) {
- parameters = $.extend({}, parameters, extraParameters);
- }
- parameters = settings.onEmbed(parameters);
- return module.encode.parameters(parameters);
- }
- },
-
- has: {
- embed: function() {
- return ($embed.length > 0);
- },
- placeholder: function() {
- return settings.placeholder || $module.data(metadata.placeholder);
- }
- },
-
- should: {
- autoplay: function() {
- return (settings.autoplay === 'auto')
- ? (settings.placeholder || $module.data(metadata.placeholder) !== undefined)
- : settings.autoplay
- ;
- }
- },
-
- is: {
- video: function() {
- return module.get.type() == 'video';
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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($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 {
- module.error(error.method, query);
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.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.embed.settings = {
-
- name : 'Embed',
- namespace : 'embed',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- icon : false,
- source : false,
- url : false,
- id : false,
-
- // standard video settings
- autoplay : 'auto',
- color : '#444444',
- hd : true,
- brandedUI : false,
-
- // additional parameters to include with the embed
- parameters: false,
-
- onDisplay : function() {},
- onPlaceholderDisplay : function() {},
- onReset : function() {},
- onCreate : function(url) {},
- onEmbed : function(parameters) {
- return parameters;
- },
-
- metadata : {
- id : 'id',
- icon : 'icon',
- placeholder : 'placeholder',
- source : 'source',
- url : 'url'
- },
-
- error : {
- noURL : 'No URL specified',
- method : 'The method you called is not defined'
- },
-
- className : {
- active : 'active',
- embed : 'embed'
- },
-
- selector : {
- embed : '.embed',
- placeholder : '.placeholder',
- icon : '.icon'
- },
-
- sources: {
- youtube: {
- name : 'youtube',
- type : 'video',
- icon : 'video play',
- domain : 'youtube.com',
- url : '//www.youtube.com/embed/{id}',
- parameters: function(settings) {
- return {
- autohide : !settings.brandedUI,
- autoplay : settings.autoplay,
- color : settings.color || undefined,
- hq : settings.hd,
- jsapi : settings.api,
- modestbranding : !settings.brandedUI
- };
- }
- },
- vimeo: {
- name : 'vimeo',
- type : 'video',
- icon : 'video play',
- domain : 'vimeo.com',
- url : '//player.vimeo.com/video/{id}',
- parameters: function(settings) {
- return {
- api : settings.api,
- autoplay : settings.autoplay,
- byline : settings.brandedUI,
- color : settings.color || undefined,
- portrait : settings.brandedUI,
- title : settings.brandedUI
- };
- }
- }
- },
-
- templates: {
- iframe : function(url, parameters) {
- var src = url;
- if (parameters) {
- src += '?' + parameters;
- }
- return ''
- + '<iframe src="' + src + '"'
- + ' width="100%" height="100%"'
- + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
- ;
- },
- placeholder : function(image, icon) {
- var
- html = ''
- ;
- if(icon) {
- html += '<i class="' + icon + ' icon"></i>';
- }
- if(image) {
- html += '<img class="placeholder" src="' + image + '">';
- }
- return html;
- }
- },
-
- // NOT YET IMPLEMENTED
- api : false,
- onPause : function() {},
- onPlay : function() {},
- onStop : function() {}
-
-};
-
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/embed.less b/semantic/src/definitions/modules/embed.less
deleted file mode 100644
index 46f13a0..0000000
--- a/semantic/src/definitions/modules/embed.less
+++ /dev/null
@@ -1,160 +0,0 @@
-/*!
- * # Fomantic-UI - Video
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'embed';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Types
-*******************************/
-
-.ui.embed {
- position: relative;
- max-width: 100%;
- height: 0;
- overflow: hidden;
- background: @background;
- padding-bottom: @widescreenRatio;
-}
-
-/*-----------------
- Embedded Content
-------------------*/
-
-.ui.embed iframe,
-.ui.embed embed,
-.ui.embed object {
- position: absolute;
- border: none;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- overflow: hidden;
-}
-
-/*-----------------
- Embed
-------------------*/
-
-.ui.embed > .embed {
- display: none;
-}
-
-/*--------------
- Placeholder
----------------*/
-
-.ui.embed > .placeholder {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- display: block;
- width: 100%;
- height: 100%;
- background-color: @placeholderBackground;
-}
-
-/*--------------
- Icon
----------------*/
-
-.ui.embed > i.icon {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 2;
-}
-.ui.embed > i.icon:after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 3;
- content: '';
- background: @placeholderBackground;
- opacity: @placeholderBackgroundOpacity;
- transition: @placeholderBackgroundTransition;
-}
-.ui.embed > i.icon:before {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
-
- color: @iconColor;
- font-size: @iconSize;
- text-shadow: @iconShadow;
- transition: @iconTransition;
- z-index: @iconZIndex;
-}
-
-/*******************************
- States
-*******************************/
-
-/*--------------
- Hover
----------------*/
-
-.ui.embed i.icon:hover:after {
- background: @hoverPlaceholderBackground;
- opacity: @hoverPlaceholderBackgroundOpacity;
-}
-.ui.embed i.icon:hover:before {
- color: @hoverIconColor;
-}
-
-/*--------------
- Active
----------------*/
-
-.ui.active.embed > i.icon,
-.ui.active.embed > .placeholder {
- display: none;
-}
-.ui.active.embed > .embed {
- display: block;
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationEmbedRatio) {
- .ui.square.embed {
- padding-bottom: @squareRatio;
- }
- .ui[class*="4:3"].embed {
- padding-bottom: @standardRatio;
- }
- .ui[class*="16:9"].embed {
- padding-bottom: @widescreenRatio;
- }
- .ui[class*="21:9"].embed {
- padding-bottom: @ultraWidescreenRatio;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/modal.js b/semantic/src/definitions/modules/modal.js
deleted file mode 100644
index 420ecc2..0000000
--- a/semantic/src/definitions/modules/modal.js
+++ /dev/null
@@ -1,1209 +0,0 @@
-/*!
- * # Fomantic-UI - Modal
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.modal = function(parameters) {
- var
- $allModules = $(this),
- $window = $(window),
- $document = $(document),
- $body = $('body'),
-
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
- returnedValue
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.modal.settings, parameters)
- : $.extend({}, $.fn.modal.settings),
-
- selector = settings.selector,
- className = settings.className,
- namespace = settings.namespace,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $context = $(settings.context),
- $close = $module.find(selector.close),
-
- $allModals,
- $otherModals,
- $focusedElement,
- $dimmable,
- $dimmer,
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- ignoreRepeatedEvents = false,
-
- initialMouseDownInModal,
- initialMouseDownInScrollbar,
- initialBodyMargin = '',
- tempBodyMargin = '',
-
- elementEventNamespace,
- id,
- observer,
- module
- ;
- module = {
-
- initialize: function() {
- module.cache = {};
- module.verbose('Initializing dimmer', $context);
-
- module.create.id();
- module.create.dimmer();
-
- if ( settings.allowMultiple ) {
- module.create.innerDimmer();
- }
- if (!settings.centered){
- $module.addClass('top aligned');
- }
- module.refreshModals();
-
- module.bind.events();
- if(settings.observeChanges) {
- module.observeChanges();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of modal');
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- create: {
- dimmer: function() {
- var
- defaultSettings = {
- debug : settings.debug,
- dimmerName : 'modals'
- },
- dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
- ;
- if($.fn.dimmer === undefined) {
- module.error(error.dimmer);
- return;
- }
- module.debug('Creating dimmer');
- $dimmable = $context.dimmer(dimmerSettings);
- if(settings.detachable) {
- module.verbose('Modal is detachable, moving content into dimmer');
- $dimmable.dimmer('add content', $module);
- }
- else {
- module.set.undetached();
- }
- $dimmer = $dimmable.dimmer('get dimmer');
- },
- id: function() {
- id = (Math.random().toString(16) + '000000000').substr(2, 8);
- elementEventNamespace = '.' + id;
- module.verbose('Creating unique id for element', id);
- },
- innerDimmer: function() {
- if ( $module.find(selector.dimmer).length == 0 ) {
- $module.prepend('<div class="ui inverted dimmer"></div>');
- }
- }
- },
-
- destroy: function() {
- if (observer) {
- observer.disconnect();
- }
- module.verbose('Destroying previous modal');
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- $window.off(elementEventNamespace);
- $dimmer.off(elementEventNamespace);
- $close.off(eventNamespace);
- $context.dimmer('destroy');
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- observer = new MutationObserver(function(mutations) {
- module.debug('DOM tree modified, refreshing');
- module.refresh();
- });
- observer.observe(element, {
- childList : true,
- subtree : true
- });
- module.debug('Setting up mutation observer', observer);
- }
- },
-
- refresh: function() {
- module.remove.scrolling();
- module.cacheSizes();
- if(!module.can.useFlex()) {
- module.set.modalOffset();
- }
- module.set.screenHeight();
- module.set.type();
- },
-
- refreshModals: function() {
- $otherModals = $module.siblings(selector.modal);
- $allModals = $otherModals.add($module);
- },
-
- attachEvents: function(selector, event) {
- var
- $toggle = $(selector)
- ;
- event = $.isFunction(module[event])
- ? module[event]
- : module.toggle
- ;
- if($toggle.length > 0) {
- module.debug('Attaching modal events to element', selector, event);
- $toggle
- .off(eventNamespace)
- .on('click' + eventNamespace, event)
- ;
- }
- else {
- module.error(error.notFound, selector);
- }
- },
-
- bind: {
- events: function() {
- module.verbose('Attaching events');
- $module
- .on('click' + eventNamespace, selector.close, module.event.close)
- .on('click' + eventNamespace, selector.approve, module.event.approve)
- .on('click' + eventNamespace, selector.deny, module.event.deny)
- ;
- $window
- .on('resize' + elementEventNamespace, module.event.resize)
- ;
- },
- scrollLock: function() {
- // touch events default to passive, due to changes in chrome to optimize mobile perf
- $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
- }
- },
-
- unbind: {
- scrollLock: function() {
- $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
- }
- },
-
- get: {
- id: function() {
- return (Math.random().toString(16) + '000000000').substr(2, 8);
- }
- },
-
- event: {
- approve: function() {
- if(ignoreRepeatedEvents || settings.onApprove.call(element, $(this)) === false) {
- module.verbose('Approve callback returned false cancelling hide');
- return;
- }
- ignoreRepeatedEvents = true;
- module.hide(function() {
- ignoreRepeatedEvents = false;
- });
- },
- preventScroll: function(event) {
- if(event.target.className.indexOf('dimmer') !== -1) {
- event.preventDefault();
- }
- },
- deny: function() {
- if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) {
- module.verbose('Deny callback returned false cancelling hide');
- return;
- }
- ignoreRepeatedEvents = true;
- module.hide(function() {
- ignoreRepeatedEvents = false;
- });
- },
- close: function() {
- module.hide();
- },
- mousedown: function(event) {
- var
- $target = $(event.target),
- isRtl = module.is.rtl();
- ;
- initialMouseDownInModal = ($target.closest(selector.modal).length > 0);
- if(initialMouseDownInModal) {
- module.verbose('Mouse down event registered inside the modal');
- }
- initialMouseDownInScrollbar = module.is.scrolling() && ((!isRtl && $(window).outerWidth() - settings.scrollbarWidth <= event.clientX) || (isRtl && settings.scrollbarWidth >= event.clientX));
- if(initialMouseDownInScrollbar) {
- module.verbose('Mouse down event registered inside the scrollbar');
- }
- },
- mouseup: function(event) {
- if(!settings.closable) {
- module.verbose('Dimmer clicked but closable setting is disabled');
- return;
- }
- if(initialMouseDownInModal) {
- module.debug('Dimmer clicked but mouse down was initially registered inside the modal');
- return;
- }
- if(initialMouseDownInScrollbar){
- module.debug('Dimmer clicked but mouse down was initially registered inside the scrollbar');
- return;
- }
- var
- $target = $(event.target),
- isInModal = ($target.closest(selector.modal).length > 0),
- isInDOM = $.contains(document.documentElement, event.target)
- ;
- if(!isInModal && isInDOM && module.is.active() && $module.hasClass(className.front) ) {
- module.debug('Dimmer clicked, hiding all modals');
- if(settings.allowMultiple) {
- if(!module.hideAll()) {
- return;
- }
- }
- else if(!module.hide()){
- return;
- }
- module.remove.clickaway();
- }
- },
- debounce: function(method, delay) {
- clearTimeout(module.timer);
- module.timer = setTimeout(method, delay);
- },
- keyboard: function(event) {
- var
- keyCode = event.which,
- escapeKey = 27
- ;
- if(keyCode == escapeKey) {
- if(settings.closable) {
- module.debug('Escape key pressed hiding modal');
- if ( $module.hasClass(className.front) ) {
- module.hide();
- }
- }
- else {
- module.debug('Escape key pressed, but closable is set to false');
- }
- event.preventDefault();
- }
- },
- resize: function() {
- if( $dimmable.dimmer('is active') && ( module.is.animating() || module.is.active() ) ) {
- requestAnimationFrame(module.refresh);
- }
- }
- },
-
- toggle: function() {
- if( module.is.active() || module.is.animating() ) {
- module.hide();
- }
- else {
- module.show();
- }
- },
-
- show: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- module.refreshModals();
- module.set.dimmerSettings();
- module.set.dimmerStyles();
-
- module.showModal(callback);
- },
-
- hide: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- module.refreshModals();
- return module.hideModal(callback);
- },
-
- showModal: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( module.is.animating() || !module.is.active() ) {
- module.showDimmer();
- module.cacheSizes();
- module.set.bodyMargin();
- if(module.can.useFlex()) {
- module.remove.legacy();
- }
- else {
- module.set.legacy();
- module.set.modalOffset();
- module.debug('Using non-flex legacy modal positioning.');
- }
- module.set.screenHeight();
- module.set.type();
- module.set.clickaway();
-
- if( !settings.allowMultiple && module.others.active() ) {
- module.hideOthers(module.showModal);
- }
- else {
- ignoreRepeatedEvents = false;
- if( settings.allowMultiple ) {
- if ( module.others.active() ) {
- $otherModals.filter('.' + className.active).find(selector.dimmer).addClass('active');
- }
-
- if ( settings.detachable ) {
- $module.detach().appendTo($dimmer);
- }
- }
- settings.onShow.call(element);
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- module.debug('Showing modal with css animations');
- $module
- .transition({
- debug : settings.debug,
- animation : settings.transition + ' in',
- queue : settings.queue,
- duration : settings.duration,
- useFailSafe : true,
- onComplete : function() {
- settings.onVisible.apply(element);
- if(settings.keyboardShortcuts) {
- module.add.keyboardShortcuts();
- }
- module.save.focus();
- module.set.active();
- if(settings.autofocus) {
- module.set.autofocus();
- }
- callback();
- }
- })
- ;
- }
- else {
- module.error(error.noTransition);
- }
- }
- }
- else {
- module.debug('Modal is already visible');
- }
- },
-
- hideModal: function(callback, keepDimmed, hideOthersToo) {
- var
- $previousModal = $otherModals.filter('.' + className.active).last()
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- module.debug('Hiding modal');
- if(settings.onHide.call(element, $(this)) === false) {
- module.verbose('Hide callback returned false cancelling hide');
- ignoreRepeatedEvents = false;
- return false;
- }
-
- if( module.is.animating() || module.is.active() ) {
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- module.remove.active();
- $module
- .transition({
- debug : settings.debug,
- animation : settings.transition + ' out',
- queue : settings.queue,
- duration : settings.duration,
- useFailSafe : true,
- onStart : function() {
- if(!module.others.active() && !module.others.animating() && !keepDimmed) {
- module.hideDimmer();
- }
- if( settings.keyboardShortcuts && !module.others.active() ) {
- module.remove.keyboardShortcuts();
- }
- },
- onComplete : function() {
- module.unbind.scrollLock();
- if ( settings.allowMultiple ) {
- $previousModal.addClass(className.front);
- $module.removeClass(className.front);
-
- if ( hideOthersToo ) {
- $allModals.find(selector.dimmer).removeClass('active');
- }
- else {
- $previousModal.find(selector.dimmer).removeClass('active');
- }
- }
- settings.onHidden.call(element);
- module.remove.dimmerStyles();
- module.restore.focus();
- callback();
- }
- })
- ;
- }
- else {
- module.error(error.noTransition);
- }
- }
- },
-
- showDimmer: function() {
- if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
- module.save.bodyMargin();
- module.debug('Showing dimmer');
- $dimmable.dimmer('show');
- }
- else {
- module.debug('Dimmer already visible');
- }
- },
-
- hideDimmer: function() {
- if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
- module.unbind.scrollLock();
- $dimmable.dimmer('hide', function() {
- module.restore.bodyMargin();
- module.remove.clickaway();
- module.remove.screenHeight();
- });
- }
- else {
- module.debug('Dimmer is not visible cannot hide');
- return;
- }
- },
-
- hideAll: function(callback) {
- var
- $visibleModals = $allModals.filter('.' + className.active + ', .' + className.animating)
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( $visibleModals.length > 0 ) {
- module.debug('Hiding all visible modals');
- var hideOk = true;
-//check in reverse order trying to hide most top displayed modal first
- $($visibleModals.get().reverse()).each(function(index,element){
- if(hideOk){
- hideOk = $(element).modal('hide modal', callback, false, true);
- }
- });
- if(hideOk) {
- module.hideDimmer();
- }
- return hideOk;
- }
- },
-
- hideOthers: function(callback) {
- var
- $visibleModals = $otherModals.filter('.' + className.active + ', .' + className.animating)
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( $visibleModals.length > 0 ) {
- module.debug('Hiding other modals', $otherModals);
- $visibleModals
- .modal('hide modal', callback, true)
- ;
- }
- },
-
- others: {
- active: function() {
- return ($otherModals.filter('.' + className.active).length > 0);
- },
- animating: function() {
- return ($otherModals.filter('.' + className.animating).length > 0);
- }
- },
-
-
- add: {
- keyboardShortcuts: function() {
- module.verbose('Adding keyboard shortcuts');
- $document
- .on('keyup' + eventNamespace, module.event.keyboard)
- ;
- }
- },
-
- save: {
- focus: function() {
- var
- $activeElement = $(document.activeElement),
- inCurrentModal = $activeElement.closest($module).length > 0
- ;
- if(!inCurrentModal) {
- $focusedElement = $(document.activeElement).blur();
- }
- },
- bodyMargin: function() {
- initialBodyMargin = $body.css('margin-'+(module.can.leftBodyScrollbar() ? 'left':'right'));
- var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')),
- bodyScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
- tempBodyMargin = bodyMarginRightPixel + bodyScrollbarWidth;
- }
- },
-
- restore: {
- focus: function() {
- if($focusedElement && $focusedElement.length > 0 && settings.restoreFocus) {
- $focusedElement.focus();
- }
- },
- bodyMargin: function() {
- var position = module.can.leftBodyScrollbar() ? 'left':'right';
- $body.css('margin-'+position, initialBodyMargin);
- $body.find(selector.bodyFixed.replace('right',position)).css('padding-'+position, initialBodyMargin);
- }
- },
-
- remove: {
- active: function() {
- $module.removeClass(className.active);
- },
- legacy: function() {
- $module.removeClass(className.legacy);
- },
- clickaway: function() {
- if (!settings.detachable) {
- $module
- .off('mousedown' + elementEventNamespace)
- ;
- }
- $dimmer
- .off('mousedown' + elementEventNamespace)
- ;
- $dimmer
- .off('mouseup' + elementEventNamespace)
- ;
- },
- dimmerStyles: function() {
- $dimmer.removeClass(className.inverted);
- $dimmable.removeClass(className.blurring);
- },
- bodyStyle: function() {
- if($body.attr('style') === '') {
- module.verbose('Removing style attribute');
- $body.removeAttr('style');
- }
- },
- screenHeight: function() {
- module.debug('Removing page height');
- $body
- .css('height', '')
- ;
- },
- keyboardShortcuts: function() {
- module.verbose('Removing keyboard shortcuts');
- $document
- .off('keyup' + eventNamespace)
- ;
- },
- scrolling: function() {
- $dimmable.removeClass(className.scrolling);
- $module.removeClass(className.scrolling);
- }
- },
-
- cacheSizes: function() {
- $module.addClass(className.loading);
- var
- scrollHeight = $module.prop('scrollHeight'),
- modalWidth = $module.outerWidth(),
- modalHeight = $module.outerHeight()
- ;
- if(module.cache.pageHeight === undefined || modalHeight !== 0) {
- $.extend(module.cache, {
- pageHeight : $(document).outerHeight(),
- width : modalWidth,
- height : modalHeight + settings.offset,
- scrollHeight : scrollHeight + settings.offset,
- contextHeight : (settings.context == 'body')
- ? $(window).height()
- : $dimmable.height(),
- });
- module.cache.topOffset = -(module.cache.height / 2);
- }
- $module.removeClass(className.loading);
- module.debug('Caching modal and container sizes', module.cache);
- },
-
- can: {
- leftBodyScrollbar: function(){
- if(module.cache.leftBodyScrollbar === undefined) {
- module.cache.leftBodyScrollbar = module.is.rtl() && ((module.is.iframe && !module.is.firefox()) || module.is.safari() || module.is.edge() || module.is.ie());
- }
- return module.cache.leftBodyScrollbar;
- },
- useFlex: function() {
- if (settings.useFlex === 'auto') {
- return settings.detachable && !module.is.ie();
- }
- if(settings.useFlex && module.is.ie()) {
- module.debug('useFlex true is not supported in IE');
- } else if(settings.useFlex && !settings.detachable) {
- module.debug('useFlex true in combination with detachable false is not supported');
- }
- return settings.useFlex;
- },
- fit: function() {
- var
- contextHeight = module.cache.contextHeight,
- verticalCenter = module.cache.contextHeight / 2,
- topOffset = module.cache.topOffset,
- scrollHeight = module.cache.scrollHeight,
- height = module.cache.height,
- paddingHeight = settings.padding,
- startPosition = (verticalCenter + topOffset)
- ;
- return (scrollHeight > height)
- ? (startPosition + scrollHeight + paddingHeight < contextHeight)
- : (height + (paddingHeight * 2) < contextHeight)
- ;
- }
- },
-
- is: {
- active: function() {
- return $module.hasClass(className.active);
- },
- ie: function() {
- if(module.cache.isIE === undefined) {
- var
- isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
- isIE = ('ActiveXObject' in window)
- ;
- module.cache.isIE = (isIE11 || isIE);
- }
- return module.cache.isIE;
- },
- animating: function() {
- return $module.transition('is supported')
- ? $module.transition('is animating')
- : $module.is(':visible')
- ;
- },
- scrolling: function() {
- return $dimmable.hasClass(className.scrolling);
- },
- modernBrowser: function() {
- // appName for IE11 reports 'Netscape' can no longer use
- return !(window.ActiveXObject || 'ActiveXObject' in window);
- },
- rtl: function() {
- if(module.cache.isRTL === undefined) {
- module.cache.isRTL = $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl';
- }
- return module.cache.isRTL;
- },
- safari: function() {
- if(module.cache.isSafari === undefined) {
- module.cache.isSafari = /constructor/i.test(window.HTMLElement) || !!window.ApplePaySession;
- }
- return module.cache.isSafari;
- },
- edge: function(){
- if(module.cache.isEdge === undefined) {
- module.cache.isEdge = !!window.setImmediate && !module.is.ie();
- }
- return module.cache.isEdge;
- },
- firefox: function(){
- if(module.cache.isFirefox === undefined) {
- module.cache.isFirefox = !!window.InstallTrigger;
- }
- return module.cache.isFirefox;
- },
- iframe: function() {
- return !(self === top);
- }
- },
-
- set: {
- autofocus: function() {
- var
- $inputs = $module.find('[tabindex], :input').filter(':visible').filter(function() {
- return $(this).closest('.disabled').length === 0;
- }),
- $autofocus = $inputs.filter('[autofocus]'),
- $input = ($autofocus.length > 0)
- ? $autofocus.first()
- : $inputs.first()
- ;
- if($input.length > 0) {
- $input.focus();
- }
- },
- bodyMargin: function() {
- var position = module.can.leftBodyScrollbar() ? 'left':'right';
- if(settings.detachable || module.can.fit()) {
- $body.css('margin-'+position, tempBodyMargin + 'px');
- }
- $body.find(selector.bodyFixed.replace('right',position)).css('padding-'+position, tempBodyMargin + 'px');
- },
- clickaway: function() {
- if (!settings.detachable) {
- $module
- .on('mousedown' + elementEventNamespace, module.event.mousedown)
- ;
- }
- $dimmer
- .on('mousedown' + elementEventNamespace, module.event.mousedown)
- ;
- $dimmer
- .on('mouseup' + elementEventNamespace, module.event.mouseup)
- ;
- },
- dimmerSettings: function() {
- if($.fn.dimmer === undefined) {
- module.error(error.dimmer);
- return;
- }
- var
- defaultSettings = {
- debug : settings.debug,
- dimmerName : 'modals',
- closable : 'auto',
- useFlex : module.can.useFlex(),
- duration : {
- show : settings.duration,
- hide : settings.duration
- }
- },
- dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
- ;
- if(settings.inverted) {
- dimmerSettings.variation = (dimmerSettings.variation !== undefined)
- ? dimmerSettings.variation + ' inverted'
- : 'inverted'
- ;
- }
- $context.dimmer('setting', dimmerSettings);
- },
- dimmerStyles: function() {
- if(settings.inverted) {
- $dimmer.addClass(className.inverted);
- }
- else {
- $dimmer.removeClass(className.inverted);
- }
- if(settings.blurring) {
- $dimmable.addClass(className.blurring);
- }
- else {
- $dimmable.removeClass(className.blurring);
- }
- },
- modalOffset: function() {
- if (!settings.detachable) {
- var canFit = module.can.fit();
- $module
- .css({
- top: (!$module.hasClass('aligned') && canFit)
- ? $(document).scrollTop() + (module.cache.contextHeight - module.cache.height) / 2
- : !canFit || $module.hasClass('top')
- ? $(document).scrollTop() + settings.padding
- : $(document).scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
- marginLeft: -(module.cache.width / 2)
- })
- ;
- } else {
- $module
- .css({
- marginTop: (!$module.hasClass('aligned') && module.can.fit())
- ? -(module.cache.height / 2)
- : settings.padding / 2,
- marginLeft: -(module.cache.width / 2)
- })
- ;
- }
- module.verbose('Setting modal offset for legacy mode');
- },
- screenHeight: function() {
- if( module.can.fit() ) {
- $body.css('height', '');
- }
- else if(!$module.hasClass('bottom')) {
- module.debug('Modal is taller than page content, resizing page height');
- $body
- .css('height', module.cache.height + (settings.padding * 2) )
- ;
- }
- },
- active: function() {
- $module.addClass(className.active + ' ' + className.front);
- $otherModals.filter('.' + className.active).removeClass(className.front);
- },
- scrolling: function() {
- $dimmable.addClass(className.scrolling);
- $module.addClass(className.scrolling);
- module.unbind.scrollLock();
- },
- legacy: function() {
- $module.addClass(className.legacy);
- },
- type: function() {
- if(module.can.fit()) {
- module.verbose('Modal fits on screen');
- if(!module.others.active() && !module.others.animating()) {
- module.remove.scrolling();
- module.bind.scrollLock();
- }
- }
- else if (!$module.hasClass('bottom')){
- module.verbose('Modal cannot fit on screen setting to scrolling');
- module.set.scrolling();
- } else {
- module.verbose('Bottom aligned modal not fitting on screen is unsupported for scrolling');
- }
- },
- undetached: function() {
- $dimmable.addClass(className.undetached);
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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 {
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.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.modal.settings = {
-
- name : 'Modal',
- namespace : 'modal',
-
- useFlex : 'auto',
- offset : 0,
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- observeChanges : false,
-
- allowMultiple : false,
- detachable : true,
- closable : true,
- autofocus : true,
- restoreFocus : true,
-
- inverted : false,
- blurring : false,
-
- centered : true,
-
- dimmerSettings : {
- closable : false,
- useCSS : true
- },
-
- // whether to use keyboard shortcuts
- keyboardShortcuts: true,
-
- context : 'body',
-
- queue : false,
- duration : 500,
- transition : 'scale',
-
- // padding with edge of page
- padding : 50,
- scrollbarWidth: 10,
-
- // called before show animation
- onShow : function(){},
-
- // called after show animation
- onVisible : function(){},
-
- // called before hide animation
- onHide : function(){ return true; },
-
- // called after hide animation
- onHidden : function(){},
-
- // called after approve selector match
- onApprove : function(){ return true; },
-
- // called after deny selector match
- onDeny : function(){ return true; },
-
- selector : {
- close : '> .close',
- approve : '.actions .positive, .actions .approve, .actions .ok',
- deny : '.actions .negative, .actions .deny, .actions .cancel',
- modal : '.ui.modal',
- dimmer : '> .ui.dimmer',
- bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar'
- },
- error : {
- dimmer : 'UI Dimmer, a required component is not included in this page',
- method : 'The method you called is not defined.',
- notFound : 'The element you specified could not be found'
- },
- className : {
- active : 'active',
- animating : 'animating',
- blurring : 'blurring',
- inverted : 'inverted',
- legacy : 'legacy',
- loading : 'loading',
- scrolling : 'scrolling',
- undetached : 'undetached',
- front : 'front'
- }
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/modal.less b/semantic/src/definitions/modules/modal.less
deleted file mode 100644
index e171222..0000000
--- a/semantic/src/definitions/modules/modal.less
+++ /dev/null
@@ -1,583 +0,0 @@
-/*!
- * # Fomantic-UI - Modal
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'modal';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Modal
-*******************************/
-
-.ui.modal {
- position: absolute;
- display: none;
- z-index: @zIndex;
- text-align: left;
-
- background: @background;
- border: @border;
- box-shadow: @boxShadow;
- transform-origin: @transformOrigin;
-
- flex: 0 0 auto;
-
- border-radius: @borderRadius;
- user-select: text;
- will-change: top, left, margin, transform, opacity;
-}
-
-.ui.modal > :first-child:not(.icon):not(.dimmer),
-.ui.modal > i.icon:first-child + *,
-.ui.modal > .dimmer:first-child + *:not(.icon),
-.ui.modal > .dimmer:first-child + i.icon + * {
- border-top-left-radius: @borderRadius;
- border-top-right-radius: @borderRadius;
-}
-
-.ui.modal > :last-child {
- border-bottom-left-radius: @borderRadius;
- border-bottom-right-radius: @borderRadius;
-}
-
-.ui.modal > .ui.dimmer {
- border-radius: inherit;
-}
-
-/*******************************
- Content
-*******************************/
-
-/*--------------
- Close
----------------*/
-
-.ui.modal > .close {
- cursor: pointer;
- position: absolute;
- top: @closeTop;
- right: @closeRight;
- z-index: 1;
-
- opacity: @closeOpacity;
- font-size: @closeSize;
- color: @closeColor;
-
- width: @closeHitbox;
- height: @closeHitbox;
- padding: @closePadding;
-}
-.ui.modal > .close:hover {
- opacity: 1;
-}
-
-/*--------------
- Header
----------------*/
-
-.ui.modal > .header {
- display: block;
- font-family: @headerFontFamily;
- background: @headerBackground;
- margin: @headerMargin;
- padding: @headerPadding;
- box-shadow: @headerBoxShadow;
-
- color: @headerColor;
- border-bottom: @headerBorder;
-}
-.ui.modal > .header:not(.ui) {
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
-}
-
-/*--------------
- Content
----------------*/
-
-.ui.modal > .content {
- display: block;
- width: 100%;
- font-size: @contentFontSize;
- line-height: @contentLineHeight;
- padding: @contentPadding;
- background: @contentBackground;
-}
-.ui.modal > .image.content {
- display: flex;
- flex-direction: row;
-}
-
-/* Image */
-.ui.modal > .content > .image {
- display: block;
- flex: 0 1 auto;
- width: @imageWidth;
- align-self: @imageVerticalAlign;
- max-width: 100%;
-}
-.ui.modal > [class*="top aligned"] {
- align-self: start;
-}
-.ui.modal > [class*="middle aligned"] {
- align-self: center;
-}
-.ui.modal > [class*="stretched"] {
- align-self: stretch;
-}
-
-/* Description */
-.ui.modal > .content > .description {
- display: block;
- flex: 1 0 auto;
- min-width: 0;
- align-self: @descriptionVerticalAlign;
-}
-
-.ui.modal > .content > i.icon + .description,
-.ui.modal > .content > .image + .description {
- flex: 0 1 auto;
- min-width: @descriptionMinWidth;
- width: @descriptionWidth;
- padding-left: @descriptionDistance;
-}
-
-/*rtl:ignore*/
-.ui.modal > .content > .image > i.icon {
- margin: 0;
- opacity: 1;
- width: auto;
- line-height: 1;
- font-size: @imageIconSize;
-}
-
-/*--------------
- Actions
----------------*/
-
-.ui.modal > .actions {
- background: @actionBackground;
- padding: @actionPadding;
- border-top: @actionBorder;
- text-align: @actionAlign;
-}
-.ui.modal .actions > .button:not(.fluid) {
- margin-left: @buttonDistance;
-}
-.ui.basic.modal > .actions {
- border-top:none;
-}
-
-/*-------------------
- Responsive
---------------------*/
-
-/* Modal Width */
-@media only screen and (max-width : @largestMobileScreen) {
- .ui.modal:not(.fullscreen) {
- width: @mobileWidth;
- margin: @mobileMargin;
- }
-}
-@media only screen and (min-width : @tabletBreakpoint) {
- .ui.modal:not(.fullscreen) {
- width: @tabletWidth;
- margin: @tabletMargin;
- }
-}
-@media only screen and (min-width : @computerBreakpoint) {
- .ui.modal:not(.fullscreen) {
- width: @computerWidth;
- margin: @computerMargin;
- }
-}
-@media only screen and (min-width : @largeMonitorBreakpoint) {
- .ui.modal:not(.fullscreen) {
- width: @largeMonitorWidth;
- margin: @largeMonitorMargin;
- }
-}
-@media only screen and (min-width : @widescreenMonitorBreakpoint) {
- .ui.modal:not(.fullscreen) {
- width: @widescreenMonitorWidth;
- margin: @widescreenMonitorMargin;
- }
-}
-
-/* Tablet and Mobile */
-@media only screen and (max-width : @largestTabletScreen) {
- .ui.modal > .header {
- padding-right: @closeHitbox;
- }
- .ui.modal > .close {
- top: @innerCloseTop;
- right: @innerCloseRight;
- color: @innerCloseColor;
- }
-}
-
-/* Mobile */
-@media only screen and (max-width : @largestMobileScreen) {
-
- .ui.modal > .header {
- padding: @mobileHeaderPadding !important;
- padding-right: @closeHitbox !important;
- }
- .ui.overlay.fullscreen.modal > .content.content.content {
- min-height: @overlayFullscreenScrollingContentMaxHeightMobile;
- }
- .ui.overlay.fullscreen.modal > .scrolling.content.content.content {
- max-height: @overlayFullscreenScrollingContentMaxHeightMobile;
- }
- .ui.modal > .content {
- display: block;
- padding: @mobileContentPadding !important;
- }
- .ui.modal > .close {
- top: @mobileCloseTop !important;
- right: @mobileCloseRight !important;
- }
-
- /*rtl:ignore*/
- .ui.modal .image.content {
- flex-direction: column;
- }
- .ui.modal > .content > .image {
- display: block;
- max-width: 100%;
- margin: 0 auto !important;
- text-align: center;
- padding: @mobileImagePadding !important;
- }
- .ui.modal > .content > .image > i.icon {
- font-size: @mobileImageIconSize;
- text-align: center;
- }
-
- /*rtl:ignore*/
- .ui.modal > .content > .description {
- display: block;
- width: 100% !important;
- margin: 0 !important;
- padding: @mobileDescriptionPadding !important;
- box-shadow: none;
- }
-
- /* Let Buttons Stack */
- .ui.modal > .actions {
- padding: @mobileActionPadding !important;
- }
- .ui.modal .actions > .buttons,
- .ui.modal .actions > .button {
- margin-bottom: @mobileButtonDistance;
- }
-}
-
-/*--------------
- Coupling
----------------*/
-
-.ui.inverted.dimmer > .ui.modal {
- box-shadow: @invertedBoxShadow;
-}
-
-/*******************************
- Types
-*******************************/
-& when (@variationModalBasic) {
- .ui.basic.modal {
- background-color: transparent;
- border: none;
- border-radius: 0;
- box-shadow: none !important;
- color: @basicModalColor;
- }
- .ui.basic.modal > .header,
- .ui.basic.modal > .content,
- .ui.basic.modal > .actions {
- background-color: transparent;
- }
- .ui.basic.modal > .header {
- color: @basicModalHeaderColor;
- border-bottom: none;
- }
- .ui.basic.modal > .close {
- top: @basicModalCloseTop;
- right: @basicModalCloseRight;
- color: @basicInnerCloseColor;
- }
- .ui.inverted.dimmer > .basic.modal {
- color: @basicInvertedModalColor;
- }
- .ui.inverted.dimmer > .ui.basic.modal > .header {
- color: @basicInvertedModalHeaderColor;
- }
-}
-
-& when (@variationModalLegacy) {
- /* Resort to margin positioning if legacy */
- .ui.legacy.legacy.modal,
- .ui.legacy.legacy.page.dimmer > .ui.modal {
- left: 50% !important;
- }
- .ui.legacy.legacy.modal:not(.aligned),
- .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
- top: 50%;
- }
- .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
- .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
- .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
- .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
- top: auto;
- }
- & when (@variationModalOverlay) {
- .ui.legacy.overlay.fullscreen.modal {
- margin-top: -@scrollingMargin !important;
- }
- }
-}
-
-/*******************************
- States
-*******************************/
-
-.ui.loading.modal {
- display: block;
- visibility: hidden;
- z-index: @loadingZIndex;
-}
-
-.ui.active.modal {
- display: block;
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationModalAligned) {
- /*--------------
- Aligned
- ---------------*/
-
- .modals.dimmer .ui.top.aligned.modal {
- top: @topAlignedMargin;
- }
- .modals.dimmer .ui.bottom.aligned.modal {
- bottom: @bottomAlignedMargin;
- }
-
- @media only screen and (max-width : @largestMobileScreen) {
- .modals.dimmer .ui.top.aligned.modal {
- top: @mobileTopAlignedMargin;
- }
- .modals.dimmer .ui.bottom.aligned.modal {
- bottom: @mobileBottomAlignedMargin;
- }
- }
-}
-
-& when (@variationModalScrolling) {
- /*--------------
- Scrolling
- ---------------*/
-
- /* Scrolling Dimmer */
- .scrolling.dimmable.dimmed {
- overflow: hidden;
- }
- .scrolling.dimmable > .dimmer {
- justify-content: flex-start;
- position: fixed;
- }
- .scrolling.dimmable.dimmed > .dimmer {
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
- margin: @scrollingMargin auto;
- }
-/* Fix for Firefox, Edge, IE11 */
-.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
- content:'\00A0';
- position: absolute;
- height: @scrollingMargin;
-}
- /* Undetached Scrolling */
- .scrolling.undetached.dimmable.dimmed {
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- .scrolling.undetached.dimmable.dimmed > .dimmer {
- overflow: hidden;
- }
- .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
- position: absolute;
- left: 50%;
-
- }
-
- /* Scrolling Content */
- .ui.modal > .scrolling.content {
- max-height: @scrollingContentMaxHeight;
- overflow: auto;
- }
-}
-
-& when (@variationModalOverlay) {
- .ui.overlay.fullscreen.modal > .content {
- min-height: @overlayFullscreenScrollingContentMaxHeight;
- }
- .ui.overlay.fullscreen.modal > .scrolling.content {
- max-height: @overlayFullscreenScrollingContentMaxHeight;
- }
-}
-
-& when (@variationModalFullscreen) or (@variationModalOverlay) or (@variationModalCloseInside) {
- /*--------------
- Full Screen
- ---------------*/
-
- .ui.fullscreen.modal {
- width: @fullScreenWidth;
- left: @fullScreenOffset;
- margin: @fullScreenMargin;
- }
- & when (@variationModalOverlay) {
- .ui.overlay.fullscreen.modal {
- width: 100%;
- left: 0;
- margin: 0 auto;
- top: 0;
- border-radius:0;
- }
- }
- .ui.modal > .close.inside + .header,
- .ui.fullscreen.modal > .header {
- padding-right: @closeHitbox;
- }
- .ui.modal > .close.inside,
- .ui.fullscreen.modal > .close {
- top: @innerCloseTop;
- right: @innerCloseRight;
- color: @innerCloseColor;
- }
- & when (@variationModalBasic) {
- .ui.basic.fullscreen.modal > .close {
- color: @basicInnerCloseColor;
- }
- }
-}
-/*--------------
- Size
----------------*/
-
-.ui.modal {
- font-size: @medium;
-}
-& when not (@variationModalSizes = false) {
- each(@variationModalSizes, {
- @hs: @{value}HeaderSize;
- @mw: @{value}MobileWidth;
- @mm: @{value}MobileMargin;
- @tw: @{value}TabletWidth;
- @tm: @{value}TabletMargin;
- @cw: @{value}ComputerWidth;
- @cm: @{value}ComputerMargin;
- @lw: @{value}LargeMonitorWidth;
- @lm: @{value}LargeMonitorMargin;
- @ww: @{value}WidescreenMonitorWidth;
- @wm: @{value}WidescreenMonitorMargin;
- .ui.@{value}.modal > .header:not(.ui) {
- font-size: @@hs;
- }
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.@{value}.modal {
- width: @@mw;
- margin: @@mm;
- }
- }
- @media only screen and (min-width : @tabletBreakpoint) {
- .ui.@{value}.modal {
- width: @@tw;
- margin: @@tm;
- }
- }
- @media only screen and (min-width : @computerBreakpoint) {
- .ui.@{value}.modal {
- width: @@cw;
- margin: @@cm;
- }
- }
- @media only screen and (min-width : @largeMonitorBreakpoint) {
- .ui.@{value}.modal {
- width: @@lw;
- margin: @@lm;
- }
- }
- @media only screen and (min-width : @widescreenMonitorBreakpoint) {
- .ui.@{value}.modal {
- width: @@ww;
- margin: @@wm;
- }
- }
- })
-}
-
-& when (@variationModalInverted) {
- /*****************************
- Inverted
- *******************************/
-
- .ui.inverted.modal {
- background: @invertedBackground;
- }
-
- .ui.inverted.modal > .header,
- .ui.inverted.modal > .content {
- background: @invertedBackground;
- color: @invertedHeaderColor;
- }
-
- .ui.inverted.modal > .actions {
- background: @invertedActionBackground;
- border-top: @invertedActionBorder;
- color: @invertedActionColor;
- }
-
- .ui.inverted.dimmer > .modal > .close {
- color: @invertedDimmerCloseColor;
- }
-
-
- @media only screen and (max-width: @largestTabletScreen) {
- .ui.dimmer .inverted.modal > .close {
- color: @invertedCloseColor;
- }
- }
- & when (@variationModalFullscreen) or (@variationModalCloseInside) {
- .ui.inverted.modal > .close.inside,
- .ui.inverted.fullscreen.modal > .close {
- color: @invertedCloseColor;
- }
- }
-}
-
-
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/nag.js b/semantic/src/definitions/modules/nag.js
deleted file mode 100644
index db88b77..0000000
--- a/semantic/src/definitions/modules/nag.js
+++ /dev/null
@@ -1,492 +0,0 @@
-/*!
- * # Fomantic-UI - Nag
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.nag = 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
- ;
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.nag.settings, parameters)
- : $.extend({}, $.fn.nag.settings),
-
- selector = settings.selector,
- error = settings.error,
- namespace = settings.namespace,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
- $module = $(this),
-
- $context = (settings.context)
- ? $(settings.context)
- : $('body'),
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- module
- ;
- module = {
-
- initialize: function() {
- module.verbose('Initializing element');
-
- $module
- .on('click' + eventNamespace, selector.close, module.dismiss)
- .data(moduleNamespace, module)
- ;
-
- if(settings.detachable && $module.parent()[0] !== $context[0]) {
- $module
- .detach()
- .prependTo($context)
- ;
- }
-
- if(settings.displayTime > 0) {
- setTimeout(module.hide, settings.displayTime);
- }
- module.show();
- },
-
- destroy: function() {
- module.verbose('Destroying instance');
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- },
-
- show: function() {
- if( module.should.show() && !$module.is(':visible') ) {
- module.debug('Showing nag', settings.animation.show);
- if(settings.animation.show == 'fade') {
- $module
- .fadeIn(settings.duration, settings.easing)
- ;
- }
- else {
- $module
- .slideDown(settings.duration, settings.easing)
- ;
- }
- }
- },
-
- hide: function() {
- module.debug('Showing nag', settings.animation.hide);
- if(settings.animation.show == 'fade') {
- $module
- .fadeIn(settings.duration, settings.easing)
- ;
- }
- else {
- $module
- .slideUp(settings.duration, settings.easing)
- ;
- }
- },
-
- onHide: function() {
- module.debug('Removing nag', settings.animation.hide);
- $module.remove();
- if (settings.onHide) {
- settings.onHide();
- }
- },
-
- dismiss: function(event) {
- if(settings.storageMethod) {
- module.storage.set(settings.key, settings.value);
- }
- module.hide();
- event.stopImmediatePropagation();
- event.preventDefault();
- },
-
- should: {
- show: function() {
- if(settings.persist) {
- module.debug('Persistent nag is set, can show nag');
- return true;
- }
- if( module.storage.get(settings.key) != settings.value.toString() ) {
- module.debug('Stored value is not set, can show nag', module.storage.get(settings.key));
- return true;
- }
- module.debug('Stored value is set, cannot show nag', module.storage.get(settings.key));
- return false;
- }
- },
-
- get: {
- storageOptions: function() {
- 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;
- }
- },
-
- clear: function() {
- module.storage.remove(settings.key);
- },
-
- storage: {
- set: function(key, value) {
- var
- options = module.get.storageOptions()
- ;
- if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
- window.localStorage.setItem(key, value);
- module.debug('Value stored using local storage', key, value);
- }
- else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
- window.sessionStorage.setItem(key, value);
- module.debug('Value stored using session 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;
- }
- },
- get: function(key, value) {
- var
- storedValue
- ;
- if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
- storedValue = window.localStorage.getItem(key);
- }
- else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
- storedValue = window.sessionStorage.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;
- },
- remove: function(key) {
- var
- options = module.get.storageOptions()
- ;
- if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
- window.localStorage.removeItem(key);
- }
- else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
- window.sessionStorage.removeItem(key);
- }
- // store by cookie
- else if($.cookie !== undefined) {
- $.removeCookie(key, options);
- }
- else {
- module.error(error.noStorage);
- }
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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.nag.settings = {
-
- name : 'Nag',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- namespace : 'Nag',
-
- // allows cookie to be overridden
- persist : false,
-
- // set to zero to require manually dismissal, otherwise hides on its own
- displayTime : 0,
-
- animation : {
- show : 'slide',
- hide : 'slide'
- },
-
- context : false,
- detachable : false,
-
- expires : 30,
- domain : false,
- path : '/',
-
- // type of storage to use
- storageMethod : 'cookie',
-
- // value to store in dismissed localstorage/cookie
- key : 'nag',
- value : 'dismiss',
-
- error: {
- noCookieStorage : '$.cookie is not included. A storage solution is required.',
- noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
- method : 'The method you called is not defined.'
- },
-
- className : {
- bottom : 'bottom',
- fixed : 'fixed'
- },
-
- selector : {
- close : '.close.icon'
- },
-
- speed : 500,
- easing : 'easeOutQuad',
-
- onHide: function() {}
-
-};
-
-// Adds easing
-$.extend( $.easing, {
- easeOutQuad: function (x, t, b, c, d) {
- return -c *(t/=d)*(t-2) + b;
- }
-});
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/nag.less b/semantic/src/definitions/modules/nag.less
deleted file mode 100644
index 386e7fe..0000000
--- a/semantic/src/definitions/modules/nag.less
+++ /dev/null
@@ -1,158 +0,0 @@
-/*!
- * # Fomantic-UI - Nag
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'nag';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Nag
-*******************************/
-
-.ui.nag {
- display: none;
- opacity: @opacity;
- position: @position;
-
- top: @top;
- left: 0;
- z-index: @zIndex;
-
- min-height: @minHeight;
- width: @width;
-
- margin: @margin;
- padding: @padding;
-
- background: @background;
- box-shadow: @boxShadow;
-
- font-size: @fontSize;
- text-align: @textAlign;
- color: @color;
-
- border-radius: @topBorderRadius;
- transition: @transition;
-}
-
-a.ui.nag {
- cursor: pointer;
-}
-
-.ui.nag > .title {
- display: inline-block;
- margin: @titleMargin;
- color: @titleColor;
-}
-
-
-.ui.nag > .close.icon {
- cursor: pointer;
- opacity: @closeOpacity;
-
- position: absolute;
- top: @closeTop;
- right: @closeRight;
-
- font-size: @closeSize;
-
- margin: @closeMargin;
- color: @closeColor;
- transition: @closeTransition;
-}
-
-
-
-/*******************************
- States
-*******************************/
-
-/* Hover */
-.ui.nag:hover {
- background: @nagHoverBackground;
- opacity: @nagHoverOpacity;
-}
-
-.ui.nag .close:hover {
- opacity: @closeHoverOpacity;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-
-/*--------------
- Static
----------------*/
-
-.ui.overlay.nag {
- position: absolute;
- display: block;
-}
-
-/*--------------
- Fixed
----------------*/
-
-.ui.fixed.nag {
- position: fixed;
-}
-
-/*--------------
- Bottom
----------------*/
-
-.ui.bottom.nags,
-.ui.bottom.nag {
- border-radius: @bottomBorderRadius;
- top: auto;
- bottom: @bottom;
-}
-
-/*--------------
- White
----------------*/
-
-.ui.inverted.nags .nag,
-.ui.inverted.nag {
- background-color: @invertedBackground;
- color: @darkTextColor;
-}
-.ui.inverted.nags .nag .close,
-.ui.inverted.nags .nag .title,
-.ui.inverted.nag .close,
-.ui.inverted.nag .title {
- color: @lightTextColor;
-}
-
-
-/*******************************
- Groups
-*******************************/
-
-.ui.nags .nag {
- border-radius: @groupedBorderRadius !important;
-}
-.ui.nags .nag:last-child {
- border-radius: @topBorderRadius;
-}
-.ui.bottom.nags .nag:last-child {
- border-radius: @bottomBorderRadius;
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/popup.js b/semantic/src/definitions/modules/popup.js
deleted file mode 100644
index d6b70e1..0000000
--- a/semantic/src/definitions/modules/popup.js
+++ /dev/null
@@ -1,1541 +0,0 @@
-/*!
- * # Fomantic-UI - Popup
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.popup = function(parameters) {
- var
- $allModules = $(this),
- $document = $(document),
- $window = $(window),
- $body = $('body'),
-
- moduleSelector = $allModules.selector || '',
-
- clickEvent = ('ontouchstart' in document.documentElement)
- ? 'touchstart'
- : 'click',
-
- 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.popup.settings, parameters)
- : $.extend({}, $.fn.popup.settings),
-
- selector = settings.selector,
- className = settings.className,
- error = settings.error,
- metadata = settings.metadata,
- namespace = settings.namespace,
-
- eventNamespace = '.' + settings.namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $context = $(settings.context),
- $scrollContext = $(settings.scrollContext),
- $boundary = $(settings.boundary),
- $target = (settings.target)
- ? $(settings.target)
- : $module,
-
- $popup,
- $offsetParent,
-
- searchDepth = 0,
- triedPositions = false,
- openedWithTouch = false,
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- documentObserver,
- elementNamespace,
- id,
- module
- ;
-
- module = {
-
- // binds events
- initialize: function() {
- module.debug('Initializing', $module);
- module.createID();
- module.bind.events();
- if(!module.exists() && settings.preserve) {
- module.create();
- }
- if(settings.observeChanges) {
- module.observeChanges();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- documentObserver = new MutationObserver(module.event.documentChanged);
- documentObserver.observe(document, {
- childList : true,
- subtree : true
- });
- module.debug('Setting up mutation observer', documentObserver);
- }
- },
-
- refresh: function() {
- if(settings.popup) {
- $popup = $(settings.popup).eq(0);
- }
- else {
- if(settings.inline) {
- $popup = $target.nextAll(selector.popup).eq(0);
- settings.popup = $popup;
- }
- }
- if(settings.popup) {
- $popup.addClass(className.loading);
- $offsetParent = module.get.offsetParent();
- $popup.removeClass(className.loading);
- if(settings.movePopup && module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
- module.debug('Moving popup to the same offset parent as target');
- $popup
- .detach()
- .appendTo($offsetParent)
- ;
- }
- }
- else {
- $offsetParent = (settings.inline)
- ? module.get.offsetParent($target)
- : module.has.popup()
- ? module.get.offsetParent($popup)
- : $body
- ;
- }
- if( $offsetParent.is('html') && $offsetParent[0] !== $body[0] ) {
- module.debug('Setting page as offset parent');
- $offsetParent = $body;
- }
- if( module.get.variation() ) {
- module.set.variation();
- }
- },
-
- reposition: function() {
- module.refresh();
- module.set.position();
- },
-
- destroy: function() {
- module.debug('Destroying previous module');
- if(documentObserver) {
- documentObserver.disconnect();
- }
- // remove element only if was created dynamically
- if($popup && !settings.preserve) {
- module.removePopup();
- }
- // clear all timeouts
- clearTimeout(module.hideTimer);
- clearTimeout(module.showTimer);
- // remove events
- module.unbind.close();
- module.unbind.events();
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- event: {
- start: function(event) {
- var
- delay = ($.isPlainObject(settings.delay))
- ? settings.delay.show
- : settings.delay
- ;
- clearTimeout(module.hideTimer);
- if(!openedWithTouch || (openedWithTouch && settings.addTouchEvents) ) {
- module.showTimer = setTimeout(module.show, delay);
- }
- },
- end: function() {
- var
- delay = ($.isPlainObject(settings.delay))
- ? settings.delay.hide
- : settings.delay
- ;
- clearTimeout(module.showTimer);
- module.hideTimer = setTimeout(module.hide, delay);
- },
- touchstart: function(event) {
- openedWithTouch = true;
- if(settings.addTouchEvents) {
- module.show();
- }
- },
- resize: function() {
- if( module.is.visible() ) {
- module.set.position();
- }
- },
- documentChanged: 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();
- }
- });
- }
- });
- },
- hideGracefully: function(event) {
- var
- $target = $(event.target),
- isInDOM = $.contains(document.documentElement, event.target),
- inPopup = ($target.closest(selector.popup).length > 0)
- ;
- // don't close on clicks inside popup
- if(event && !inPopup && isInDOM) {
- module.debug('Click occurred outside popup hiding popup');
- module.hide();
- }
- else {
- module.debug('Click was inside popup, keeping popup open');
- }
- }
- },
-
- // generates popup html from metadata
- create: function() {
- var
- html = module.get.html(),
- title = module.get.title(),
- content = module.get.content()
- ;
-
- if(html || content || title) {
- module.debug('Creating pop-up html');
- if(!html) {
- html = settings.templates.popup({
- title : title,
- content : content
- });
- }
- $popup = $('<div/>')
- .addClass(className.popup)
- .data(metadata.activator, $module)
- .html(html)
- ;
- if(settings.inline) {
- module.verbose('Inserting popup element inline', $popup);
- $popup
- .insertAfter($module)
- ;
- }
- else {
- module.verbose('Appending popup element to body', $popup);
- $popup
- .appendTo( $context )
- ;
- }
- module.refresh();
- module.set.variation();
-
- if(settings.hoverable) {
- module.bind.popup();
- }
- settings.onCreate.call($popup, element);
- }
- else if(settings.popup) {
- $(settings.popup).data(metadata.activator, $module);
- module.verbose('Used popup specified in settings');
- module.refresh();
- if(settings.hoverable) {
- module.bind.popup();
- }
- }
- else if($target.next(selector.popup).length !== 0) {
- module.verbose('Pre-existing popup found');
- settings.inline = true;
- settings.popup = $target.next(selector.popup).data(metadata.activator, $module);
- module.refresh();
- if(settings.hoverable) {
- module.bind.popup();
- }
- }
- else {
- module.debug('No content specified skipping display', element);
- }
- },
-
- createID: function() {
- id = (Math.random().toString(16) + '000000000').substr(2, 8);
- elementNamespace = '.' + id;
- module.verbose('Creating unique id for element', id);
- },
-
- // determines popup state
- toggle: function() {
- module.debug('Toggling pop-up');
- if( module.is.hidden() ) {
- module.debug('Popup is hidden, showing pop-up');
- module.unbind.close();
- module.show();
- }
- else {
- module.debug('Popup is visible, hiding pop-up');
- module.hide();
- }
- },
-
- show: function(callback) {
- callback = callback || function(){};
- module.debug('Showing pop-up', settings.transition);
- if(module.is.hidden() && !( module.is.active() && module.is.dropdown()) ) {
- if( !module.exists() ) {
- module.create();
- }
- if(settings.onShow.call($popup, element) === false) {
- module.debug('onShow callback returned false, cancelling popup animation');
- return;
- }
- else if(!settings.preserve && !settings.popup) {
- module.refresh();
- }
- if( $popup && module.set.position() ) {
- module.save.conditions();
- if(settings.exclusive) {
- module.hideAll();
- }
- module.animate.show(callback);
- }
- }
- },
-
-
- hide: function(callback) {
- callback = callback || function(){};
- if( module.is.visible() || module.is.animating() ) {
- if(settings.onHide.call($popup, element) === false) {
- module.debug('onHide callback returned false, cancelling popup animation');
- return;
- }
- module.remove.visible();
- module.unbind.close();
- module.restore.conditions();
- module.animate.hide(callback);
- }
- },
-
- hideAll: function() {
- $(selector.popup)
- .filter('.' + className.popupVisible)
- .each(function() {
- $(this)
- .data(metadata.activator)
- .popup('hide')
- ;
- })
- ;
- },
- exists: function() {
- if(!$popup) {
- return false;
- }
- if(settings.inline || settings.popup) {
- return ( module.has.popup() );
- }
- else {
- return ( $popup.closest($context).length >= 1 )
- ? true
- : false
- ;
- }
- },
-
- removePopup: function() {
- if( module.has.popup() && !settings.popup) {
- module.debug('Removing popup', $popup);
- $popup.remove();
- $popup = undefined;
- settings.onRemove.call($popup, element);
- }
- },
-
- save: {
- conditions: function() {
- module.cache = {
- title: $module.attr('title')
- };
- if (module.cache.title) {
- $module.removeAttr('title');
- }
- module.verbose('Saving original attributes', module.cache.title);
- }
- },
- restore: {
- conditions: function() {
- if(module.cache && module.cache.title) {
- $module.attr('title', module.cache.title);
- module.verbose('Restoring original attributes', module.cache.title);
- }
- return true;
- }
- },
- supports: {
- svg: function() {
- return (typeof SVGGraphicsElement !== 'undefined');
- }
- },
- animate: {
- show: function(callback) {
- callback = $.isFunction(callback) ? callback : function(){};
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- module.set.visible();
- $popup
- .transition({
- animation : settings.transition + ' in',
- queue : false,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- onComplete : function() {
- module.bind.close();
- callback.call($popup, element);
- settings.onVisible.call($popup, element);
- }
- })
- ;
- }
- else {
- module.error(error.noTransition);
- }
- },
- hide: function(callback) {
- callback = $.isFunction(callback) ? callback : function(){};
- module.debug('Hiding pop-up');
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- $popup
- .transition({
- animation : settings.transition + ' out',
- queue : false,
- duration : settings.duration,
- debug : settings.debug,
- verbose : settings.verbose,
- onComplete : function() {
- module.reset();
- callback.call($popup, element);
- settings.onHidden.call($popup, element);
- }
- })
- ;
- }
- else {
- module.error(error.noTransition);
- }
- }
- },
-
- change: {
- content: function(html) {
- $popup.html(html);
- }
- },
-
- get: {
- html: function() {
- $module.removeData(metadata.html);
- return $module.data(metadata.html) || settings.html;
- },
- title: function() {
- $module.removeData(metadata.title);
- return $module.data(metadata.title) || settings.title;
- },
- content: function() {
- $module.removeData(metadata.content);
- return $module.data(metadata.content) || settings.content || $module.attr('title');
- },
- variation: function() {
- $module.removeData(metadata.variation);
- return $module.data(metadata.variation) || settings.variation;
- },
- popup: function() {
- return $popup;
- },
- popupOffset: function() {
- return $popup.offset();
- },
- calculations: function() {
- var
- $popupOffsetParent = module.get.offsetParent($popup),
- targetElement = $target[0],
- isWindow = ($boundary[0] == window),
- targetOffset = $target.offset(),
- parentOffset = settings.inline || (settings.popup && settings.movePopup)
- ? $target.offsetParent().offset()
- : { top: 0, left: 0 },
- screenPosition = (isWindow)
- ? { top: 0, left: 0 }
- : $boundary.offset(),
- calculations = {},
- scroll = (isWindow)
- ? { top: $window.scrollTop(), left: $window.scrollLeft() }
- : { top: 0, left: 0},
- screen
- ;
- calculations = {
- // element which is launching popup
- target : {
- element : $target[0],
- width : $target.outerWidth(),
- height : $target.outerHeight(),
- top : targetOffset.top - parentOffset.top,
- left : targetOffset.left - parentOffset.left,
- margin : {}
- },
- // popup itself
- popup : {
- width : $popup.outerWidth(),
- height : $popup.outerHeight()
- },
- // offset container (or 3d context)
- parent : {
- width : $offsetParent.outerWidth(),
- height : $offsetParent.outerHeight()
- },
- // screen boundaries
- screen : {
- top : screenPosition.top,
- left : screenPosition.left,
- scroll: {
- top : scroll.top,
- left : scroll.left
- },
- width : $boundary.width(),
- height : $boundary.height()
- }
- };
-
- // if popup offset context is not same as target, then adjust calculations
- if($popupOffsetParent.get(0) !== $offsetParent.get(0)) {
- var
- popupOffset = $popupOffsetParent.offset()
- ;
- calculations.target.top -= popupOffset.top;
- calculations.target.left -= popupOffset.left;
- calculations.parent.width = $popupOffsetParent.outerWidth();
- calculations.parent.height = $popupOffsetParent.outerHeight();
- }
-
- // add in container calcs if fluid
- if( settings.setFluidWidth && module.is.fluid() ) {
- calculations.container = {
- width: $popup.parent().outerWidth()
- };
- calculations.popup.width = calculations.container.width;
- }
-
- // add in margins if inline
- calculations.target.margin.top = (settings.inline)
- ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10)
- : 0
- ;
- calculations.target.margin.left = (settings.inline)
- ? module.is.rtl()
- ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-right'), 10)
- : parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-left'), 10)
- : 0
- ;
- // calculate screen boundaries
- screen = calculations.screen;
- calculations.boundary = {
- top : screen.top + screen.scroll.top,
- bottom : screen.top + screen.scroll.top + screen.height,
- left : screen.left + screen.scroll.left,
- right : screen.left + screen.scroll.left + screen.width
- };
- return calculations;
- },
- id: function() {
- return id;
- },
- startEvent: function() {
- if(settings.on == 'hover') {
- return 'mouseenter';
- }
- else if(settings.on == 'focus') {
- return 'focus';
- }
- return false;
- },
- scrollEvent: function() {
- return 'scroll';
- },
- endEvent: function() {
- if(settings.on == 'hover') {
- return 'mouseleave';
- }
- else if(settings.on == 'focus') {
- return 'blur';
- }
- return false;
- },
- distanceFromBoundary: function(offset, calculations) {
- var
- distanceFromBoundary = {},
- popup,
- boundary
- ;
- calculations = calculations || module.get.calculations();
-
- // shorthand
- popup = calculations.popup;
- boundary = calculations.boundary;
-
- if(offset) {
- distanceFromBoundary = {
- top : (offset.top - boundary.top),
- left : (offset.left - boundary.left),
- right : (boundary.right - (offset.left + popup.width) ),
- bottom : (boundary.bottom - (offset.top + popup.height) )
- };
- module.verbose('Distance from boundaries determined', offset, distanceFromBoundary);
- }
- return distanceFromBoundary;
- },
- offsetParent: function($element) {
- var
- element = ($element !== undefined)
- ? $element[0]
- : $target[0],
- parentNode = element.parentNode,
- $node = $(parentNode)
- ;
- if(parentNode) {
- var
- is2D = ($node.css('transform') === 'none'),
- isStatic = ($node.css('position') === 'static'),
- isBody = $node.is('body')
- ;
- while(parentNode && !isBody && isStatic && is2D) {
- parentNode = parentNode.parentNode;
- $node = $(parentNode);
- is2D = ($node.css('transform') === 'none');
- isStatic = ($node.css('position') === 'static');
- isBody = $node.is('body');
- }
- }
- return ($node && $node.length > 0)
- ? $node
- : $()
- ;
- },
- positions: function() {
- return {
- 'top left' : false,
- 'top center' : false,
- 'top right' : false,
- 'bottom left' : false,
- 'bottom center' : false,
- 'bottom right' : false,
- 'left center' : false,
- 'right center' : false
- };
- },
- nextPosition: function(position) {
- var
- positions = position.split(' '),
- verticalPosition = positions[0],
- horizontalPosition = positions[1],
- opposite = {
- top : 'bottom',
- bottom : 'top',
- left : 'right',
- right : 'left'
- },
- adjacent = {
- left : 'center',
- center : 'right',
- right : 'left'
- },
- backup = {
- 'top left' : 'top center',
- 'top center' : 'top right',
- 'top right' : 'right center',
- 'right center' : 'bottom right',
- 'bottom right' : 'bottom center',
- 'bottom center' : 'bottom left',
- 'bottom left' : 'left center',
- 'left center' : 'top left'
- },
- adjacentsAvailable = (verticalPosition == 'top' || verticalPosition == 'bottom'),
- oppositeTried = false,
- adjacentTried = false,
- nextPosition = false
- ;
- if(!triedPositions) {
- module.verbose('All available positions available');
- triedPositions = module.get.positions();
- }
-
- module.debug('Recording last position tried', position);
- triedPositions[position] = true;
-
- if(settings.prefer === 'opposite') {
- nextPosition = [opposite[verticalPosition], horizontalPosition];
- nextPosition = nextPosition.join(' ');
- oppositeTried = (triedPositions[nextPosition] === true);
- module.debug('Trying opposite strategy', nextPosition);
- }
- if((settings.prefer === 'adjacent') && adjacentsAvailable ) {
- nextPosition = [verticalPosition, adjacent[horizontalPosition]];
- nextPosition = nextPosition.join(' ');
- adjacentTried = (triedPositions[nextPosition] === true);
- module.debug('Trying adjacent strategy', nextPosition);
- }
- if(adjacentTried || oppositeTried) {
- module.debug('Using backup position', nextPosition);
- nextPosition = backup[position];
- }
- return nextPosition;
- }
- },
-
- set: {
- position: function(position, calculations) {
-
- // exit conditions
- if($target.length === 0 || $popup.length === 0) {
- module.error(error.notFound);
- return;
- }
- var
- offset,
- distanceAway,
- target,
- popup,
- parent,
- positioning,
- popupOffset,
- distanceFromBoundary
- ;
-
- calculations = calculations || module.get.calculations();
- position = position || $module.data(metadata.position) || settings.position;
-
- offset = $module.data(metadata.offset) || settings.offset;
- distanceAway = settings.distanceAway;
-
- // shorthand
- target = calculations.target;
- popup = calculations.popup;
- parent = calculations.parent;
-
- if(module.should.centerArrow(calculations)) {
- module.verbose('Adjusting offset to center arrow on small target element');
- if(position == 'top left' || position == 'bottom left') {
- offset += (target.width / 2);
- offset -= settings.arrowPixelsFromEdge;
- }
- if(position == 'top right' || position == 'bottom right') {
- offset -= (target.width / 2);
- offset += settings.arrowPixelsFromEdge;
- }
- }
-
- if(target.width === 0 && target.height === 0 && !module.is.svg(target.element)) {
- module.debug('Popup target is hidden, no action taken');
- return false;
- }
-
- if(settings.inline) {
- module.debug('Adding margin to calculation', target.margin);
- if(position == 'left center' || position == 'right center') {
- offset += target.margin.top;
- distanceAway += -target.margin.left;
- }
- else if (position == 'top left' || position == 'top center' || position == 'top right') {
- offset += target.margin.left;
- distanceAway -= target.margin.top;
- }
- else {
- offset += target.margin.left;
- distanceAway += target.margin.top;
- }
- }
-
- module.debug('Determining popup position from calculations', position, calculations);
-
- if (module.is.rtl()) {
- position = position.replace(/left|right/g, function (match) {
- return (match == 'left')
- ? 'right'
- : 'left'
- ;
- });
- module.debug('RTL: Popup position updated', position);
- }
-
- // if last attempt use specified last resort position
- if(searchDepth == settings.maxSearchDepth && typeof settings.lastResort === 'string') {
- position = settings.lastResort;
- }
-
- switch (position) {
- case 'top left':
- positioning = {
- top : 'auto',
- bottom : parent.height - target.top + distanceAway,
- left : target.left + offset,
- right : 'auto'
- };
- break;
- case 'top center':
- positioning = {
- bottom : parent.height - target.top + distanceAway,
- left : target.left + (target.width / 2) - (popup.width / 2) + offset,
- top : 'auto',
- right : 'auto'
- };
- break;
- case 'top right':
- positioning = {
- bottom : parent.height - target.top + distanceAway,
- right : parent.width - target.left - target.width - offset,
- top : 'auto',
- left : 'auto'
- };
- break;
- case 'left center':
- positioning = {
- top : target.top + (target.height / 2) - (popup.height / 2) + offset,
- right : parent.width - target.left + distanceAway,
- left : 'auto',
- bottom : 'auto'
- };
- break;
- case 'right center':
- positioning = {
- top : target.top + (target.height / 2) - (popup.height / 2) + offset,
- left : target.left + target.width + distanceAway,
- bottom : 'auto',
- right : 'auto'
- };
- break;
- case 'bottom left':
- positioning = {
- top : target.top + target.height + distanceAway,
- left : target.left + offset,
- bottom : 'auto',
- right : 'auto'
- };
- break;
- case 'bottom center':
- positioning = {
- top : target.top + target.height + distanceAway,
- left : target.left + (target.width / 2) - (popup.width / 2) + offset,
- bottom : 'auto',
- right : 'auto'
- };
- break;
- case 'bottom right':
- positioning = {
- top : target.top + target.height + distanceAway,
- right : parent.width - target.left - target.width - offset,
- left : 'auto',
- bottom : 'auto'
- };
- break;
- }
- if(positioning === undefined) {
- module.error(error.invalidPosition, position);
- }
-
- module.debug('Calculated popup positioning values', positioning);
-
- // tentatively place on stage
- $popup
- .css(positioning)
- .removeClass(className.position)
- .addClass(position)
- .addClass(className.loading)
- ;
-
- popupOffset = module.get.popupOffset();
-
- // see if any boundaries are surpassed with this tentative position
- distanceFromBoundary = module.get.distanceFromBoundary(popupOffset, calculations);
-
- if(!settings.forcePosition && module.is.offstage(distanceFromBoundary, position) ) {
- module.debug('Position is outside viewport', position);
- if(searchDepth < settings.maxSearchDepth) {
- searchDepth++;
- position = module.get.nextPosition(position);
- module.debug('Trying new position', position);
- return ($popup)
- ? module.set.position(position, calculations)
- : false
- ;
- }
- else {
- if(settings.lastResort) {
- module.debug('No position found, showing with last position');
- }
- else {
- module.debug('Popup could not find a position to display', $popup);
- module.error(error.cannotPlace, element);
- module.remove.attempts();
- module.remove.loading();
- module.reset();
- settings.onUnplaceable.call($popup, element);
- return false;
- }
- }
- }
- module.debug('Position is on stage', position);
- module.remove.attempts();
- module.remove.loading();
- if( settings.setFluidWidth && module.is.fluid() ) {
- module.set.fluidWidth(calculations);
- }
- return true;
- },
-
- fluidWidth: function(calculations) {
- calculations = calculations || module.get.calculations();
- module.debug('Automatically setting element width to parent width', calculations.parent.width);
- $popup.css('width', calculations.container.width);
- },
-
- variation: function(variation) {
- variation = variation || module.get.variation();
- if(variation && module.has.popup() ) {
- module.verbose('Adding variation to popup', variation);
- $popup.addClass(variation);
- }
- },
-
- visible: function() {
- $module.addClass(className.visible);
- }
- },
-
- remove: {
- loading: function() {
- $popup.removeClass(className.loading);
- },
- variation: function(variation) {
- variation = variation || module.get.variation();
- if(variation) {
- module.verbose('Removing variation', variation);
- $popup.removeClass(variation);
- }
- },
- visible: function() {
- $module.removeClass(className.visible);
- },
- attempts: function() {
- module.verbose('Resetting all searched positions');
- searchDepth = 0;
- triedPositions = false;
- }
- },
-
- bind: {
- events: function() {
- module.debug('Binding popup events to module');
- if(settings.on == 'click') {
- $module
- .on(clickEvent + eventNamespace, module.toggle)
- ;
- }
- if(settings.on == 'hover') {
- $module
- .on('touchstart' + eventNamespace, module.event.touchstart)
- ;
- }
- if( module.get.startEvent() ) {
- $module
- .on(module.get.startEvent() + eventNamespace, module.event.start)
- .on(module.get.endEvent() + eventNamespace, module.event.end)
- ;
- }
- if(settings.target) {
- module.debug('Target set to element', $target);
- }
- $window.on('resize' + elementNamespace, module.event.resize);
- },
- popup: function() {
- module.verbose('Allowing hover events on popup to prevent closing');
- if( $popup && module.has.popup() ) {
- $popup
- .on('mouseenter' + eventNamespace, module.event.start)
- .on('mouseleave' + eventNamespace, module.event.end)
- ;
- }
- },
- close: function() {
- if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) {
- module.bind.closeOnScroll();
- }
- if(module.is.closable()) {
- module.bind.clickaway();
- }
- else if(settings.on == 'hover' && openedWithTouch) {
- module.bind.touchClose();
- }
- },
- closeOnScroll: function() {
- module.verbose('Binding scroll close event to document');
- $scrollContext
- .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully)
- ;
- },
- touchClose: function() {
- module.verbose('Binding popup touchclose event to document');
- $document
- .on('touchstart' + elementNamespace, function(event) {
- module.verbose('Touched away from popup');
- module.event.hideGracefully.call(element, event);
- })
- ;
- },
- clickaway: function() {
- module.verbose('Binding popup close event to document');
- $document
- .on(clickEvent + elementNamespace, function(event) {
- module.verbose('Clicked away from popup');
- module.event.hideGracefully.call(element, event);
- })
- ;
- }
- },
-
- unbind: {
- events: function() {
- $window
- .off(elementNamespace)
- ;
- $module
- .off(eventNamespace)
- ;
- },
- close: function() {
- $document
- .off(elementNamespace)
- ;
- $scrollContext
- .off(elementNamespace)
- ;
- },
- },
-
- has: {
- popup: function() {
- return ($popup && $popup.length > 0);
- }
- },
-
- should: {
- centerArrow: function(calculations) {
- return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2);
- },
- },
-
- is: {
- closable: function() {
- if(settings.closable == 'auto') {
- if(settings.on == 'hover') {
- return false;
- }
- return true;
- }
- return settings.closable;
- },
- offstage: function(distanceFromBoundary, position) {
- var
- offstage = []
- ;
- // return boundaries that have been surpassed
- $.each(distanceFromBoundary, function(direction, distance) {
- if(distance < -settings.jitter) {
- module.debug('Position exceeds allowable distance from edge', direction, distance, position);
- offstage.push(direction);
- }
- });
- if(offstage.length > 0) {
- return true;
- }
- else {
- return false;
- }
- },
- svg: function(element) {
- return module.supports.svg() && (element instanceof SVGGraphicsElement);
- },
- basic: function() {
- return $module.hasClass(className.basic);
- },
- active: function() {
- return $module.hasClass(className.active);
- },
- animating: function() {
- return ($popup !== undefined && $popup.hasClass(className.animating) );
- },
- fluid: function() {
- return ($popup !== undefined && $popup.hasClass(className.fluid));
- },
- visible: function() {
- return ($popup !== undefined && $popup.hasClass(className.popupVisible));
- },
- dropdown: function() {
- return $module.hasClass(className.dropdown);
- },
- hidden: function() {
- return !module.is.visible();
- },
- rtl: function () {
- return $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl';
- }
- },
-
- reset: function() {
- module.remove.visible();
- if(settings.preserve) {
- if($.fn.transition !== undefined) {
- $popup
- .transition('remove transition')
- ;
- }
- }
- else {
- module.removePopup();
- }
- },
-
- 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 {
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.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.popup.settings = {
-
- name : 'Popup',
-
- // module settings
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
- namespace : 'popup',
-
- // whether it should use dom mutation observers
- observeChanges : true,
-
- // callback only when element added to dom
- onCreate : function(){},
-
- // callback before element removed from dom
- onRemove : function(){},
-
- // callback before show animation
- onShow : function(){},
-
- // callback after show animation
- onVisible : function(){},
-
- // callback before hide animation
- onHide : function(){},
-
- // callback when popup cannot be positioned in visible screen
- onUnplaceable : function(){},
-
- // callback after hide animation
- onHidden : function(){},
-
- // when to show popup
- on : 'hover',
-
- // element to use to determine if popup is out of boundary
- boundary : window,
-
- // whether to add touchstart events when using hover
- addTouchEvents : true,
-
- // default position relative to element
- position : 'top left',
-
- // if given position should be used regardless if popup fits
- forcePosition : false,
-
- // name of variation to use
- variation : '',
-
- // whether popup should be moved to context
- movePopup : true,
-
- // element which popup should be relative to
- target : false,
-
- // jq selector or element that should be used as popup
- popup : false,
-
- // popup should remain inline next to activator
- inline : false,
-
- // popup should be removed from page on hide
- preserve : false,
-
- // popup should not close when being hovered on
- hoverable : false,
-
- // explicitly set content
- content : false,
-
- // explicitly set html
- html : false,
-
- // explicitly set title
- title : false,
-
- // whether automatically close on clickaway when on click
- closable : true,
-
- // automatically hide on scroll
- hideOnScroll : 'auto',
-
- // hide other popups on show
- exclusive : false,
-
- // context to attach popups
- context : 'body',
-
- // context for binding scroll events
- scrollContext : window,
-
- // position to prefer when calculating new position
- prefer : 'opposite',
-
- // specify position to appear even if it doesn't fit
- lastResort : false,
-
- // number of pixels from edge of popup to pointing arrow center (used from centering)
- arrowPixelsFromEdge: 20,
-
- // delay used to prevent accidental refiring of animations due to user error
- delay : {
- show : 50,
- hide : 70
- },
-
- // whether fluid variation should assign width explicitly
- setFluidWidth : true,
-
- // transition settings
- duration : 200,
- transition : 'scale',
-
- // distance away from activating element in px
- distanceAway : 0,
-
- // number of pixels an element is allowed to be "offstage" for a position to be chosen (allows for rounding)
- jitter : 2,
-
- // offset on aligning axis from calculated position
- offset : 0,
-
- // maximum times to look for a position before failing (9 positions total)
- maxSearchDepth : 15,
-
- error: {
- invalidPosition : 'The position you specified is not a valid position',
- cannotPlace : 'Popup does not fit within the boundaries of the viewport',
- method : 'The method you called is not defined.',
- noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>',
- notFound : 'The target or popup you specified does not exist on the page'
- },
-
- metadata: {
- activator : 'activator',
- content : 'content',
- html : 'html',
- offset : 'offset',
- position : 'position',
- title : 'title',
- variation : 'variation'
- },
-
- className : {
- active : 'active',
- basic : 'basic',
- animating : 'animating',
- dropdown : 'dropdown',
- fluid : 'fluid',
- loading : 'loading',
- popup : 'ui popup',
- position : 'top left center bottom right',
- visible : 'visible',
- popupVisible : 'visible'
- },
-
- selector : {
- popup : '.ui.popup'
- },
-
- templates: {
- escape: function(string) {
- var
- badChars = /[<>"'`]/g,
- shouldEscape = /[&<>"'`]/,
- escape = {
- "<": "&lt;",
- ">": "&gt;",
- '"': "&quot;",
- "'": "&#x27;",
- "`": "&#x60;"
- },
- escapedChar = function(chr) {
- return escape[chr];
- }
- ;
- if(shouldEscape.test(string)) {
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
- return string.replace(badChars, escapedChar);
- }
- return string;
- },
- popup: function(text) {
- var
- html = '',
- escape = $.fn.popup.settings.templates.escape
- ;
- if(typeof text !== undefined) {
- if(typeof text.title !== undefined && text.title) {
- text.title = escape(text.title);
- html += '<div class="header">' + text.title + '</div>';
- }
- if(typeof text.content !== undefined && text.content) {
- text.content = escape(text.content);
- html += '<div class="content">' + text.content + '</div>';
- }
- }
- return html;
- }
- }
-
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/popup.less b/semantic/src/definitions/modules/popup.less
deleted file mode 100644
index 7d08569..0000000
--- a/semantic/src/definitions/modules/popup.less
+++ /dev/null
@@ -1,841 +0,0 @@
-/*!
- * # Fomantic-UI - Popup
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'popup';
-
-@import (multiple) '../../theme.config';
-
-
-/*******************************
- Popup
-*******************************/
-
-.ui.popup {
- display: none;
- position: absolute;
- top: 0;
- right: 0;
-
- /* Fixes content being squished when inline (moz only) */
- min-width: min-content;
- z-index: @zIndex;
-
- border: @border;
- line-height: @lineHeight;
- max-width: @maxWidth;
- background: @background;
-
- padding: @verticalPadding @horizontalPadding;
- font-weight: @fontWeight;
- font-style: @fontStyle;
- color: @color;
-
- border-radius: @borderRadius;
- box-shadow: @boxShadow;
-}
-.ui.popup > .header {
- padding: 0;
-
- font-family: @headerFont;
- font-size: @headerFontSize;
- line-height: @headerLineHeight;
- font-weight: @headerFontWeight;
-}
-.ui.popup > .header + .content {
- padding-top: @headerDistance;
-}
-
-.ui.popup:before {
- position: absolute;
- content: '';
- width: @arrowSize;
- height: @arrowSize;
-
- background: @arrowBackground;
- transform: rotate(45deg);
-
- z-index: @arrowZIndex;
- box-shadow: @arrowBoxShadow;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationPopupTooltip) {
- /*--------------
- Tooltip
- ---------------*/
-
- /* Content */
- [data-tooltip] {
- position: relative;
- }
-
- /* Arrow */
- [data-tooltip]:before {
- pointer-events: none;
- position: absolute;
- content: '';
- font-size: @medium;
- width: @arrowSize;
- height: @arrowSize;
-
- background: @tooltipArrowBackground;
- transform: rotate(45deg);
-
- z-index: @arrowZIndex;
- box-shadow: @tooltipArrowBoxShadow;
- }
-
- /* Popup */
- [data-tooltip]:after {
- pointer-events: none;
- content: attr(data-tooltip);
- position: absolute;
- text-transform: none;
- text-align: left;
- text-shadow: none;
- white-space: nowrap;
-
- font-size: @tooltipFontSize;
-
- border: @tooltipBorder;
- line-height: @tooltipLineHeight;
- max-width: @tooltipMaxWidth;
- background: @tooltipBackground;
-
- padding: @tooltipPadding;
- font-weight: @tooltipFontWeight;
- font-style: @tooltipFontStyle;
- color: @tooltipColor;
-
- border-radius: @tooltipBorderRadius;
- box-shadow: @tooltipBoxShadow;
- z-index: @tooltipZIndex;
- }
-
- /* Default Position (Top Center) */
- [data-tooltip]:not([data-position]):before {
- top: auto;
- right: auto;
- bottom: 100%;
- left: 50%;
- background: @tooltipArrowBottomBackground;
- margin-left: @tooltipArrowHorizontalOffset;
- margin-bottom: -@tooltipArrowVerticalOffset;
- }
- [data-tooltip]:not([data-position]):after {
- left: 50%;
- transform: translateX(-50%);
- bottom: 100%;
- margin-bottom: @tooltipDistanceAway;
- }
-
- /* Animation */
- [data-tooltip]:before,
- [data-tooltip]:after {
- pointer-events: none;
- visibility: hidden;
- opacity: 0;
- transition:
- transform @tooltipDuration @tooltipEasing,
- opacity @tooltipDuration @tooltipEasing
- ;
- }
- [data-tooltip]:before {
- transform: rotate(45deg) scale(0) !important;
- transform-origin: center top;
- }
- [data-tooltip]:after {
- transform-origin: center bottom;
- }
- [data-tooltip]:hover:before,
- [data-tooltip]:hover:after {
- visibility: visible;
- pointer-events: auto;
- opacity: 1;
- }
- [data-tooltip]:hover:before {
- transform: rotate(45deg) scale(1) !important;
- }
-
- /* Animation Position */
- [data-tooltip]:after,
- [data-tooltip][data-position="top center"]:after,
- [data-tooltip][data-position="bottom center"]:after {
- transform: translateX(-50%) scale(0) !important;
- }
- [data-tooltip]:hover:after,
- [data-tooltip][data-position="bottom center"]:hover:after {
- transform: translateX(-50%) scale(1) !important;
- }
- [data-tooltip][data-position="left center"]:after,
- [data-tooltip][data-position="right center"]:after {
- transform: translateY(-50%) scale(0) !important;
- }
- [data-tooltip][data-position="left center"]:hover:after,
- [data-tooltip][data-position="right center"]:hover:after {
- transform: translateY(-50%) scale(1) !important;
- -moz-transform: translateY(-50%) scale(1.0001) !important;
- }
- [data-tooltip][data-position="top left"]:after,
- [data-tooltip][data-position="top right"]:after,
- [data-tooltip][data-position="bottom left"]:after,
- [data-tooltip][data-position="bottom right"]:after {
- transform: scale(0) !important;
- }
- [data-tooltip][data-position="top left"]:hover:after,
- [data-tooltip][data-position="top right"]:hover:after,
- [data-tooltip][data-position="bottom left"]:hover:after,
- [data-tooltip][data-position="bottom right"]:hover:after {
- transform: scale(1) !important;
- }
- & when (@variationPopupFixed) {
- [data-tooltip][data-variation~="fixed"]:after {
- white-space: normal;
- width: @maxWidth;
- }
- [data-tooltip][data-variation*="wide fixed"]:after {
- width: @wideWidth;
- }
- [data-tooltip][data-variation*="very wide fixed"]:after {
- width: @veryWideWidth;
- }
- @media only screen and (max-width: @largestMobileScreen) {
- [data-tooltip][data-variation~="fixed"]:after {
- width: @maxWidth;
- }
- }
- }
- & when (@variationPopupInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- /* Arrow */
- [data-tooltip][data-inverted]:before {
- box-shadow: none !important;
- }
-
- /* Arrow Position */
- [data-tooltip][data-inverted]:before {
- background: @invertedArrowBottomBackground;
- }
-
- /* Popup */
- [data-tooltip][data-inverted]:after {
- background: @tooltipInvertedBackground;
- color: @tooltipInvertedColor;
- border: @tooltipInvertedBorder;
- box-shadow: @tooltipInvertedBoxShadow;
- }
- [data-tooltip][data-inverted]:after .header {
- background: @tooltipInvertedHeaderBackground;
- color: @tooltipInvertedHeaderColor;
- }
- }
-
- & when (@variationPopupPosition) {
- /*--------------
- Position
- ---------------*/
- & when (@variationPopupTop) {
- [data-position~="top"][data-tooltip]:before {
- background: @arrowBottomBackground;
- }
- & when (@variationPopupCenter) {
- /* Top Center */
- [data-position="top center"][data-tooltip]:after {
- top: auto;
- right: auto;
- left: 50%;
- bottom: 100%;
- transform: translateX(-50%);
- margin-bottom: @tooltipDistanceAway;
- }
- [data-position="top center"][data-tooltip]:before {
- top: auto;
- right: auto;
- bottom: 100%;
- left: 50%;
- background: @tooltipArrowTopBackground;
- margin-left: @tooltipArrowHorizontalOffset;
- margin-bottom: -@tooltipArrowVerticalOffset;
- }
- }
- & when (@variationPopupLeft) {
- /* Top Left */
- [data-position="top left"][data-tooltip]:after {
- top: auto;
- right: auto;
- left: 0;
- bottom: 100%;
- margin-bottom: @tooltipDistanceAway;
- }
- [data-position="top left"][data-tooltip]:before {
- top: auto;
- right: auto;
- bottom: 100%;
- left: @arrowDistanceFromEdge;
- margin-left: @tooltipArrowHorizontalOffset;
- margin-bottom: -@tooltipArrowVerticalOffset;
- }
- }
- & when (@variationPopupRight) {
- /* Top Right */
- [data-position="top right"][data-tooltip]:after {
- top: auto;
- left: auto;
- right: 0;
- bottom: 100%;
- margin-bottom: @tooltipDistanceAway;
- }
- [data-position="top right"][data-tooltip]:before {
- top: auto;
- left: auto;
- bottom: 100%;
- right: @arrowDistanceFromEdge;
- margin-left: @tooltipArrowHorizontalOffset;
- margin-bottom: -@tooltipArrowVerticalOffset;
- }
- }
- }
-
- & when (@variationPopupBottom) {
- [data-position~="bottom"][data-tooltip]:before {
- background: @arrowTopBackground;
- box-shadow: @bottomArrowBoxShadow;
- }
- & when (@variationPopupCenter) {
- /* Bottom Center */
- [data-position="bottom center"][data-tooltip]:after {
- bottom: auto;
- right: auto;
- left: 50%;
- top: 100%;
- transform: translateX(-50%);
- margin-top: @tooltipDistanceAway;
- }
- [data-position="bottom center"][data-tooltip]:before {
- bottom: auto;
- right: auto;
- top: 100%;
- left: 50%;
- margin-left: @tooltipArrowHorizontalOffset;
- margin-top: -@tooltipArrowVerticalOffset;
- }
- }
- & when (@variationPopupLeft) {
- /* Bottom Left */
- [data-position="bottom left"][data-tooltip]:after {
- left: 0;
- top: 100%;
- margin-top: @tooltipDistanceAway;
- }
- [data-position="bottom left"][data-tooltip]:before {
- bottom: auto;
- right: auto;
- top: 100%;
- left: @arrowDistanceFromEdge;
- margin-left: @tooltipArrowHorizontalOffset;
- margin-top: -@tooltipArrowVerticalOffset;
- }
- }
- & when (@variationPopupRight) {
- /* Bottom Right */
- [data-position="bottom right"][data-tooltip]:after {
- right: 0;
- top: 100%;
- margin-top: @tooltipDistanceAway;
- }
- [data-position="bottom right"][data-tooltip]:before {
- bottom: auto;
- left: auto;
- top: 100%;
- right: @arrowDistanceFromEdge;
- margin-left: @tooltipArrowVerticalOffset;
- margin-top: -@tooltipArrowHorizontalOffset;
- }
- }
- }
- & when (@variationPopupCenter) {
- & when (@variationPopupLeft) {
- /* Left Center */
- [data-position="left center"][data-tooltip]:after {
- right: 100%;
- top: 50%;
- margin-right: @tooltipDistanceAway;
- transform: translateY(-50%);
- }
- [data-position="left center"][data-tooltip]:before {
- right: 100%;
- top: 50%;
- margin-top: @tooltipArrowVerticalOffset;
- margin-right: @tooltipArrowHorizontalOffset;
- background: @arrowCenterBackground;
- box-shadow: @leftArrowBoxShadow;
- }
- }
- & when (@variationPopupRight) {
- /* Right Center */
- [data-position="right center"][data-tooltip]:after {
- left: 100%;
- top: 50%;
- margin-left: @tooltipDistanceAway;
- transform: translateY(-50%);
- }
- [data-position="right center"][data-tooltip]:before {
- left: 100%;
- top: 50%;
- margin-top: @tooltipArrowHorizontalOffset;
- margin-left: -@tooltipArrowVerticalOffset;
- background: @arrowCenterBackground;
- box-shadow: @rightArrowBoxShadow;
- }
- }
- }
-
- & when (@variationPopupInverted) {
- /* Inverted Arrow Color */
- & when (@variationPopupBottom) {
- [data-inverted][data-position~="bottom"][data-tooltip]:before {
- background: @invertedArrowTopBackground;
- box-shadow: @bottomArrowBoxShadow;
- }
- }
- & when (@variationPopupCenter) {
- & when (@variationPopupLeft) {
- [data-inverted][data-position="left center"][data-tooltip]:before {
- background: @invertedArrowCenterBackground;
- box-shadow: @leftArrowBoxShadow;
- }
- }
- & when (@variationPopupRight) {
- [data-inverted][data-position="right center"][data-tooltip]:before {
- background: @invertedArrowCenterBackground;
- box-shadow: @rightArrowBoxShadow;
- }
- }
- }
- & when (@variationPopupTop) {
- [data-inverted][data-position~="top"][data-tooltip]:before {
- background: @invertedArrowBottomBackground;
- }
- }
- }
-
- & when (@variationPopupBottom) {
- [data-position~="bottom"][data-tooltip]:before {
- transform-origin: center bottom;
- }
- [data-position~="bottom"][data-tooltip]:after {
- transform-origin: center top;
- }
- }
- & when (@variationPopupCenter) {
- & when (@variationPopupLeft) {
- [data-position="left center"][data-tooltip]:before {
- transform-origin: top center;
- }
- [data-position="left center"][data-tooltip]:after {
- transform-origin: right center;
- }
- }
- & when (@variationPopupRight) {
- [data-position="right center"][data-tooltip]:before {
- transform-origin: right center;
- }
- [data-position="right center"][data-tooltip]:after {
- transform-origin: left center;
- }
- }
- }
- }
-
- & when (@variationPopupBasic) {
- /*--------------
- Basic
- ---------------*/
- [data-tooltip][data-variation~="basic"]:before {
- display: none;
- }
- }
-}
-
-/*--------------
- Spacing
----------------*/
-
-.ui.popup {
- margin: 0;
-}
-
-& when (@variationPopupTop) {
- /* Extending from Top */
- .ui.top.popup {
- margin: 0 0 @popupDistanceAway;
- }
- & when (@variationPopupLeft) {
- .ui.top.left.popup {
- transform-origin: left bottom;
- }
- }
- & when (@variationPopupCenter) {
- .ui.top.center.popup {
- transform-origin: center bottom;
- }
- }
- & when (@variationPopupRight) {
- .ui.top.right.popup {
- transform-origin: right bottom;
- }
- }
-}
-
-& when (@variationPopupCenter) {
- /* Extending from Vertical Center */
- & when (@variationPopupLeft) {
- .ui.left.center.popup {
- margin: 0 @popupDistanceAway 0 0;
- transform-origin: right 50%;
- }
- }
- & when (@variationPopupRight) {
- .ui.right.center.popup {
- margin: 0 0 0 @popupDistanceAway;
- transform-origin: left 50%;
- }
- }
-}
-
-& when (@variationPopupBottom) {
- /* Extending from Bottom */
- .ui.bottom.popup {
- margin: @popupDistanceAway 0 0;
- }
- & when (@variationPopupLeft) {
- .ui.bottom.left.popup {
- transform-origin: left top;
- }
- }
- & when (@variationPopupCenter) {
- .ui.bottom.center.popup {
- transform-origin: center top;
- }
- }
- & when (@variationPopupRight) {
- .ui.bottom.right.popup {
- transform-origin: right top;
- }
- }
-
- /*--------------
- Pointer
- ---------------*/
-
- /*--- Below ---*/
- .ui.bottom.center.popup:before {
- margin-left: @arrowOffset;
- top: @arrowOffset;
- left: 50%;
- right: auto;
- bottom: auto;
- box-shadow: @bottomArrowBoxShadow;
- }
-
- .ui.bottom.left.popup {
- margin-left: @boxArrowOffset;
- }
- /*rtl:rename*/
- .ui.bottom.left.popup:before {
- top: @arrowOffset;
- left: @arrowDistanceFromEdge;
- right: auto;
- bottom: auto;
- margin-left: 0;
- box-shadow: @bottomArrowBoxShadow;
- }
-
- .ui.bottom.right.popup {
- margin-right: @boxArrowOffset;
- }
- /*rtl:rename*/
- .ui.bottom.right.popup:before {
- top: @arrowOffset;
- right: @arrowDistanceFromEdge;
- bottom: auto;
- left: auto;
- margin-left: 0;
- box-shadow: @bottomArrowBoxShadow;
- }
-}
-
-& when (@variationPopupTop) {
- /*--- Above ---*/
- & when (@variationPopupCenter) {
- .ui.top.center.popup:before {
- top: auto;
- right: auto;
- bottom: @arrowOffset;
- left: 50%;
- margin-left: @arrowOffset;
- }
- }
- & when (@variationPopupLeft) {
- .ui.top.left.popup {
- margin-left: @boxArrowOffset;
- }
- /*rtl:rename*/
- .ui.top.left.popup:before {
- bottom: @arrowOffset;
- left: @arrowDistanceFromEdge;
- top: auto;
- right: auto;
- margin-left: 0;
- }
- }
- & when (@variationPopupRight) {
- .ui.top.right.popup {
- margin-right: @boxArrowOffset;
- }
- /*rtl:rename*/
- .ui.top.right.popup:before {
- bottom: @arrowOffset;
- right: @arrowDistanceFromEdge;
- top: auto;
- left: auto;
- margin-left: 0;
- }
- }
-}
-
-& when (@variationPopupCenter) {
- /*--- Left Center ---*/
- /*rtl:rename*/
- & when (@variationPopupLeft) {
- .ui.left.center.popup:before {
- top: 50%;
- right: @arrowOffset;
- bottom: auto;
- left: auto;
- margin-top: @arrowOffset;
- box-shadow: @leftArrowBoxShadow;
- }
- }
- & when (@variationPopupRight) {
- /*--- Right Center ---*/
- /*rtl:rename*/
- .ui.right.center.popup:before {
- top: 50%;
- left: @arrowOffset;
- bottom: auto;
- right: auto;
- margin-top: @arrowOffset;
- box-shadow: @rightArrowBoxShadow;
- }
- }
- & when (@variationPopupLeft) or (@variationPopupRight) {
- .ui.right.center.popup:before,
- .ui.left.center.popup:before {
- background: @arrowCenterBackground;
- }
- }
-}
-
-& when (@variationPopupBottom) {
- /* Arrow Color By Location */
- .ui.bottom.popup:before {
- background: @arrowTopBackground;
- }
-}
-
-& when (@variationPopupTop) {
- .ui.top.popup:before {
- background: @arrowBottomBackground;
- }
-}
-
-& when (@variationPopupInverted) {
- & when (@variationPopupBottom) {
- /* Inverted Arrow Color */
- .ui.inverted.bottom.popup:before {
- background: @invertedArrowTopBackground;
- }
- }
- & when (@variationPopupCenter) {
- .ui.inverted.right.center.popup:before,
- .ui.inverted.left.center.popup:before {
- background: @invertedArrowCenterBackground;
- }
- }
- & when (@variationPopupTop) {
- .ui.inverted.top.popup:before {
- background: @invertedArrowBottomBackground;
- }
- }
-}
-
-
-/*******************************
- Coupling
-*******************************/
-
-/* Immediate Nested Grid */
-.ui.popup > .ui.grid:not(.padded) {
- width: @nestedGridWidth;
- margin: @nestedGridMargin;
-}
-
-/*******************************
- States
-*******************************/
-& when (@variationPopupLoading) {
- .ui.loading.popup {
- display: block;
- visibility: hidden;
- z-index: @loadingZIndex;
- }
-}
-
-.ui.animating.popup,
-.ui.visible.popup {
- display: block;
-}
-
-.ui.visible.popup {
- transform: translateZ(0);
- backface-visibility: hidden;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationPopupBasic) {
- /*--------------
- Basic
- ---------------*/
-
- .ui.basic.popup:before {
- display: none;
- }
-}
-
-& when (@variationPopupFixed) {
- .ui.fixed.popup {
- width: @maxWidth;
- }
-}
-
-& when (@variationPopupWide) {
- /*--------------
- Wide
- ---------------*/
-
- .ui.wide.popup {
- max-width: @wideWidth;
- &.fixed when (@variationPopupFixed) {
- width: @wideWidth;
- }
- }
- .ui[class*="very wide"].popup {
- max-width: @veryWideWidth;
- &.fixed when (@variationPopupFixed) {
- width: @veryWideWidth;
- }
- }
-
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.wide.popup,
- .ui[class*="very wide"].popup {
- max-width: @maxWidth;
- &.fixed when (@variationPopupFixed) {
- width:@maxWidth;
- }
- }
- }
-}
-
-& when (@variationPopupFluid) {
- /*--------------
- Fluid
- ---------------*/
-
- .ui.fluid.popup {
- width: 100%;
- max-width: none;
- }
-}
-
-& when (@variationPopupInverted) {
- /*--------------
- Colors
- ---------------*/
-
- /* Inverted colors */
- .ui.inverted.popup {
- background: @invertedBackground;
- color: @invertedColor;
- border: @invertedBorder;
- box-shadow: @invertedBoxShadow;
- }
- .ui.inverted.popup .header {
- background-color: @invertedHeaderBackground;
- color: @invertedHeaderColor;
- }
- .ui.inverted.popup:before {
- background-color: @invertedArrowColor;
- box-shadow: none !important;
- }
-}
-
-& when (@variationPopupFlowing) {
- /*--------------
- Flowing
- ---------------*/
-
- .ui.flowing.popup {
- max-width: none;
- }
-}
-
-
-/*--------------
- Sizes
----------------*/
-
-.ui.popup {
- font-size: @medium;
-}
-& when not (@variationPopupSizes = false) {
- each(@variationPopupSizes, {
- @s: @@value;
- .ui.@{value}.popup {
- font-size: @s;
- }
- & when (@variationPopupTooltip) {
- [data-tooltip][data-variation~="@{value}"]:before,
- [data-tooltip][data-variation~="@{value}"]:after {
- font-size: @s;
- }
- }
- })
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/progress.js b/semantic/src/definitions/modules/progress.js
deleted file mode 100644
index 0d90a4d..0000000
--- a/semantic/src/definitions/modules/progress.js
+++ /dev/null
@@ -1,1035 +0,0 @@
-/*!
- * # Fomantic-UI - Progress
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.progress = 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
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.progress.settings, parameters)
- : $.extend({}, $.fn.progress.settings),
-
- className = settings.className,
- metadata = settings.metadata,
- namespace = settings.namespace,
- selector = settings.selector,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $bars = $(this).find(selector.bar),
- $progresses = $(this).find(selector.progress),
- $label = $(this).find(selector.label),
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- animating = false,
- transitionEnd,
- module
- ;
- module = {
- helper: {
- sum: function (nums) {
- return Array.isArray(nums) ? nums.reduce(function (left, right) {
- return left + Number(right);
- }, 0) : 0;
- },
- /**
- * Derive precision for multiple progress with total and values.
- *
- * This helper dervices a precision that is sufficiently large to show minimum value of multiple progress.
- *
- * Example1
- * - total: 1122
- * - values: [325, 111, 74, 612]
- * - min ratio: 74/1122 = 0.0659...
- * - required precision: 100
- *
- * Example2
- * - total: 10541
- * - values: [3235, 1111, 74, 6121]
- * - min ratio: 74/10541 = 0.0070...
- * - required precision: 1000
- *
- * @param min A minimum value within multiple values
- * @param total A total amount of multiple values
- * @returns {number} A precison. Could be 1, 10, 100, ... 1e+10.
- */
- derivePrecision: function(min, total) {
- var precisionPower = 0
- var precision = 1;
- var ratio = min / total;
- while (precisionPower < 10) {
- ratio = ratio * precision;
- if (ratio > 1) {
- break;
- }
- precision = Math.pow(10, precisionPower++);
- }
- return precision;
- },
- forceArray: function (element) {
- return Array.isArray(element)
- ? element
- : !isNaN(element)
- ? [element]
- : typeof element == 'string'
- ? element.split(',')
- : []
- ;
- }
- },
-
- initialize: function() {
- module.set.duration();
- module.set.transitionEvent();
- module.debug(element);
-
- module.read.metadata();
- module.read.settings();
-
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of progress', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
- destroy: function() {
- module.verbose('Destroying previous progress for', $module);
- clearInterval(instance.interval);
- module.remove.state();
- $module.removeData(moduleNamespace);
- instance = undefined;
- },
-
- reset: function() {
- module.remove.nextValue();
- module.update.progress(0);
- },
-
- complete: function(keepState) {
- if(module.percent === undefined || module.percent < 100) {
- module.remove.progressPoll();
- if(keepState !== true){
- module.set.percent(100);
- }
- }
- },
-
- read: {
- metadata: function() {
- var
- data = {
- percent : module.helper.forceArray($module.data(metadata.percent)),
- total : $module.data(metadata.total),
- value : module.helper.forceArray($module.data(metadata.value))
- }
- ;
- if(data.total !== undefined) {
- module.debug('Total value set from metadata', data.total);
- module.set.total(data.total);
- }
- if(data.value.length > 0) {
- module.debug('Current value set from metadata', data.value);
- module.set.value(data.value);
- module.set.progress(data.value);
- }
- if(data.percent.length > 0) {
- module.debug('Current percent value set from metadata', data.percent);
- module.set.percent(data.percent);
- }
- },
- settings: function() {
- if(settings.total !== false) {
- module.debug('Current total set in settings', settings.total);
- module.set.total(settings.total);
- }
- if(settings.value !== false) {
- module.debug('Current value set in settings', settings.value);
- module.set.value(settings.value);
- module.set.progress(module.value);
- }
- if(settings.percent !== false) {
- module.debug('Current percent set in settings', settings.percent);
- module.set.percent(settings.percent);
- }
- }
- },
-
- bind: {
- transitionEnd: function(callback) {
- var
- transitionEnd = module.get.transitionEnd()
- ;
- $bars
- .one(transitionEnd + eventNamespace, function(event) {
- clearTimeout(module.failSafeTimer);
- callback.call(this, event);
- })
- ;
- module.failSafeTimer = setTimeout(function() {
- $bars.triggerHandler(transitionEnd);
- }, settings.duration + settings.failSafeDelay);
- module.verbose('Adding fail safe timer', module.timer);
- }
- },
-
- increment: function(incrementValue) {
- var
- startValue,
- newValue
- ;
- if( module.has.total() ) {
- startValue = module.get.value();
- incrementValue = incrementValue || 1;
- }
- else {
- startValue = module.get.percent();
- incrementValue = incrementValue || module.get.randomValue();
- }
- newValue = startValue + incrementValue;
- module.debug('Incrementing percentage by', startValue, newValue, incrementValue);
- newValue = module.get.normalizedValue(newValue);
- module.set.progress(newValue);
- },
- decrement: function(decrementValue) {
- var
- total = module.get.total(),
- startValue,
- newValue
- ;
- if(total) {
- startValue = module.get.value();
- decrementValue = decrementValue || 1;
- newValue = startValue - decrementValue;
- module.debug('Decrementing value by', decrementValue, startValue);
- }
- else {
- startValue = module.get.percent();
- decrementValue = decrementValue || module.get.randomValue();
- newValue = startValue - decrementValue;
- module.debug('Decrementing percentage by', decrementValue, startValue);
- }
- newValue = module.get.normalizedValue(newValue);
- module.set.progress(newValue);
- },
-
- has: {
- progressPoll: function() {
- return module.progressPoll;
- },
- total: function() {
- return (module.get.total() !== false);
- }
- },
-
- get: {
- text: function(templateText, index) {
- var
- index_ = index || 0,
- value = module.get.value(index_),
- total = module.get.total(),
- percent = (animating)
- ? module.get.displayPercent(index_)
- : module.get.percent(index_),
- left = (total !== false)
- ? Math.max(0,total - value)
- : (100 - percent)
- ;
- templateText = templateText || '';
- templateText = templateText
- .replace('{value}', value)
- .replace('{total}', total || 0)
- .replace('{left}', left)
- .replace('{percent}', percent)
- .replace('{bar}', settings.text.bars[index_] || '')
- ;
- module.verbose('Adding variables to progress bar text', templateText);
- return templateText;
- },
-
- normalizedValue: function(value) {
- if(value < 0) {
- module.debug('Value cannot decrement below 0');
- return 0;
- }
- if(module.has.total()) {
- if(value > module.total) {
- module.debug('Value cannot increment above total', module.total);
- return module.total;
- }
- }
- else if(value > 100 ) {
- module.debug('Value cannot increment above 100 percent');
- return 100;
- }
- return value;
- },
-
- updateInterval: function() {
- if(settings.updateInterval == 'auto') {
- return settings.duration;
- }
- return settings.updateInterval;
- },
-
- randomValue: function() {
- module.debug('Generating random increment percentage');
- return Math.floor((Math.random() * settings.random.max) + settings.random.min);
- },
-
- numericValue: function(value) {
- return (typeof value === 'string')
- ? (value.replace(/[^\d.]/g, '') !== '')
- ? +(value.replace(/[^\d.]/g, ''))
- : false
- : value
- ;
- },
-
- transitionEnd: function() {
- var
- element = document.createElement('element'),
- transitions = {
- 'transition' :'transitionend',
- 'OTransition' :'oTransitionEnd',
- 'MozTransition' :'transitionend',
- 'WebkitTransition' :'webkitTransitionEnd'
- },
- transition
- ;
- for(transition in transitions){
- if( element.style[transition] !== undefined ){
- return transitions[transition];
- }
- }
- },
-
- // gets current displayed percentage (if animating values this is the intermediary value)
- displayPercent: function(index) {
- var
- $bar = $($bars[index]),
- barWidth = $bar.width(),
- totalWidth = $module.width(),
- minDisplay = parseInt($bar.css('min-width'), 10),
- displayPercent = (barWidth > minDisplay)
- ? (barWidth / totalWidth * 100)
- : module.percent
- ;
- return (settings.precision > 0)
- ? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision)
- : Math.round(displayPercent)
- ;
- },
-
- percent: function(index) {
- return module.percent && module.percent[index || 0] || 0;
- },
- value: function(index) {
- return module.nextValue || module.value && module.value[index || 0] || 0;
- },
- total: function() {
- return module.total !== undefined ? module.total : false;
- }
- },
-
- create: {
- progressPoll: function() {
- module.progressPoll = setTimeout(function() {
- module.update.toNextValue();
- module.remove.progressPoll();
- }, module.get.updateInterval());
- },
- },
-
- is: {
- complete: function() {
- return module.is.success() || module.is.warning() || module.is.error();
- },
- success: function() {
- return $module.hasClass(className.success);
- },
- warning: function() {
- return $module.hasClass(className.warning);
- },
- error: function() {
- return $module.hasClass(className.error);
- },
- active: function() {
- return $module.hasClass(className.active);
- },
- visible: function() {
- return $module.is(':visible');
- }
- },
-
- remove: {
- progressPoll: function() {
- module.verbose('Removing progress poll timer');
- if(module.progressPoll) {
- clearTimeout(module.progressPoll);
- delete module.progressPoll;
- }
- },
- nextValue: function() {
- module.verbose('Removing progress value stored for next update');
- delete module.nextValue;
- },
- state: function() {
- module.verbose('Removing stored state');
- delete module.total;
- delete module.percent;
- delete module.value;
- },
- active: function() {
- module.verbose('Removing active state');
- $module.removeClass(className.active);
- },
- success: function() {
- module.verbose('Removing success state');
- $module.removeClass(className.success);
- },
- warning: function() {
- module.verbose('Removing warning state');
- $module.removeClass(className.warning);
- },
- error: function() {
- module.verbose('Removing error state');
- $module.removeClass(className.error);
- }
- },
-
- set: {
- barWidth: function(values) {
- module.debug("set bar width with ", values);
- values = module.helper.forceArray(values);
- var firstNonZeroIndex = -1;
- var lastNonZeroIndex = -1;
- var valuesSum = module.helper.sum(values);
- var barCounts = $bars.length;
- var isMultiple = barCounts > 1;
- var percents = values.map(function(value, index) {
- var allZero = (index === barCounts - 1 && valuesSum === 0);
- var $bar = $($bars[index]);
- if (value === 0 && isMultiple && !allZero) {
- $bar.css('display', 'none');
- } else {
- if (isMultiple && allZero) {
- $bar.css('background', 'transparent');
- }
- if (firstNonZeroIndex == -1) {
- firstNonZeroIndex = index;
- }
- lastNonZeroIndex = index;
- $bar.css({
- display: 'block',
- width: value + '%'
- });
- }
- return parseFloat(value);
- });
- values.forEach(function(_, index) {
- var $bar = $($bars[index]);
- $bar.css({
- borderTopLeftRadius: index == firstNonZeroIndex ? '' : 0,
- borderBottomLeftRadius: index == firstNonZeroIndex ? '' : 0,
- borderTopRightRadius: index == lastNonZeroIndex ? '' : 0,
- borderBottomRightRadius: index == lastNonZeroIndex ? '' : 0
- });
- });
- $module
- .attr('data-percent', percents)
- ;
- },
- duration: function(duration) {
- duration = duration || settings.duration;
- duration = (typeof duration == 'number')
- ? duration + 'ms'
- : duration
- ;
- module.verbose('Setting progress bar transition duration', duration);
- $bars
- .css({
- 'transition-duration': duration
- })
- ;
- },
- percent: function(percents) {
- percents = module.helper.forceArray(percents).map(function(percent) {
- return (typeof percent == 'string')
- ? +(percent.replace('%', ''))
- : percent
- ;
- });
- var hasTotal = module.has.total();
- var totalPercent = module.helper.sum(percents);
- var isMultipleValues = percents.length > 1 && hasTotal;
- var sumTotal = module.helper.sum(module.helper.forceArray(module.value));
- if (isMultipleValues && sumTotal > module.total) {
- // Sum values instead of pecents to avoid precision issues when summing floats
- module.error(error.sumExceedsTotal, sumTotal, module.total);
- } else if (!isMultipleValues && totalPercent > 100) {
- // Sum before rounding since sum of rounded may have error though sum of actual is fine
- module.error(error.tooHigh, totalPercent);
- } else if (totalPercent < 0) {
- module.error(error.tooLow, totalPercent);
- } else {
- var autoPrecision = settings.precision > 0
- ? settings.precision
- : isMultipleValues
- ? module.helper.derivePrecision(Math.min.apply(null, module.value), module.total)
- : 0;
-
- // round display percentage
- var roundedPercents = percents.map(function (percent) {
- return (autoPrecision > 0)
- ? Math.round(percent * (10 * autoPrecision)) / (10 * autoPrecision)
- : Math.round(percent)
- ;
- });
- module.percent = roundedPercents;
- if (hasTotal) {
- module.value = roundedPercents.map(function (percent) {
- return (autoPrecision > 0)
- ? Math.round((percent / 100) * module.total * (10 * autoPrecision)) / (10 * autoPrecision)
- : Math.round((percent / 100) * module.total * 10) / 10
- ;
- });
- if (settings.limitValues) {
- module.value = module.value.map(function (value) {
- return Math.max(0, Math.min(100, value));
- });
- }
- }
- module.set.barWidth(percents);
- module.set.labelInterval();
- module.set.labels();
- }
- settings.onChange.call(element, percents, module.value, module.total);
- },
- labelInterval: function() {
- var
- animationCallback = function() {
- module.verbose('Bar finished animating, removing continuous label updates');
- clearInterval(module.interval);
- animating = false;
- module.set.labels();
- }
- ;
- clearInterval(module.interval);
- module.bind.transitionEnd(animationCallback);
- animating = true;
- module.interval = setInterval(function() {
- var
- isInDOM = $.contains(document.documentElement, element)
- ;
- if(!isInDOM) {
- clearInterval(module.interval);
- animating = false;
- }
- module.set.labels();
- }, settings.framerate);
- },
- labels: function() {
- module.verbose('Setting both bar progress and outer label text');
- module.set.barLabel();
- module.set.state();
- },
- label: function(text) {
- text = text || '';
- if(text) {
- text = module.get.text(text);
- module.verbose('Setting label to text', text);
- $label.text(text);
- }
- },
- state: function(percent) {
- percent = (percent !== undefined)
- ? percent
- : module.helper.sum(module.percent)
- ;
- if(percent === 100) {
- if(settings.autoSuccess && $bars.length === 1 && !(module.is.warning() || module.is.error() || module.is.success())) {
- module.set.success();
- module.debug('Automatically triggering success at 100%');
- }
- else {
- module.verbose('Reached 100% removing active state');
- module.remove.active();
- module.remove.progressPoll();
- }
- }
- else if(percent > 0) {
- module.verbose('Adjusting active progress bar label', percent);
- module.set.active();
- }
- else {
- module.remove.active();
- module.set.label(settings.text.active);
- }
- },
- barLabel: function(text) {
- $progresses.map(function(index, element){
- var $progress = $(element);
- if (text !== undefined) {
- $progress.text( module.get.text(text, index) );
- }
- else if (settings.label == 'ratio' && module.has.total()) {
- module.verbose('Adding ratio to bar label');
- $progress.text( module.get.text(settings.text.ratio, index) );
- }
- else if (settings.label == 'percent') {
- module.verbose('Adding percentage to bar label');
- $progress.text( module.get.text(settings.text.percent, index) );
- }
- });
- },
- active: function(text) {
- text = text || settings.text.active;
- module.debug('Setting active state');
- if(settings.showActivity && !module.is.active() ) {
- $module.addClass(className.active);
- }
- module.remove.warning();
- module.remove.error();
- module.remove.success();
- text = settings.onLabelUpdate('active', text, module.value, module.total);
- if(text) {
- module.set.label(text);
- }
- module.bind.transitionEnd(function() {
- settings.onActive.call(element, module.value, module.total);
- });
- },
- success : function(text, keepState) {
- text = text || settings.text.success || settings.text.active;
- module.debug('Setting success state');
- $module.addClass(className.success);
- module.remove.active();
- module.remove.warning();
- module.remove.error();
- module.complete(keepState);
- if(settings.text.success) {
- text = settings.onLabelUpdate('success', text, module.value, module.total);
- module.set.label(text);
- }
- else {
- text = settings.onLabelUpdate('active', text, module.value, module.total);
- module.set.label(text);
- }
- module.bind.transitionEnd(function() {
- settings.onSuccess.call(element, module.total);
- });
- },
- warning : function(text, keepState) {
- text = text || settings.text.warning;
- module.debug('Setting warning state');
- $module.addClass(className.warning);
- module.remove.active();
- module.remove.success();
- module.remove.error();
- module.complete(keepState);
- text = settings.onLabelUpdate('warning', text, module.value, module.total);
- if(text) {
- module.set.label(text);
- }
- module.bind.transitionEnd(function() {
- settings.onWarning.call(element, module.value, module.total);
- });
- },
- error : function(text, keepState) {
- text = text || settings.text.error;
- module.debug('Setting error state');
- $module.addClass(className.error);
- module.remove.active();
- module.remove.success();
- module.remove.warning();
- module.complete(keepState);
- text = settings.onLabelUpdate('error', text, module.value, module.total);
- if(text) {
- module.set.label(text);
- }
- module.bind.transitionEnd(function() {
- settings.onError.call(element, module.value, module.total);
- });
- },
- transitionEvent: function() {
- transitionEnd = module.get.transitionEnd();
- },
- total: function(totalValue) {
- module.total = totalValue;
- },
- value: function(value) {
- module.value = module.helper.forceArray(value);
- },
- progress: function(value) {
- if(!module.has.progressPoll()) {
- module.debug('First update in progress update interval, immediately updating', value);
- module.update.progress(value);
- module.create.progressPoll();
- }
- else {
- module.debug('Updated within interval, setting next update to use new value', value);
- module.set.nextValue(value);
- }
- },
- nextValue: function(value) {
- module.nextValue = value;
- }
- },
-
- update: {
- toNextValue: function() {
- var
- nextValue = module.nextValue
- ;
- if(nextValue) {
- module.debug('Update interval complete using last updated value', nextValue);
- module.update.progress(nextValue);
- module.remove.nextValue();
- }
- },
- progress: function(values) {
- var hasTotal = module.has.total();
- if (hasTotal) {
- module.set.value(values);
- }
- var percentCompletes = module.helper.forceArray(values).map(function(value) {
- var
- percentComplete
- ;
- value = module.get.numericValue(value);
- if (value === false) {
- module.error(error.nonNumeric, value);
- }
- value = module.get.normalizedValue(value);
- if (hasTotal) {
- percentComplete = module.total > 0 ? (value / module.total) * 100 : 100;
- module.debug('Calculating percent complete from total', percentComplete);
- }
- else {
- percentComplete = value;
- module.debug('Setting value to exact percentage value', percentComplete);
- }
- return percentComplete;
- });
- module.set.percent( percentCompletes );
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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.progress.settings = {
-
- name : 'Progress',
- namespace : 'progress',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- random : {
- min : 2,
- max : 5
- },
-
- duration : 300,
-
- updateInterval : 'auto',
-
- autoSuccess : true,
- showActivity : true,
- limitValues : true,
-
- label : 'percent',
- precision : 0,
- framerate : (1000 / 30), /// 30 fps
-
- percent : false,
- total : false,
- value : false,
-
- // delay in ms for fail safe animation callback
- failSafeDelay : 100,
-
- onLabelUpdate : function(state, text, value, total){
- return text;
- },
- onChange : function(percent, value, total){},
- onSuccess : function(total){},
- onActive : function(value, total){},
- onError : function(value, total){},
- onWarning : function(value, total){},
-
- error : {
- method : 'The method you called is not defined.',
- nonNumeric : 'Progress value is non numeric',
- tooHigh : 'Value specified is above 100%',
- tooLow : 'Value specified is below 0%',
- sumExceedsTotal : 'Sum of multple values exceed total',
- },
-
- regExp: {
- variable: /\{\$*[A-z0-9]+\}/g
- },
-
- metadata: {
- percent : 'percent',
- total : 'total',
- value : 'value'
- },
-
- selector : {
- bar : '> .bar',
- label : '> .label',
- progress : '.bar > .progress'
- },
-
- text : {
- active : false,
- error : false,
- success : false,
- warning : false,
- percent : '{percent}%',
- ratio : '{value} of {total}',
- bars : ['']
- },
-
- className : {
- active : 'active',
- error : 'error',
- success : 'success',
- warning : 'warning'
- }
-
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/progress.less b/semantic/src/definitions/modules/progress.less
deleted file mode 100644
index e5300d3..0000000
--- a/semantic/src/definitions/modules/progress.less
+++ /dev/null
@@ -1,618 +0,0 @@
-/*!
- * # Fomantic-UI - Progress Bar
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'progress';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Progress
-*******************************/
-
-.ui.progress {
- position: relative;
- display: block;
- max-width: 100%;
- border: @border;
- margin: @margin;
- box-shadow: @boxShadow;
- background: @background;
- padding: @padding;
- border-radius: @borderRadius;
-}
-
-.ui.progress:first-child {
- margin: @firstMargin;
-}
-.ui.progress:last-child {
- margin: @lastMargin;
-}
-
-/*******************************
- Content
-*******************************/
-
-/* Activity Bar */
-.ui.progress .bar {
- display: block;
- line-height: 1;
- position: @barPosition;
- width: @barInitialWidth;
- min-width: @barMinWidth;
- background: @barBackground;
- border-radius: @barBorderRadius;
- transition: @barTransition;
- overflow: hidden;
-}
-.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,
-.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar {
- background:transparent;
-}
-.ui.progress[data-percent="0"] .bar .progress {
- color: @textColor;
-}
-& when (@variationProgressInverted) {
- .ui.inverted.progress[data-percent="0"] .bar .progress {
- color: @invertedTextColor;
- }
-}
-
-/* Percent Complete */
-.ui.progress .bar > .progress {
- white-space: nowrap;
- position: @progressPosition;
- width: @progressWidth;
- font-size: @progressSize;
- top: @progressTop;
- right: @progressRight;
- left: @progressLeft;
- bottom: @progressBottom;
- color: @progressColor;
- text-shadow: @progressTextShadow;
- margin-top: @progressOffset;
- font-weight: @progressFontWeight;
- text-align: @progressTextAlign;
-}
-
-/* Label */
-.ui.progress > .label {
- position: absolute;
- width: @labelWidth;
- font-size: @labelSize;
- top: @labelTop;
- right: @labelRight;
- left: @labelLeft;
- bottom: @labelBottom;
- color: @labelColor;
- font-weight: @labelFontWeight;
- text-shadow: @labelTextShadow;
- margin-top: @labelOffset;
- text-align: @labelTextAlign;
- transition: @labelTransition;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationProgressIndicating) {
- /* Indicating */
- .ui.indicating.progress[data-percent^="1"] .bar,
- .ui.indicating.progress[data-percent^="2"] .bar {
- background-color: @indicatingFirstColor;
- }
- .ui.indicating.progress[data-percent^="3"] .bar {
- background-color: @indicatingSecondColor;
- }
- .ui.indicating.progress[data-percent^="4"] .bar,
- .ui.indicating.progress[data-percent^="5"] .bar {
- background-color: @indicatingThirdColor;
- }
- .ui.indicating.progress[data-percent^="6"] .bar {
- background-color: @indicatingFourthColor;
- }
- .ui.indicating.progress[data-percent^="7"] .bar,
- .ui.indicating.progress[data-percent^="8"] .bar {
- background-color: @indicatingFifthColor;
- }
- .ui.indicating.progress[data-percent^="9"] .bar,
- .ui.indicating.progress[data-percent^="100"] .bar {
- background-color: @indicatingSixthColor;
- }
-
- /* Indicating Label */
- .ui.indicating.progress[data-percent^="1"] .label,
- .ui.indicating.progress[data-percent^="2"] .label {
- color: @indicatingFirstLabelColor;
- }
- .ui.indicating.progress[data-percent^="3"] .label {
- color: @indicatingSecondLabelColor;
- }
- .ui.indicating.progress[data-percent^="4"] .label,
- .ui.indicating.progress[data-percent^="5"] .label {
- color: @indicatingThirdLabelColor;
- }
- .ui.indicating.progress[data-percent^="6"] .label {
- color: @indicatingFourthLabelColor;
- }
- .ui.indicating.progress[data-percent^="7"] .label,
- .ui.indicating.progress[data-percent^="8"] .label {
- color: @indicatingFifthLabelColor;
- }
- .ui.indicating.progress[data-percent^="9"] .label,
- .ui.indicating.progress[data-percent^="100"] .label {
- color: @indicatingSixthLabelColor;
- }
-
- & when (@variationProgressInverted) {
- /* Inverted Indicating Label */
- .ui.inverted.indicating.progress[data-percent^="1"] .label,
- .ui.inverted.indicating.progress[data-percent^="2"] .label {
- color: @invertedIndicatingFirstLabelColor;
- }
- .ui.inverted.indicating.progress[data-percent^="3"] .label {
- color: @invertedIndicatingSecondLabelColor;
- }
- .ui.inverted.indicating.progress[data-percent^="4"] .label,
- .ui.inverted.indicating.progress[data-percent^="5"] .label {
- color: @invertedIndicatingThirdLabelColor;
- }
- .ui.inverted.indicating.progress[data-percent^="6"] .label {
- color: @invertedIndicatingFourthLabelColor;
- }
- .ui.inverted.indicating.progress[data-percent^="7"] .label,
- .ui.inverted.indicating.progress[data-percent^="8"] .label {
- color: @invertedIndicatingFifthLabelColor;
- }
- .ui.inverted.indicating.progress[data-percent^="9"] .label,
- .ui.inverted.indicating.progress[data-percent^="100"] .label {
- color: @invertedIndicatingSixthLabelColor;
- }
- }
-
- /* Single Digits */
- .ui.indicating.progress[data-percent="1"] .bar, .ui.indicating.progress[data-percent^="1."] .bar,
- .ui.indicating.progress[data-percent="2"] .bar, .ui.indicating.progress[data-percent^="2."] .bar,
- .ui.indicating.progress[data-percent="3"] .bar, .ui.indicating.progress[data-percent^="3."] .bar,
- .ui.indicating.progress[data-percent="4"] .bar, .ui.indicating.progress[data-percent^="4."] .bar,
- .ui.indicating.progress[data-percent="5"] .bar, .ui.indicating.progress[data-percent^="5."] .bar,
- .ui.indicating.progress[data-percent="6"] .bar, .ui.indicating.progress[data-percent^="6."] .bar,
- .ui.indicating.progress[data-percent="7"] .bar, .ui.indicating.progress[data-percent^="7."] .bar,
- .ui.indicating.progress[data-percent="8"] .bar, .ui.indicating.progress[data-percent^="8."] .bar,
- .ui.indicating.progress[data-percent="9"] .bar, .ui.indicating.progress[data-percent^="9."] .bar {
- background-color: @indicatingFirstColor;
- }
- .ui.indicating.progress[data-percent="0"] .label, .ui.indicating.progress[data-percent^="0."] .label,
- .ui.indicating.progress[data-percent="1"] .label, .ui.indicating.progress[data-percent^="1."] .label,
- .ui.indicating.progress[data-percent="2"] .label, .ui.indicating.progress[data-percent^="2."] .label,
- .ui.indicating.progress[data-percent="3"] .label, .ui.indicating.progress[data-percent^="3."] .label,
- .ui.indicating.progress[data-percent="4"] .label, .ui.indicating.progress[data-percent^="4."] .label,
- .ui.indicating.progress[data-percent="5"] .label, .ui.indicating.progress[data-percent^="5."] .label,
- .ui.indicating.progress[data-percent="6"] .label, .ui.indicating.progress[data-percent^="6."] .label,
- .ui.indicating.progress[data-percent="7"] .label, .ui.indicating.progress[data-percent^="7."] .label,
- .ui.indicating.progress[data-percent="8"] .label, .ui.indicating.progress[data-percent^="8."] .label,
- .ui.indicating.progress[data-percent="9"] .label, .ui.indicating.progress[data-percent^="9."] .label {
- color: @indicatingFirstLabelColor;
- }
- & when (@variationProgressInverted) {
- .ui.inverted.indicating.progress[data-percent="0"] .label, .ui.inverted.indicating.progress[data-percent^="0."] .label,
- .ui.inverted.indicating.progress[data-percent="1"] .label, .ui.inverted.indicating.progress[data-percent^="1."] .label,
- .ui.inverted.indicating.progress[data-percent="2"] .label, .ui.inverted.indicating.progress[data-percent^="2."] .label,
- .ui.inverted.indicating.progress[data-percent="3"] .label, .ui.inverted.indicating.progress[data-percent^="3."] .label,
- .ui.inverted.indicating.progress[data-percent="4"] .label, .ui.inverted.indicating.progress[data-percent^="4."] .label,
- .ui.inverted.indicating.progress[data-percent="5"] .label, .ui.inverted.indicating.progress[data-percent^="5."] .label,
- .ui.inverted.indicating.progress[data-percent="6"] .label, .ui.inverted.indicating.progress[data-percent^="6."] .label,
- .ui.inverted.indicating.progress[data-percent="7"] .label, .ui.inverted.indicating.progress[data-percent^="7."] .label,
- .ui.inverted.indicating.progress[data-percent="8"] .label, .ui.inverted.indicating.progress[data-percent^="8."] .label,
- .ui.inverted.indicating.progress[data-percent="9"] .label, .ui.inverted.indicating.progress[data-percent^="9."] .label {
- color: @invertedIndicatingFirstLabelColor;
- }
- }
-
- /* Indicating Success */
- .ui.ui.indicating.progress.success .label {
- color: @successHeaderColor;
- }
-}
-
-& when (@variationProgressMultiple) {
- /* Multiple */
- .ui.multiple.progress {
- display: flex;
- }
-}
-
-/*******************************
- States
-*******************************/
-
-& when (@variationProgressSuccess) {
- /*--------------
- Success
- ---------------*/
-
- .ui.ui.progress.success .bar {
- background-color: @successColor;
- }
- .ui.ui.progress.success .bar,
- .ui.ui.progress.success .bar::after {
- animation: none;
- }
- .ui.progress.success > .label {
- color: @successHeaderColor;
- }
-}
-
-& when (@variationProgressWarning) {
- /*--------------
- Warning
- ---------------*/
-
- .ui.ui.progress.warning .bar {
- background-color: @warningColor;
- }
- .ui.ui.progress.warning .bar,
- .ui.ui.progress.warning .bar::after {
- animation: none;
- }
- .ui.progress.warning > .label {
- color: @warningHeaderColor;
- }
-}
-
-& when (@variationProgressError) {
- /*--------------
- Error
- ---------------*/
-
- .ui.ui.progress.error .bar {
- background-color: @errorColor;
- }
- .ui.ui.progress.error .bar,
- .ui.ui.progress.error .bar::after {
- animation: none;
- }
- .ui.progress.error > .label {
- color: @errorHeaderColor;
- }
-}
-
-& when (@variationProgressActive) {
- /*--------------
- Active
- ---------------*/
-
- .ui.active.progress .bar {
- position: relative;
- min-width: @activeMinWidth;
- }
- .ui.active.progress .bar::after {
- content: '';
- opacity: 0;
-
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: @activePulseColor;
-
- border-radius: @barBorderRadius;
-
- animation: progress-active @activePulseDuration @defaultEasing infinite;
- transform-origin: left;
- }
- @keyframes progress-active {
- 0% {
- opacity: @activePulseMaxOpacity;
- transform: scale(0, 1);
- }
- 100% {
- opacity: 0;
- transform: scale(1);
- }
- }
-}
-
-& when (@variationProgressDisabled) {
- /*--------------
- Disabled
- ---------------*/
-
- .ui.disabled.progress {
- opacity: 0.35;
- }
- .ui.ui.disabled.progress .bar,
- .ui.ui.disabled.progress .bar::after {
- animation: none;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationProgressInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.progress {
- background: @invertedBackground;
- border: @invertedBorder;
- }
- .ui.inverted.progress .bar {
- background: @invertedBarBackground;
- }
- .ui.inverted.progress .bar > .progress {
- color: @invertedProgressColor;
- }
- .ui.inverted.progress > .label {
- color: @invertedLabelColor;
- }
- & when (@variationProgressSuccess) {
- .ui.inverted.progress.success > .label {
- color: @successColor;
- }
- }
- & when (@variationProgressWarning) {
- .ui.inverted.progress.warning > .label {
- color: @warningColor;
- }
- }
- & when (@variationProgressError) {
- .ui.inverted.progress.error > .label {
- color: @errorColor;
- }
- }
-}
-
-& when (@variationProgressAttached) {
- /*--------------
- Attached
- ---------------*/
-
- /* bottom attached */
- .ui.progress.attached {
- background: @attachedBackground;
- position: relative;
- border: none;
- margin: 0;
- }
- .ui.progress.attached,
- .ui.progress.attached .bar {
- display: block;
- height: @attachedHeight;
- padding: 0;
- overflow: hidden;
- border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
- }
- .ui.progress.attached .bar {
- border-radius: 0;
- }
-
- /* top attached */
- .ui.progress.top.attached,
- .ui.progress.top.attached .bar {
- top: 0;
- border-radius: @attachedBorderRadius @attachedBorderRadius 0 0;
- }
- .ui.progress.top.attached .bar {
- border-radius: 0;
- }
-
- /* Coupling */
-
- .ui.segment > .ui.attached.progress,
- .ui.card > .ui.attached.progress {
- position: absolute;
- top: auto;
- left: 0;
- bottom: 100%;
- width: 100%;
- }
-
- .ui.segment > .ui.bottom.attached.progress,
- .ui.card > .ui.bottom.attached.progress {
- top: 100%;
- bottom: auto;
- }
-}
-
-/*--------------
- Colors
----------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
-
- .ui.indeterminate.@{color}.progress .bar::before,
- .ui.@{color}.progress .bar,
- .ui.progress .@{color}.bar {
- background-color: @c;
- }
- & when (@variationProgressInverted) {
- .ui.inverted.indeterminate.@{color}.progress .bar::before,
- .ui.@{color}.inverted.progress .bar,
- .ui.inverted.progress .@{color}.bar {
- background-color: @l;
- }
- }
-})
-
-/*--------------
- Sizes
----------------*/
-
-.ui.progress {
- font-size: @medium;
-}
-.ui.progress .bar {
- height: @barHeight;
-}
-& when not (@variationProgressSizes = false) {
- each(@variationProgressSizes, {
- @h: @{value}BarHeight;
- @s: @@value;
- .ui.@{value}.progress {
- font-size: @s;
- }
- .ui.@{value}.progress .bar {
- height: @@h;
- }
- })
-}
-
-& when (@variationProgressIndeterminate) {
- /*---------------
- Indeterminate
- ----------------*/
-
- .ui.indeterminate.progress .bar {
- width: 100%;
- }
- .ui.indeterminate.progress .bar .progress,
- .ui.progress .bar .centered.progress {
- text-align: center;
- position: relative;
- }
- .ui.indeterminate.progress .bar::before {
- content: '';
- position: absolute;
- top: 0;
- bottom: 0;
- border-radius: @barBorderRadius;
- animation: progress-pulsating @indeterminatePulseDuration @defaultEasing infinite;
- transform-origin: center;
- width: 100%;
- }
- & when (@variationProgressSpeeds) {
- .ui.slow.indeterminate.progress .bar::before {
- animation-duration: @indeterminatePulseDurationSlow;
- }
- .ui.fast.indeterminate.progress .bar::before {
- animation-duration: @indeterminatePulseDurationFast;
- }
- }
- & when (@variationProgressSwinging) {
- .ui.swinging.indeterminate.progress .bar::before {
- transform-origin: left;
- animation-name: progress-swinging;
- }
- }
- & when (@variationProgressSliding) {
- .ui.sliding.indeterminate.progress .bar::before {
- transform-origin: left;
- animation-name: progress-sliding;
- }
- }
- & when (@variationProgressFilling) {
- .ui.filling.indeterminate.progress .bar::before {
- animation-name: progress-filling;
- }
- }
- .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
- background: @indeterminatePulseColor;
- }
- & when (@variationProgressSliding) or (@variationProgressSwinging) or (@variationProgressFilling) {
- .ui.sliding.indeterminate.progress .bar,
- .ui.swinging.indeterminate.progress .bar,
- .ui.filling.indeterminate.progress .bar {
- background: @background;
- }
- & when (@variationProgressSliding) or (@variationProgressSwinging) {
- .ui.sliding.indeterminate.progress .bar .progress,
- .ui.swinging.indeterminate.progress .bar .progress {
- color: @invertedProgressColor;
- }
- }
- & when (@variationProgressInverted) {
- .ui.inverted.sliding.indeterminate.progress .bar,
- .ui.inverted.swinging.indeterminate.progress .bar,
- .ui.inverted.filling.indeterminate.progress .bar {
- background: @invertedBackground;
- }
- & when (@variationProgressSliding) or (@variationProgressSwinging) {
- .ui.inverted.sliding.indeterminate.progress .bar .progress,
- .ui.inverted.swinging.indeterminate.progress .bar .progress {
- color: @progressColor;
- }
- }
- }
- & when (@variationProgressSwinging) {
- @keyframes progress-swinging {
- 0%, 100% {
- width:10%;
- left:-25%;
- }
- 25%, 65% {
- width:70%;
- }
- 50% {
- width: 10%;
- left:100%;
- }
- }
- }
-
- & when (@variationProgressSliding) {
- @keyframes progress-sliding {
- 0% {
- width:10%;
- left:-25%;
- }
- 50% {
- width:70%;
- }
- 100% {
- width:10%;
- left:100%;
- }
- }
- }
-
- & when (@variationProgressFilling) {
- @keyframes progress-filling {
- 0% {
- transform: scale(0,1);
- }
- 80% {
- transform: scale(1);
- opacity:1;
- }
- 100% {
- opacity:0;
- }
- }
- }
- }
- @keyframes progress-pulsating {
- 0% {
- transform: scale(0,1);
- opacity:0.7;
- }
- 100% {
- transform: scale(1);
- opacity:0;
- }
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/rating.js b/semantic/src/definitions/modules/rating.js
deleted file mode 100644
index 8a81011..0000000
--- a/semantic/src/definitions/modules/rating.js
+++ /dev/null
@@ -1,554 +0,0 @@
-/*!
- * # Fomantic-UI - Rating
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.rating = 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
- ;
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.rating.settings, parameters)
- : $.extend({}, $.fn.rating.settings),
-
- namespace = settings.namespace,
- className = settings.className,
- metadata = settings.metadata,
- selector = settings.selector,
- cssVars = settings.cssVars,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- element = this,
- instance = $(this).data(moduleNamespace),
-
- $module = $(this),
- $icon = $module.find(selector.icon),
-
- initialLoad,
- module
- ;
-
- module = {
-
- initialize: function() {
- module.verbose('Initializing rating module', settings);
-
- if($icon.length === 0) {
- module.setup.layout();
- }
-
- if(settings.interactive && !module.is.disabled()) {
- module.enable();
- }
- else {
- module.disable();
- }
- module.set.initialLoad();
- module.set.rating( module.get.initialRating() );
- module.remove.initialLoad();
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Instantiating module', settings);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous instance', instance);
- module.remove.events();
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- $icon = $module.find(selector.icon);
- },
-
- setup: {
- layout: function() {
- var
- maxRating = module.get.maxRating(),
- icon = module.get.icon(),
- html = $.fn.rating.settings.templates.icon(maxRating, icon)
- ;
- module.debug('Generating icon html dynamically');
- $module
- .html(html)
- ;
- module.refresh();
- }
- },
-
- event: {
- mouseenter: function() {
- var
- $activeIcon = $(this)
- ;
- $activeIcon
- .nextAll()
- .removeClass(className.selected)
- ;
- $module
- .addClass(className.selected)
- ;
- $activeIcon
- .addClass(className.selected)
- .prevAll()
- .addClass(className.selected)
- ;
- },
- mouseleave: function() {
- $module
- .removeClass(className.selected)
- ;
- $icon
- .removeClass(className.selected)
- ;
- },
- click: function() {
- var
- $activeIcon = $(this),
- currentRating = module.get.rating(),
- rating = $icon.index($activeIcon) + 1,
- canClear = (settings.clearable == 'auto')
- ? ($icon.length === 1)
- : settings.clearable
- ;
- if(canClear && currentRating == rating) {
- module.clearRating();
- }
- else {
- module.set.rating( rating );
- }
- }
- },
-
- clearRating: function() {
- module.debug('Clearing current rating');
- module.set.rating(0);
- },
-
- bind: {
- events: function() {
- module.verbose('Binding events');
- $module
- .on('mouseenter' + eventNamespace, selector.icon, module.event.mouseenter)
- .on('mouseleave' + eventNamespace, selector.icon, module.event.mouseleave)
- .on('click' + eventNamespace, selector.icon, module.event.click)
- ;
- }
- },
-
- remove: {
- events: function() {
- module.verbose('Removing events');
- $module
- .off(eventNamespace)
- ;
- },
- initialLoad: function() {
- initialLoad = false;
- }
- },
-
- enable: function() {
- module.debug('Setting rating to interactive mode');
- module.bind.events();
- $module
- .removeClass(className.disabled)
- ;
- },
-
- disable: function() {
- module.debug('Setting rating to read-only mode');
- module.remove.events();
- $module
- .addClass(className.disabled)
- ;
- },
-
- is: {
- initialLoad: function() {
- return initialLoad;
- },
- disabled: function() {
- return $module.hasClass(className.disabled);
- }
- },
-
- get: {
- icon: function(){
- var icon = $module.data(metadata.icon);
- if (icon) {
- $module.removeData(metadata.icon);
- }
- return icon || settings.icon;
- },
- initialRating: function() {
- if($module.data(metadata.rating) !== undefined) {
- $module.removeData(metadata.rating);
- return $module.data(metadata.rating);
- }
- return settings.initialRating;
- },
- maxRating: function() {
- if($module.data(metadata.maxRating) !== undefined) {
- $module.removeData(metadata.maxRating);
- return $module.data(metadata.maxRating);
- }
- return settings.maxRating;
- },
- rating: function() {
- var
- currentRating = $icon.filter('.' + className.active).length
- ;
- module.verbose('Current rating retrieved', currentRating);
- return currentRating;
- }
- },
-
- set: {
- rating: function(rating) {
- var
- ratingIndex = Math.floor(
- (rating - 1 >= 0)
- ? (rating - 1)
- : 0
- ),
- $activeIcon = $icon.eq(ratingIndex),
- $partialActiveIcon = rating <= 1
- ? $activeIcon
- : $activeIcon.next()
- ,
- filledPercentage = (rating % 1) * 100
- ;
- $module
- .removeClass(className.selected)
- ;
- $icon
- .removeClass(className.selected)
- .removeClass(className.active)
- .removeClass(className.partiallyActive)
- ;
- if(rating > 0) {
- module.verbose('Setting current rating to', rating);
- $activeIcon
- .prevAll()
- .addBack()
- .addClass(className.active)
- ;
- if($activeIcon.next() && rating % 1 !== 0) {
- $partialActiveIcon
- .addClass(className.partiallyActive)
- .addClass(className.active)
- ;
- $partialActiveIcon
- .css(cssVars.filledCustomPropName, filledPercentage + '%')
- ;
- if($partialActiveIcon.css('backgroundColor') === 'transparent') {
- $partialActiveIcon
- .removeClass(className.partiallyActive)
- .removeClass(className.active)
- ;
- }
- }
- }
- if(!module.is.initialLoad()) {
- settings.onRate.call(element, rating);
- }
- },
- initialLoad: function() {
- initialLoad = true;
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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($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(Array.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.rating.settings = {
-
- name : 'Rating',
- namespace : 'rating',
-
- icon : 'star',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- initialRating : 0,
- interactive : true,
- maxRating : 4,
- clearable : 'auto',
-
- fireOnInit : false,
-
- onRate : function(rating){},
-
- error : {
- method : 'The method you called is not defined',
- noMaximum : 'No maximum rating specified. Cannot generate HTML automatically'
- },
-
-
- metadata: {
- rating : 'rating',
- maxRating : 'maxRating',
- icon : 'icon'
- },
-
- className : {
- active : 'active',
- disabled : 'disabled',
- selected : 'selected',
- loading : 'loading',
- partiallyActive : 'partial'
- },
-
- cssVars : {
- filledCustomPropName : '--full'
- },
-
- selector : {
- icon : '.icon'
- },
-
- templates: {
- icon: function(maxRating, iconClass) {
- var
- icon = 1,
- html = ''
- ;
- while(icon <= maxRating) {
- html += '<i class="'+iconClass+' icon"></i>';
- icon++;
- }
- return html;
- }
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/rating.less b/semantic/src/definitions/modules/rating.less
deleted file mode 100644
index de95043..0000000
--- a/semantic/src/definitions/modules/rating.less
+++ /dev/null
@@ -1,177 +0,0 @@
-/*!
- * # Fomantic-UI - Rating
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'rating';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Rating
-*******************************/
-
-.ui.rating {
- display: inline-flex;
- white-space: @whiteSpace;
- vertical-align: @verticalAlign;
-}
-.ui.rating:last-child {
- margin-right: 0;
-}
-
-/* Icon */
-.ui.rating .icon {
- padding: 0;
- margin: 0;
- text-align: center;
- font-weight: @normal;
- font-style: normal;
- flex: 1 0 auto;
- cursor: @iconCursor;
- width: @iconWidth;
- height: @iconHeight;
- transition: @iconTransition;
- line-height: 1;
- backface-visibility: hidden;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-
-/*-------------------
- Standard
---------------------*/
-
-/* Inactive Icon */
-.ui.rating .icon {
- background: @inactiveBackground;
- color: @inactiveColor;
-}
-
-/* Active Icon */
-.ui.rating .active.icon {
- background: @activeBackground;
- color: @activeColor;
-}
-
-/* Partially Active Icon */
-.ui.rating .icon.partial.active {
- background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
- background-clip: text;
- color: transparent;
-}
-
-/* Selected Icon */
-.ui.rating .icon.selected,
-.ui.rating .icon.selected.active,
-.ui.rating .icon.selected.partial.active {
- background: @selectedBackground;
- color: @selectedColor;
- background-clip: unset;
-}
-
-/*--------------
- Colors
--------------- */
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
- @h: @colors[@@color][hover];
- @lh: @colors[@@color][lightHover];
-
- .ui.@{color}.rating .active.icon {
- color: @l;
- text-shadow: 0px -@shadowWidth 0px @c,
- -@shadowWidth 0px 0px @c,
- 0px @shadowWidth 0px @c,
- @shadowWidth 0px 0px @c;
- }
- .ui.@{color}.rating .icon.selected,
- .ui.@{color}.rating .icon.selected.active,
- .ui.@{color}.rating .icon.selected.partial.active {
- background: inherit;
- color: @lh;
- text-shadow: 0px -@shadowWidth 0px @h,
- -@shadowWidth 0px 0px @h,
- 0px @shadowWidth 0px @h,
- @shadowWidth 0px 0px @h;
-
- -webkit-text-stroke: unset;
- background-clip: unset;
- }
- .ui.@{color}.rating .icon.partial.active {
- background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
- text-shadow: none;
- -webkit-text-stroke: @c 0.78px;
- background-clip: text;
- color: transparent;
- }
-})
-
-
-/*******************************
- States
-*******************************/
-
-& when (@variationRatingDisabled) {
- /*-------------------
- Disabled
- --------------------*/
-
- /* disabled rating */
- .ui.disabled.rating .icon {
- cursor: default;
- }
-}
-
-
-/*-------------------
- User Interactive
---------------------*/
-
-/* Selected Rating */
-.ui.rating.selected .active.icon {
- opacity: @interactiveActiveIconOpacity;
-}
-.ui.rating.selected .icon.selected,
-.ui.rating .icon.selected {
- opacity: @interactiveSelectedIconOpacity;
-}
-
-
-
-/*******************************
- Variations
-*******************************/
-
-.ui.rating {
- font-size: @medium;
-}
-& when not (@variationRatingSizes = false) {
- each(@variationRatingSizes, {
- @s: @@value;
- .ui.@{value}.rating {
- font-size: @s;
- }
- })
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/search.js b/semantic/src/definitions/modules/search.js
deleted file mode 100644
index 6f2c7ee..0000000
--- a/semantic/src/definitions/modules/search.js
+++ /dev/null
@@ -1,1565 +0,0 @@
-/*!
- * # Fomantic-UI - Search
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.search = 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
- ;
- $(this)
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.search.settings, parameters)
- : $.extend({}, $.fn.search.settings),
-
- className = settings.className,
- metadata = settings.metadata,
- regExp = settings.regExp,
- fields = settings.fields,
- selector = settings.selector,
- error = settings.error,
- namespace = settings.namespace,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
- $module = $(this),
- $prompt = $module.find(selector.prompt),
- $searchButton = $module.find(selector.searchButton),
- $results = $module.find(selector.results),
- $result = $module.find(selector.result),
- $category = $module.find(selector.category),
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- disabledBubbled = false,
- resultsDismissed = false,
-
- module
- ;
-
- module = {
-
- initialize: function() {
- module.verbose('Initializing module');
- module.get.settings();
- module.determine.searchFields();
- module.bind.events();
- module.set.type();
- module.create.results();
- module.instantiate();
- },
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
- destroy: function() {
- module.verbose('Destroying instance');
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- module.debug('Refreshing selector cache');
- $prompt = $module.find(selector.prompt);
- $searchButton = $module.find(selector.searchButton);
- $category = $module.find(selector.category);
- $results = $module.find(selector.results);
- $result = $module.find(selector.result);
- },
-
- refreshResults: function() {
- $results = $module.find(selector.results);
- $result = $module.find(selector.result);
- },
-
- bind: {
- events: function() {
- module.verbose('Binding events to search');
- if(settings.automatic) {
- $module
- .on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input)
- ;
- $prompt
- .attr('autocomplete', 'off')
- ;
- }
- $module
- // prompt
- .on('focus' + eventNamespace, selector.prompt, module.event.focus)
- .on('blur' + eventNamespace, selector.prompt, module.event.blur)
- .on('keydown' + eventNamespace, selector.prompt, module.handleKeyboard)
- // search button
- .on('click' + eventNamespace, selector.searchButton, module.query)
- // results
- .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
- .on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup)
- .on('click' + eventNamespace, selector.result, module.event.result.click)
- ;
- }
- },
-
- determine: {
- searchFields: function() {
- // this makes sure $.extend does not add specified search fields to default fields
- // this is the only setting which should not extend defaults
- if(parameters && parameters.searchFields !== undefined) {
- settings.searchFields = parameters.searchFields;
- }
- }
- },
-
- event: {
- input: function() {
- if(settings.searchDelay) {
- clearTimeout(module.timer);
- module.timer = setTimeout(function() {
- if(module.is.focused()) {
- module.query();
- }
- }, settings.searchDelay);
- }
- else {
- module.query();
- }
- },
- focus: function() {
- module.set.focus();
- if(settings.searchOnFocus && module.has.minimumCharacters() ) {
- module.query(function() {
- if(module.can.show() ) {
- module.showResults();
- }
- });
- }
- },
- blur: function(event) {
- var
- pageLostFocus = (document.activeElement === this),
- callback = function() {
- module.cancel.query();
- module.remove.focus();
- module.timer = setTimeout(module.hideResults, settings.hideDelay);
- }
- ;
- if(pageLostFocus) {
- return;
- }
- resultsDismissed = false;
- if(module.resultsClicked) {
- module.debug('Determining if user action caused search to close');
- $module
- .one('click.close' + eventNamespace, selector.results, function(event) {
- if(module.is.inMessage(event) || disabledBubbled) {
- $prompt.focus();
- return;
- }
- disabledBubbled = false;
- if( !module.is.animating() && !module.is.hidden()) {
- callback();
- }
- })
- ;
- }
- else {
- module.debug('Input blurred without user action, closing results');
- callback();
- }
- },
- result: {
- mousedown: function() {
- module.resultsClicked = true;
- },
- mouseup: function() {
- module.resultsClicked = false;
- },
- click: function(event) {
- module.debug('Search result selected');
- var
- $result = $(this),
- $title = $result.find(selector.title).eq(0),
- $link = $result.is('a[href]')
- ? $result
- : $result.find('a[href]').eq(0),
- href = $link.attr('href') || false,
- target = $link.attr('target') || false,
- // title is used for result lookup
- value = ($title.length > 0)
- ? $title.text()
- : false,
- results = module.get.results(),
- result = $result.data(metadata.result) || module.get.result(value, results)
- ;
- if(value) {
- module.set.value(value);
- }
- if( $.isFunction(settings.onSelect) ) {
- if(settings.onSelect.call(element, result, results) === false) {
- module.debug('Custom onSelect callback cancelled default select action');
- disabledBubbled = true;
- return;
- }
- }
- module.hideResults();
- if(href) {
- event.preventDefault();
- module.verbose('Opening search link found in result', $link);
- if(target == '_blank' || event.ctrlKey) {
- window.open(href);
- }
- else {
- window.location.href = (href);
- }
- }
- }
- }
- },
- ensureVisible: function ensureVisible($el) {
- var elTop, elBottom, resultsScrollTop, resultsHeight;
-
- elTop = $el.position().top;
- elBottom = elTop + $el.outerHeight(true);
-
- resultsScrollTop = $results.scrollTop();
- resultsHeight = $results.height()
- parseInt($results.css('paddingTop'), 0) +
- parseInt($results.css('paddingBottom'), 0);
-
- if (elTop < 0) {
- $results.scrollTop(resultsScrollTop + elTop);
- }
-
- else if (resultsHeight < elBottom) {
- $results.scrollTop(resultsScrollTop + (elBottom - resultsHeight));
- }
- },
- handleKeyboard: function(event) {
- var
- // force selector refresh
- $result = $module.find(selector.result),
- $category = $module.find(selector.category),
- $activeResult = $result.filter('.' + className.active),
- currentIndex = $result.index( $activeResult ),
- resultSize = $result.length,
- hasActiveResult = $activeResult.length > 0,
-
- keyCode = event.which,
- keys = {
- backspace : 8,
- enter : 13,
- escape : 27,
- upArrow : 38,
- downArrow : 40
- },
- newIndex
- ;
- // search shortcuts
- if(keyCode == keys.escape) {
- module.verbose('Escape key pressed, blurring search field');
- module.hideResults();
- resultsDismissed = true;
- }
- if( module.is.visible() ) {
- if(keyCode == keys.enter) {
- module.verbose('Enter key pressed, selecting active result');
- if( $result.filter('.' + className.active).length > 0 ) {
- module.event.result.click.call($result.filter('.' + className.active), event);
- event.preventDefault();
- return false;
- }
- }
- else if(keyCode == keys.upArrow && hasActiveResult) {
- module.verbose('Up key pressed, changing active result');
- newIndex = (currentIndex - 1 < 0)
- ? currentIndex
- : currentIndex - 1
- ;
- $category
- .removeClass(className.active)
- ;
- $result
- .removeClass(className.active)
- .eq(newIndex)
- .addClass(className.active)
- .closest($category)
- .addClass(className.active)
- ;
- module.ensureVisible($result.eq(newIndex));
- event.preventDefault();
- }
- else if(keyCode == keys.downArrow) {
- module.verbose('Down key pressed, changing active result');
- newIndex = (currentIndex + 1 >= resultSize)
- ? currentIndex
- : currentIndex + 1
- ;
- $category
- .removeClass(className.active)
- ;
- $result
- .removeClass(className.active)
- .eq(newIndex)
- .addClass(className.active)
- .closest($category)
- .addClass(className.active)
- ;
- module.ensureVisible($result.eq(newIndex));
- event.preventDefault();
- }
- }
- else {
- // query shortcuts
- if(keyCode == keys.enter) {
- module.verbose('Enter key pressed, executing query');
- module.query();
- module.set.buttonPressed();
- $prompt.one('keyup', module.remove.buttonFocus);
- }
- }
- },
-
- setup: {
- api: function(searchTerm, callback) {
- var
- apiSettings = {
- debug : settings.debug,
- on : false,
- cache : settings.cache,
- action : 'search',
- urlData : {
- query : searchTerm
- },
- onSuccess : function(response) {
- module.parse.response.call(element, response, searchTerm);
- callback();
- },
- onFailure : function() {
- module.displayMessage(error.serverError);
- callback();
- },
- onAbort : function(response) {
- },
- onError : module.error
- }
- ;
- $.extend(true, apiSettings, settings.apiSettings);
- module.verbose('Setting up API request', apiSettings);
- $module.api(apiSettings);
- }
- },
-
- can: {
- useAPI: function() {
- return $.fn.api !== undefined;
- },
- show: function() {
- return module.is.focused() && !module.is.visible() && !module.is.empty();
- },
- transition: function() {
- return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
- }
- },
-
- is: {
- animating: function() {
- return $results.hasClass(className.animating);
- },
- hidden: function() {
- return $results.hasClass(className.hidden);
- },
- inMessage: function(event) {
- if(!event.target) {
- return;
- }
- var
- $target = $(event.target),
- isInDOM = $.contains(document.documentElement, event.target)
- ;
- return (isInDOM && $target.closest(selector.message).length > 0);
- },
- empty: function() {
- return ($results.html() === '');
- },
- visible: function() {
- return ($results.filter(':visible').length > 0);
- },
- focused: function() {
- return ($prompt.filter(':focus').length > 0);
- }
- },
-
- get: {
- settings: function() {
- if($.isPlainObject(parameters) && parameters.searchFullText) {
- settings.fullTextSearch = parameters.searchFullText;
- module.error(settings.error.oldSearchSyntax, element);
- }
- if (settings.ignoreDiacritics && !String.prototype.normalize) {
- settings.ignoreDiacritics = false;
- module.error(error.noNormalize, element);
- }
- },
- inputEvent: function() {
- var
- prompt = $prompt[0],
- inputEvent = (prompt !== undefined && prompt.oninput !== undefined)
- ? 'input'
- : (prompt !== undefined && prompt.onpropertychange !== undefined)
- ? 'propertychange'
- : 'keyup'
- ;
- return inputEvent;
- },
- value: function() {
- return $prompt.val();
- },
- results: function() {
- var
- results = $module.data(metadata.results)
- ;
- return results;
- },
- result: function(value, results) {
- var
- result = false
- ;
- value = (value !== undefined)
- ? value
- : module.get.value()
- ;
- results = (results !== undefined)
- ? results
- : module.get.results()
- ;
- if(settings.type === 'category') {
- module.debug('Finding result that matches', value);
- $.each(results, function(index, category) {
- if(Array.isArray(category.results)) {
- result = module.search.object(value, category.results)[0];
- // don't continue searching if a result is found
- if(result) {
- return false;
- }
- }
- });
- }
- else {
- module.debug('Finding result in results object', value);
- result = module.search.object(value, results)[0];
- }
- return result || false;
- },
- },
-
- select: {
- firstResult: function() {
- module.verbose('Selecting first result');
- $result.first().addClass(className.active);
- }
- },
-
- set: {
- focus: function() {
- $module.addClass(className.focus);
- },
- loading: function() {
- $module.addClass(className.loading);
- },
- value: function(value) {
- module.verbose('Setting search input value', value);
- $prompt
- .val(value)
- ;
- },
- type: function(type) {
- type = type || settings.type;
- if(settings.type == 'category') {
- $module.addClass(settings.type);
- }
- },
- buttonPressed: function() {
- $searchButton.addClass(className.pressed);
- }
- },
-
- remove: {
- loading: function() {
- $module.removeClass(className.loading);
- },
- focus: function() {
- $module.removeClass(className.focus);
- },
- buttonPressed: function() {
- $searchButton.removeClass(className.pressed);
- },
- diacritics: function(text) {
- return settings.ignoreDiacritics ? text.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : text;
- }
- },
-
- query: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- var
- searchTerm = module.get.value(),
- cache = module.read.cache(searchTerm)
- ;
- callback = callback || function() {};
- if( module.has.minimumCharacters() ) {
- if(cache) {
- module.debug('Reading result from cache', searchTerm);
- module.save.results(cache.results);
- module.addResults(cache.html);
- module.inject.id(cache.results);
- callback();
- }
- else {
- module.debug('Querying for', searchTerm);
- if($.isPlainObject(settings.source) || Array.isArray(settings.source)) {
- module.search.local(searchTerm);
- callback();
- }
- else if( module.can.useAPI() ) {
- module.search.remote(searchTerm, callback);
- }
- else {
- module.error(error.source);
- callback();
- }
- }
- settings.onSearchQuery.call(element, searchTerm);
- }
- else {
- module.hideResults();
- }
- },
-
- search: {
- local: function(searchTerm) {
- var
- results = module.search.object(searchTerm, settings.source),
- searchHTML
- ;
- module.set.loading();
- module.save.results(results);
- module.debug('Returned full local search results', results);
- if(settings.maxResults > 0) {
- module.debug('Using specified max results', results);
- results = results.slice(0, settings.maxResults);
- }
- if(settings.type == 'category') {
- results = module.create.categoryResults(results);
- }
- searchHTML = module.generateResults({
- results: results
- });
- module.remove.loading();
- module.addResults(searchHTML);
- module.inject.id(results);
- module.write.cache(searchTerm, {
- html : searchHTML,
- results : results
- });
- },
- remote: function(searchTerm, callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if($module.api('is loading')) {
- $module.api('abort');
- }
- module.setup.api(searchTerm, callback);
- $module
- .api('query')
- ;
- },
- object: function(searchTerm, source, searchFields) {
- searchTerm = module.remove.diacritics(String(searchTerm));
- var
- results = [],
- exactResults = [],
- fuzzyResults = [],
- searchExp = searchTerm.replace(regExp.escape, '\\$&'),
- matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'),
-
- // avoid duplicates when pushing results
- addResult = function(array, result) {
- var
- notResult = ($.inArray(result, results) == -1),
- notFuzzyResult = ($.inArray(result, fuzzyResults) == -1),
- notExactResults = ($.inArray(result, exactResults) == -1)
- ;
- if(notResult && notFuzzyResult && notExactResults) {
- array.push(result);
- }
- }
- ;
- source = source || settings.source;
- searchFields = (searchFields !== undefined)
- ? searchFields
- : settings.searchFields
- ;
-
- // search fields should be array to loop correctly
- if(!Array.isArray(searchFields)) {
- searchFields = [searchFields];
- }
-
- // exit conditions if no source
- if(source === undefined || source === false) {
- module.error(error.source);
- return [];
- }
- // iterate through search fields looking for matches
- $.each(searchFields, function(index, field) {
- $.each(source, function(label, content) {
- var
- fieldExists = (typeof content[field] == 'string') || (typeof content[field] == 'number')
- ;
- if(fieldExists) {
- var text;
- if (typeof content[field] === 'string'){
- text = module.remove.diacritics(content[field]);
- } else {
- text = content[field].toString();
- }
- if( text.search(matchRegExp) !== -1) {
- // content starts with value (first in results)
- addResult(results, content);
- }
- else if(settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text) ) {
- // content fuzzy matches (last in results)
- addResult(exactResults, content);
- }
- else if(settings.fullTextSearch == true && module.fuzzySearch(searchTerm, text) ) {
- // content fuzzy matches (last in results)
- addResult(fuzzyResults, content);
- }
- }
- });
- });
- $.merge(exactResults, fuzzyResults);
- $.merge(results, exactResults);
- return results;
- }
- },
- exactSearch: function (query, term) {
- query = query.toLowerCase();
- term = term.toLowerCase();
- return term.indexOf(query) > -1;
- },
- fuzzySearch: function(query, term) {
- var
- termLength = term.length,
- queryLength = query.length
- ;
- if(typeof query !== 'string') {
- return false;
- }
- query = query.toLowerCase();
- term = term.toLowerCase();
- if(queryLength > termLength) {
- return false;
- }
- if(queryLength === termLength) {
- return (query === term);
- }
- search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) {
- var
- queryCharacter = query.charCodeAt(characterIndex)
- ;
- while(nextCharacterIndex < termLength) {
- if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) {
- continue search;
- }
- }
- return false;
- }
- return true;
- },
-
- parse: {
- response: function(response, searchTerm) {
- if(Array.isArray(response)){
- var o={};
- o[fields.results]=response;
- response = o;
- }
- var
- searchHTML = module.generateResults(response)
- ;
- module.verbose('Parsing server response', response);
- if(response !== undefined) {
- if(searchTerm !== undefined && response[fields.results] !== undefined) {
- module.addResults(searchHTML);
- module.inject.id(response[fields.results]);
- module.write.cache(searchTerm, {
- html : searchHTML,
- results : response[fields.results]
- });
- module.save.results(response[fields.results]);
- }
- }
- }
- },
-
- cancel: {
- query: function() {
- if( module.can.useAPI() ) {
- $module.api('abort');
- }
- }
- },
-
- has: {
- minimumCharacters: function() {
- var
- searchTerm = module.get.value(),
- numCharacters = searchTerm.length
- ;
- return (numCharacters >= settings.minCharacters);
- },
- results: function() {
- if($results.length === 0) {
- return false;
- }
- var
- html = $results.html()
- ;
- return html != '';
- }
- },
-
- clear: {
- cache: function(value) {
- var
- cache = $module.data(metadata.cache)
- ;
- if(!value) {
- module.debug('Clearing cache', value);
- $module.removeData(metadata.cache);
- }
- else if(value && cache && cache[value]) {
- module.debug('Removing value from cache', value);
- delete cache[value];
- $module.data(metadata.cache, cache);
- }
- }
- },
-
- read: {
- cache: function(name) {
- var
- cache = $module.data(metadata.cache)
- ;
- if(settings.cache) {
- module.verbose('Checking cache for generated html for query', name);
- return (typeof cache == 'object') && (cache[name] !== undefined)
- ? cache[name]
- : false
- ;
- }
- return false;
- }
- },
-
- create: {
- categoryResults: function(results) {
- var
- categoryResults = {}
- ;
- $.each(results, function(index, result) {
- if(!result.category) {
- return;
- }
- if(categoryResults[result.category] === undefined) {
- module.verbose('Creating new category of results', result.category);
- categoryResults[result.category] = {
- name : result.category,
- results : [result]
- };
- }
- else {
- categoryResults[result.category].results.push(result);
- }
- });
- return categoryResults;
- },
- id: function(resultIndex, categoryIndex) {
- var
- resultID = (resultIndex + 1), // not zero indexed
- letterID,
- id
- ;
- if(categoryIndex !== undefined) {
- // start char code for "A"
- letterID = String.fromCharCode(97 + categoryIndex);
- id = letterID + resultID;
- module.verbose('Creating category result id', id);
- }
- else {
- id = resultID;
- module.verbose('Creating result id', id);
- }
- return id;
- },
- results: function() {
- if($results.length === 0) {
- $results = $('<div />')
- .addClass(className.results)
- .appendTo($module)
- ;
- }
- }
- },
-
- inject: {
- result: function(result, resultIndex, categoryIndex) {
- module.verbose('Injecting result into results');
- var
- $selectedResult = (categoryIndex !== undefined)
- ? $results
- .children().eq(categoryIndex)
- .children(selector.results)
- .first()
- .children(selector.result)
- .eq(resultIndex)
- : $results
- .children(selector.result).eq(resultIndex)
- ;
- module.verbose('Injecting results metadata', $selectedResult);
- $selectedResult
- .data(metadata.result, result)
- ;
- },
- id: function(results) {
- module.debug('Injecting unique ids into results');
- var
- // since results may be object, we must use counters
- categoryIndex = 0,
- resultIndex = 0
- ;
- if(settings.type === 'category') {
- // iterate through each category result
- $.each(results, function(index, category) {
- if(category.results.length > 0){
- resultIndex = 0;
- $.each(category.results, function(index, result) {
- if(result.id === undefined) {
- result.id = module.create.id(resultIndex, categoryIndex);
- }
- module.inject.result(result, resultIndex, categoryIndex);
- resultIndex++;
- });
- categoryIndex++;
- }
- });
- }
- else {
- // top level
- $.each(results, function(index, result) {
- if(result.id === undefined) {
- result.id = module.create.id(resultIndex);
- }
- module.inject.result(result, resultIndex);
- resultIndex++;
- });
- }
- return results;
- }
- },
-
- save: {
- results: function(results) {
- module.verbose('Saving current search results to metadata', results);
- $module.data(metadata.results, results);
- }
- },
-
- write: {
- cache: function(name, value) {
- var
- cache = ($module.data(metadata.cache) !== undefined)
- ? $module.data(metadata.cache)
- : {}
- ;
- if(settings.cache) {
- module.verbose('Writing generated html to cache', name, value);
- cache[name] = value;
- $module
- .data(metadata.cache, cache)
- ;
- }
- }
- },
-
- addResults: function(html) {
- if( $.isFunction(settings.onResultsAdd) ) {
- if( settings.onResultsAdd.call($results, html) === false ) {
- module.debug('onResultsAdd callback cancelled default action');
- return false;
- }
- }
- if(html) {
- $results
- .html(html)
- ;
- module.refreshResults();
- if(settings.selectFirstResult) {
- module.select.firstResult();
- }
- module.showResults();
- }
- else {
- module.hideResults(function() {
- $results.empty();
- });
- }
- },
-
- showResults: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(resultsDismissed) {
- return;
- }
- if(!module.is.visible() && module.has.results()) {
- if( module.can.transition() ) {
- module.debug('Showing results with css animations');
- $results
- .transition({
- animation : settings.transition + ' in',
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- onShow : function() {
- var $firstResult = $module.find(selector.result).eq(0);
- if($firstResult.length > 0) {
- module.ensureVisible($firstResult);
- }
- },
- onComplete : function() {
- callback();
- },
- queue : true
- })
- ;
- }
- else {
- module.debug('Showing results with javascript');
- $results
- .stop()
- .fadeIn(settings.duration, settings.easing)
- ;
- }
- settings.onResultsOpen.call($results);
- }
- },
- hideResults: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if( module.is.visible() ) {
- if( module.can.transition() ) {
- module.debug('Hiding results with css animations');
- $results
- .transition({
- animation : settings.transition + ' out',
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.duration,
- onComplete : function() {
- callback();
- },
- queue : true
- })
- ;
- }
- else {
- module.debug('Hiding results with javascript');
- $results
- .stop()
- .fadeOut(settings.duration, settings.easing)
- ;
- }
- settings.onResultsClose.call($results);
- }
- },
-
- generateResults: function(response) {
- module.debug('Generating html from response', response);
- var
- template = settings.templates[settings.type],
- isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])),
- isProperArray = (Array.isArray(response[fields.results]) && response[fields.results].length > 0),
- html = ''
- ;
- if(isProperObject || isProperArray ) {
- if(settings.maxResults > 0) {
- if(isProperObject) {
- if(settings.type == 'standard') {
- module.error(error.maxResults);
- }
- }
- else {
- response[fields.results] = response[fields.results].slice(0, settings.maxResults);
- }
- }
- if($.isFunction(template)) {
- html = template(response, fields, settings.preserveHTML);
- }
- else {
- module.error(error.noTemplate, false);
- }
- }
- else if(settings.showNoResults) {
- html = module.displayMessage(error.noResults, 'empty', error.noResultsHeader);
- }
- settings.onResults.call(element, response);
- return html;
- },
-
- displayMessage: function(text, type, header) {
- type = type || 'standard';
- module.debug('Displaying message', text, type, header);
- module.addResults( settings.templates.message(text, type, header) );
- return settings.templates.message(text, type, header);
- },
-
- 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($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(Array.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.search.settings = {
-
- name : 'Search',
- namespace : 'search',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- // template to use (specified in settings.templates)
- type : 'standard',
-
- // minimum characters required to search
- minCharacters : 1,
-
- // whether to select first result after searching automatically
- selectFirstResult : false,
-
- // API config
- apiSettings : false,
-
- // object to search
- source : false,
-
- // Whether search should query current term on focus
- searchOnFocus : true,
-
- // fields to search
- searchFields : [
- 'id',
- 'title',
- 'description'
- ],
-
- // field to display in standard results template
- displayField : '',
-
- // search anywhere in value (set to 'exact' to require exact matches
- fullTextSearch : 'exact',
-
- // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
- ignoreDiacritics : false,
-
- // whether to add events to prompt automatically
- automatic : true,
-
- // delay before hiding menu after blur
- hideDelay : 0,
-
- // delay before searching
- searchDelay : 200,
-
- // maximum results returned from search
- maxResults : 7,
-
- // whether to store lookups in local cache
- cache : true,
-
- // whether no results errors should be shown
- showNoResults : true,
-
- // preserve possible html of resultset values
- preserveHTML : true,
-
- // transition settings
- transition : 'scale',
- duration : 200,
- easing : 'easeOutExpo',
-
- // callbacks
- onSelect : false,
- onResultsAdd : false,
-
- onSearchQuery : function(query){},
- onResults : function(response){},
-
- onResultsOpen : function(){},
- onResultsClose : function(){},
-
- className: {
- animating : 'animating',
- active : 'active',
- empty : 'empty',
- focus : 'focus',
- hidden : 'hidden',
- loading : 'loading',
- results : 'results',
- pressed : 'down'
- },
-
- error : {
- source : 'Cannot search. No source used, and Semantic API module was not included',
- noResultsHeader : 'No Results',
- noResults : 'Your search returned no results',
- logging : 'Error in debug logging, exiting.',
- noEndpoint : 'No search endpoint was specified',
- noTemplate : 'A valid template name was not specified.',
- oldSearchSyntax : 'searchFullText setting has been renamed fullTextSearch for consistency, please adjust your settings.',
- serverError : 'There was an issue querying the server.',
- maxResults : 'Results must be an array to use maxResults setting',
- method : 'The method you called is not defined.',
- noNormalize : '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including <https://cdn.jsdelivr.net/npm/[email protected]/lib/unorm.min.js> as a polyfill.'
- },
-
- metadata: {
- cache : 'cache',
- results : 'results',
- result : 'result'
- },
-
- regExp: {
- escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
- beginsWith : '(?:\s|^)'
- },
-
- // maps api response attributes to internal representation
- fields: {
- categories : 'results', // array of categories (category view)
- categoryName : 'name', // name of category (category view)
- categoryResults : 'results', // array of results (category view)
- description : 'description', // result description
- image : 'image', // result image
- price : 'price', // result price
- results : 'results', // array of results (standard)
- title : 'title', // result title
- url : 'url', // result url
- action : 'action', // "view more" object name
- actionText : 'text', // "view more" text
- actionURL : 'url' // "view more" url
- },
-
- selector : {
- prompt : '.prompt',
- searchButton : '.search.button',
- results : '.results',
- message : '.results > .message',
- category : '.category',
- result : '.result',
- title : '.title, .name'
- },
-
- templates: {
- escape: function(string, preserveHTML) {
- if (preserveHTML){
- return string;
- }
- var
- badChars = /[<>"'`]/g,
- shouldEscape = /[&<>"'`]/,
- escape = {
- "<": "&lt;",
- ">": "&gt;",
- '"': "&quot;",
- "'": "&#x27;",
- "`": "&#x60;"
- },
- escapedChar = function(chr) {
- return escape[chr];
- }
- ;
- if(shouldEscape.test(string)) {
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
- return string.replace(badChars, escapedChar);
- }
- return string;
- },
- message: function(message, type, header) {
- var
- html = ''
- ;
- if(message !== undefined && type !== undefined) {
- html += ''
- + '<div class="message ' + type + '">'
- ;
- if(header) {
- html += ''
- + '<div class="header">' + header + '</div>'
- ;
- }
- html += ' <div class="description">' + message + '</div>';
- html += '</div>';
- }
- return html;
- },
- category: function(response, fields, preserveHTML) {
- var
- html = '',
- escape = $.fn.search.settings.templates.escape
- ;
- if(response[fields.categoryResults] !== undefined) {
-
- // each category
- $.each(response[fields.categoryResults], function(index, category) {
- if(category[fields.results] !== undefined && category.results.length > 0) {
-
- html += '<div class="category">';
-
- if(category[fields.categoryName] !== undefined) {
- html += '<div class="name">' + escape(category[fields.categoryName], preserveHTML) + '</div>';
- }
-
- // each item inside category
- html += '<div class="results">';
- $.each(category.results, function(index, result) {
- if(result[fields.url]) {
- html += '<a class="result" href="' + result[fields.url].replace(/"/g,"") + '">';
- }
- else {
- html += '<a class="result">';
- }
- if(result[fields.image] !== undefined) {
- html += ''
- + '<div class="image">'
- + ' <img src="' + result[fields.image].replace(/"/g,"") + '">'
- + '</div>'
- ;
- }
- html += '<div class="content">';
- if(result[fields.price] !== undefined) {
- html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
- }
- if(result[fields.title] !== undefined) {
- html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
- }
- if(result[fields.description] !== undefined) {
- html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
- }
- html += ''
- + '</div>'
- ;
- html += '</a>';
- });
- html += '</div>';
- html += ''
- + '</div>'
- ;
- }
- });
- if(response[fields.action]) {
- if(fields.actionURL === false) {
- html += ''
- + '<div class="action">'
- + escape(response[fields.action][fields.actionText], preserveHTML)
- + '</div>';
- } else {
- html += ''
- + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g,"") + '" class="action">'
- + escape(response[fields.action][fields.actionText], preserveHTML)
- + '</a>';
- }
- }
- return html;
- }
- return false;
- },
- standard: function(response, fields, preserveHTML) {
- var
- html = '',
- escape = $.fn.search.settings.templates.escape
- ;
- if(response[fields.results] !== undefined) {
-
- // each result
- $.each(response[fields.results], function(index, result) {
- if(result[fields.url]) {
- html += '<a class="result" href="' + result[fields.url].replace(/"/g,"") + '">';
- }
- else {
- html += '<a class="result">';
- }
- if(result[fields.image] !== undefined) {
- html += ''
- + '<div class="image">'
- + ' <img src="' + result[fields.image].replace(/"/g,"") + '">'
- + '</div>'
- ;
- }
- html += '<div class="content">';
- if(result[fields.price] !== undefined) {
- html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
- }
- if(result[fields.title] !== undefined) {
- html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
- }
- if(result[fields.description] !== undefined) {
- html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
- }
- html += ''
- + '</div>'
- ;
- html += '</a>';
- });
- if(response[fields.action]) {
- if(fields.actionURL === false) {
- html += ''
- + '<div class="action">'
- + escape(response[fields.action][fields.actionText], preserveHTML)
- + '</div>';
- } else {
- html += ''
- + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g,"") + '" class="action">'
- + escape(response[fields.action][fields.actionText], preserveHTML)
- + '</a>';
- }
- }
- return html;
- }
- return false;
- }
- }
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/search.less b/semantic/src/definitions/modules/search.less
deleted file mode 100644
index e099ea8..0000000
--- a/semantic/src/definitions/modules/search.less
+++ /dev/null
@@ -1,560 +0,0 @@
-/*!
- * # Fomantic-UI - Search
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'search';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Search
-*******************************/
-
-.ui.search {
- position: relative;
-}
-
-.ui.search > .prompt {
- margin: 0;
- outline: none;
- -webkit-appearance: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
- text-shadow: none;
- font-style: normal;
- font-weight: @normal;
-
- line-height: @promptLineHeight;
- padding: @promptPadding;
- font-size: @promptFontSize;
-
- background: @promptBackground;
- border: @promptBorder;
- color: @promptColor;
- box-shadow: @promptBoxShadow;
- transition: @promptTransition;
-}
-
-.ui.search .prompt {
- border-radius: @promptBorderRadius;
-}
-
-
-/*--------------
- Icon
----------------*/
-
-.ui.search .prompt ~ .search.icon {
- cursor: pointer;
-}
-
-/*--------------
- Results
----------------*/
-
-.ui.search > .results {
- display: none;
-
- position: absolute;
- top: 100%;
- left: 0;
- transform-origin: center top;
- white-space: normal;
- text-align: left;
- text-transform: none;
-
- background: @resultsBackground;
-
- margin-top: @resultsDistance;
- width: @resultsWidth;
-
- border-radius: @resultsBorderRadius;
- box-shadow: @resultsBoxShadow;
- border: @resultsBorder;
- z-index: @resultsZIndex;
-}
-.ui.search > .results > :first-child {
- border-radius: @resultsBorderRadius @resultsBorderRadius 0 0;
-}
-.ui.search > .results > :last-child {
- border-radius: 0 0 @resultsBorderRadius @resultsBorderRadius;
-}
-
-/*--------------
- Result
----------------*/
-
-.ui.search > .results .result {
- cursor: pointer;
- display: block;
- overflow: hidden;
- font-size: @resultFontSize;
- padding: @resultPadding;
- color: @resultTextColor;
- line-height: @resultLineHeight;
- border-bottom: @resultDivider;
-}
-.ui.search > .results .result:last-child {
- border-bottom: @resultLastDivider !important;
-}
-
-/* Image */
-.ui.search > .results .result .image {
- float: @resultImageFloat;
- overflow: hidden;
- background: @resultImageBackground;
- width: @resultImageWidth;
- height: @resultImageHeight;
- border-radius: @resultImageBorderRadius;
-}
-.ui.search > .results .result .image img {
- display: block;
- width: auto;
- height: 100%;
-}
-
-/*--------------
- Info
----------------*/
-
-.ui.search > .results .result .image + .content {
- margin: @resultImageMargin;
-}
-
-.ui.search > .results .result .title {
- margin: @resultTitleMargin;
- font-family: @resultTitleFont;
- font-weight: @resultTitleFontWeight;
- font-size: @resultTitleFontSize;
- color: @resultTitleColor;
-}
-.ui.search > .results .result .description {
- margin-top: @resultDescriptionDistance;
- font-size: @resultDescriptionFontSize;
- color: @resultDescriptionColor;
-}
-.ui.search > .results .result .price {
- float: @resultPriceFloat;
- color: @resultPriceColor;
-}
-
-/*--------------
- Message
----------------*/
-
-.ui.search > .results > .message {
- padding: @messageVerticalPadding @messageHorizontalPadding;
-}
-.ui.search > .results > .message .header {
- font-family: @headerFont;
- font-size: @messageHeaderFontSize;
- font-weight: @messageHeaderFontWeight;
- color: @messageHeaderColor;
-}
-.ui.search > .results > .message .description {
- margin-top: @messageDescriptionDistance;
- font-size: @messageDescriptionFontSize;
- color: @messageDescriptionColor;
-}
-
-/* View All Results */
-.ui.search > .results > .action {
- display: block;
- border-top: @actionBorder;
- background: @actionBackground;
- padding: @actionPadding;
- color: @actionColor;
- font-weight: @actionFontWeight;
- text-align: @actionAlign;
-}
-
-
-/*******************************
- States
-*******************************/
-
-/*--------------------
- Focus
----------------------*/
-
-.ui.search > .prompt:focus {
- border-color: @promptFocusBorderColor;
- background: @promptFocusBackground;
- color: @promptFocusColor;
-}
-
-& when (@variationSearchLoading) {
- /*--------------------
- Loading
- ---------------------*/
-
- .ui.loading.search .input > i.icon:before {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @loaderFillColor;
- }
- .ui.loading.search .input > i.icon:after {
- position: absolute;
- content: '';
- top: 50%;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid @loaderLineColor;
- border-radius: @circularRadius;
-
- box-shadow: 0 0 0 1px transparent;
- }
-}
-
-
-/*--------------
- Hover
----------------*/
-
-.ui.search > .results .result:hover,
-.ui.category.search > .results .category .result:hover {
- background: @resultHoverBackground;
-}
-.ui.search .action:hover:not(div) {
- background: @actionHoverBackground;
-}
-
-/*--------------
- Active
----------------*/
-& when (@variationSearchCategory) {
- .ui.category.search > .results .category.active {
- background: @categoryActiveBackground;
- }
- .ui.category.search > .results .category.active > .name {
- color: @categoryNameActiveColor;
- }
-}
-
-.ui.search > .results .result.active,
-.ui.category.search > .results .category .result.active {
- position: relative;
- border-left-color: @resultActiveBorderLeft;
- background: @resultActiveBackground;
- box-shadow: @resultActiveBoxShadow;
-}
-.ui.search > .results .result.active .title {
- color: @resultActiveTitleColor;
-}
-.ui.search > .results .result.active .description {
- color: @resultActiveDescriptionColor;
-}
-
-& when (@variationSearchDisabled) {
- /*--------------------
- Disabled
- ----------------------*/
-
- /* Disabled */
- .ui.disabled.search {
- cursor: default;
- pointer-events: none;
- opacity: @disabledOpacity;
- }
-}
-
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationSearchSelection) {
- /*--------------
- Selection
- ---------------*/
-
- .ui.search.selection .prompt {
- border-radius: @selectionPromptBorderRadius;
- }
-
- /* Remove input */
- .ui.search.selection > .icon.input > .remove.icon {
- pointer-events: none;
- position: absolute;
- left: auto;
- opacity: 0;
- color: @selectionCloseIconColor;
- top: @selectionCloseTop;
- right: @selectionCloseRight;
- transition: @selectionCloseTransition;
- }
- .ui.search.selection > .icon.input > .active.remove.icon {
- cursor: pointer;
- opacity: @selectionCloseIconOpacity;
- pointer-events: auto;
- }
- .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
- right: @selectionCloseIconInputRight;
- }
- .ui.search.selection > .icon.input > .remove.icon:hover {
- opacity: @selectionCloseIconHoverOpacity;
- color: @selectionCloseIconHoverColor;
- }
-}
-
-& when (@variationSearchCategory) {
- /*--------------
- Category
- ---------------*/
-
- .ui.category.search .results {
- width: @categoryResultsWidth;
- }
-
- .ui.category.search .results.animating,
- .ui.category.search .results.visible {
- display: table;
- }
-
- /* Category */
- .ui.category.search > .results .category {
- display: table-row;
- background: @categoryBackground;
- box-shadow: @categoryBoxShadow;
- transition: @categoryTransition;
- }
-
- /* Last Category */
- .ui.category.search > .results .category:last-child {
- border-bottom: none;
- }
-
- /* First / Last */
- .ui.category.search > .results .category:first-child .name + .result {
- border-radius: 0 @resultsBorderRadius 0 0;
- }
- .ui.category.search > .results .category:last-child .result:last-child {
- border-radius: 0 0 @resultsBorderRadius 0;
- }
-
- /* Category Result Name */
- .ui.category.search > .results .category > .name {
- display: table-cell;
- text-overflow: ellipsis;
- width: @categoryNameWidth;
- white-space: @categoryNameWhitespace;
- background: @categoryNameBackground;
- font-family: @categoryNameFont;
- font-size: @categoryNameFontSize;
- padding: @categoryNamePadding;
- font-weight: @categoryNameFontWeight;
- color: @categoryNameColor;
- border-bottom: @categoryDivider;
- }
-
- /* Category Result */
- .ui.category.search > .results .category .results {
- display: table-cell;
- background: @categoryResultBackground;
- border-left: @categoryResultLeftBorder;
- border-bottom: @categoryDivider;
- }
- .ui.category.search > .results .category .result {
- border-bottom: @categoryResultDivider;
- transition: @categoryResultTransition;
- padding: @categoryResultPadding;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationSearchScrolling),
- (@variationSearchShort),
- (@variationSearchLong) {
-
- /*-------------------
- Scrolling
- --------------------*/
-
- .ui.scrolling.search > .results,
- .ui.search.long > .results,
- .ui.search.short > .results {
- overflow-x: hidden;
- overflow-y: auto;
- backface-visibility: hidden;
- -webkit-overflow-scrolling: touch;
- }
-}
-
-
-& when (@variationSearchScrolling) {
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.scrolling.search > .results {
- max-height: @scrollingMobileMaxResultsHeight;
- }
- }
- @media only screen and (min-width: @tabletBreakpoint) {
- .ui.scrolling.search > .results {
- max-height: @scrollingTabletMaxResultsHeight;
- }
- }
- @media only screen and (min-width: @computerBreakpoint) {
- .ui.scrolling.search > .results {
- max-height: @scrollingComputerMaxResultsHeight;
- }
- }
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
- .ui.scrolling.search > .results {
- max-height: @scrollingWidescreenMaxResultsHeight;
- }
- }
-}
-
-@media only screen and (max-width : @largestMobileScreen) {
- & when (@variationSearchShort) {
- .ui.search.short > .results {
- max-height: @scrollingMobileMaxResultsHeight;
- }
- .ui.search[class*="very short"] > .results {
- max-height: @scrollingMobileMaxResultsHeight * 0.75;
- }
- }
- & when (@variationSearchLong) {
- .ui.search.long > .results {
- max-height: @scrollingMobileMaxResultsHeight * 2;
- }
- .ui.search[class*="very long"] > .results {
- max-height: @scrollingMobileMaxResultsHeight * 3;
- }
- }
-}
-@media only screen and (min-width: @tabletBreakpoint) {
- & when (@variationSearchShort) {
- .ui.search.short > .results {
- max-height: @scrollingTabletMaxResultsHeight;
- }
- .ui.search[class*="very short"] > .results {
- max-height: @scrollingTabletMaxResultsHeight * 0.75;
- }
- }
- & when (@variationSearchLong) {
- .ui.search.long > .results {
- max-height: @scrollingTabletMaxResultsHeight * 2;
- }
- .ui.search[class*="very long"] > .results {
- max-height: @scrollingTabletMaxResultsHeight * 3;
- }
- }
-}
-@media only screen and (min-width: @computerBreakpoint) {
- & when (@variationSearchShort) {
- .ui.search.short > .results {
- max-height: @scrollingComputerMaxResultsHeight;
- }
- .ui.search[class*="very short"] > .results {
- max-height: @scrollingComputerMaxResultsHeight * 0.75;
- }
- }
- & when (@variationSearchLong) {
- .ui.search.long > .results {
- max-height: @scrollingComputerMaxResultsHeight * 2;
- }
- .ui.search[class*="very long"] > .results {
- max-height: @scrollingComputerMaxResultsHeight * 3;
- }
- }
-}
-@media only screen and (min-width: @widescreenMonitorBreakpoint) {
- & when (@variationSearchShort) {
- .ui.search.short > .results {
- max-height: @scrollingWidescreenMaxResultsHeight;
- }
- .ui.search[class*="very short"] > .results {
- max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
- }
- }
- & when (@variationSearchLong) {
- .ui.search.long > .results {
- max-height: @scrollingWidescreenMaxResultsHeight * 2;
- }
- .ui.search[class*="very long"] > .results {
- max-height: @scrollingWidescreenMaxResultsHeight * 3;
- }
- }
-}
-
-& when (@variationSearchAligned) {
- /*-------------------
- Left / Right
- --------------------*/
-
- .ui[class*="left aligned"].search > .results {
- right: auto;
- left: 0;
- }
- .ui[class*="right aligned"].search > .results {
- right: 0;
- left: auto;
- }
-}
-
-/*--------------
- Fluid
----------------*/
-
-& when (@variationSearchFluid) {
- .ui.fluid.search .results {
- width: 100%;
- }
-}
-
-
-/*--------------
- Sizes
----------------*/
-
-.ui.search {
- font-size: @relativeMedium;
-}
-& when not (@variationFeedSizes = false) {
- each(@variationFeedSizes, {
- @s: @{value}SearchSize;
- .ui.@{value}.search {
- font-size: @@s;
- }
- })
-}
-
-/*--------------
- Mobile
----------------*/
-
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.search .results {
- max-width: @mobileMaxWidth;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/shape.js b/semantic/src/definitions/modules/shape.js
deleted file mode 100644
index 1c1229a..0000000
--- a/semantic/src/definitions/modules/shape.js
+++ /dev/null
@@ -1,848 +0,0 @@
-/*!
- * # Fomantic-UI - Shape
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.shape = function(parameters) {
- var
- $allModules = $(this),
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
- returnedValue
- ;
-
- $allModules
- .each(function() {
- var
- moduleSelector = $allModules.selector || '',
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.shape.settings, parameters)
- : $.extend({}, $.fn.shape.settings),
-
- // internal aliases
- namespace = settings.namespace,
- selector = settings.selector,
- error = settings.error,
- className = settings.className,
-
- // define namespaces for modules
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- // selector cache
- $module = $(this),
- $sides = $module.find('>' + selector.sides),
- $side = $sides.find('>' + selector.side),
-
- // private variables
- nextIndex = false,
- $activeSide,
- $nextSide,
-
- // standard module
- element = this,
- instance = $module.data(moduleNamespace),
- module
- ;
-
- module = {
-
- initialize: function() {
- module.verbose('Initializing module for', element);
- module.set.defaultSide();
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module for', element);
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing selector cache for', element);
- $module = $(element);
- $sides = $(this).find(selector.sides);
- $side = $(this).find(selector.side);
- },
-
- repaint: function() {
- module.verbose('Forcing repaint event');
- var
- shape = $sides[0] || document.createElement('div'),
- fakeAssignment = shape.offsetWidth
- ;
- },
-
- animate: function(propertyObject, callback) {
- module.verbose('Animating box with properties', propertyObject);
- callback = callback || function(event) {
- module.verbose('Executing animation callback');
- if(event !== undefined) {
- event.stopPropagation();
- }
- module.reset();
- module.set.active();
- };
- settings.beforeChange.call($nextSide[0]);
- if(module.get.transitionEvent()) {
- module.verbose('Starting CSS animation');
- $module
- .addClass(className.animating)
- ;
- $sides
- .css(propertyObject)
- .one(module.get.transitionEvent(), callback)
- ;
- module.set.duration(settings.duration);
- requestAnimationFrame(function() {
- $module
- .addClass(className.animating)
- ;
- $activeSide
- .addClass(className.hidden)
- ;
- });
- }
- else {
- callback();
- }
- },
-
- queue: function(method) {
- module.debug('Queueing animation of', method);
- $sides
- .one(module.get.transitionEvent(), function() {
- module.debug('Executing queued animation');
- setTimeout(function(){
- $module.shape(method);
- }, 0);
- })
- ;
- },
-
- reset: function() {
- module.verbose('Animating states reset');
- $module
- .removeClass(className.animating)
- .attr('style', '')
- .removeAttr('style')
- ;
- // removeAttr style does not consistently work in safari
- $sides
- .attr('style', '')
- .removeAttr('style')
- ;
- $side
- .attr('style', '')
- .removeAttr('style')
- .removeClass(className.hidden)
- ;
- $nextSide
- .removeClass(className.animating)
- .attr('style', '')
- .removeAttr('style')
- ;
- },
-
- is: {
- complete: function() {
- return ($side.filter('.' + className.active)[0] == $nextSide[0]);
- },
- animating: function() {
- return $module.hasClass(className.animating);
- },
- hidden: function() {
- return $module.closest(':hidden').length > 0;
- }
- },
-
- set: {
-
- defaultSide: function() {
- $activeSide = $side.filter('.' + settings.className.active);
- $nextSide = ( $activeSide.next(selector.side).length > 0 )
- ? $activeSide.next(selector.side)
- : $side.first()
- ;
- nextIndex = false;
- module.verbose('Active side set to', $activeSide);
- module.verbose('Next side set to', $nextSide);
- },
-
- duration: function(duration) {
- duration = duration || settings.duration;
- duration = (typeof duration == 'number')
- ? duration + 'ms'
- : duration
- ;
- module.verbose('Setting animation duration', duration);
- if(settings.duration || settings.duration === 0) {
- $sides.add($side)
- .css({
- '-webkit-transition-duration': duration,
- '-moz-transition-duration': duration,
- '-ms-transition-duration': duration,
- '-o-transition-duration': duration,
- 'transition-duration': duration
- })
- ;
- }
- },
-
- currentStageSize: function() {
- var
- $activeSide = $side.filter('.' + settings.className.active),
- width = $activeSide.outerWidth(true),
- height = $activeSide.outerHeight(true)
- ;
- $module
- .css({
- width: width,
- height: height
- })
- ;
- },
-
- stageSize: function() {
- var
- $clone = $module.clone().addClass(className.loading),
- $side = $clone.find('>' + selector.sides + '>' + selector.side),
- $activeSide = $side.filter('.' + settings.className.active),
- $nextSide = (nextIndex)
- ? $side.eq(nextIndex)
- : ( $activeSide.next(selector.side).length > 0 )
- ? $activeSide.next(selector.side)
- : $side.first(),
- newWidth = (settings.width === 'next')
- ? $nextSide.outerWidth(true)
- : (settings.width === 'initial')
- ? $module.width()
- : settings.width,
- newHeight = (settings.height === 'next')
- ? $nextSide.outerHeight(true)
- : (settings.height === 'initial')
- ? $module.height()
- : settings.height
- ;
- $activeSide.removeClass(className.active);
- $nextSide.addClass(className.active);
- $clone.insertAfter($module);
- $clone.remove();
- if(settings.width !== 'auto') {
- $module.css('width', newWidth + settings.jitter);
- module.verbose('Specifying width during animation', newWidth);
- }
- if(settings.height !== 'auto') {
- $module.css('height', newHeight + settings.jitter);
- module.verbose('Specifying height during animation', newHeight);
- }
- },
-
- nextSide: function(selector) {
- nextIndex = selector;
- $nextSide = $side.filter(selector);
- nextIndex = $side.index($nextSide);
- if($nextSide.length === 0) {
- module.set.defaultSide();
- module.error(error.side);
- }
- module.verbose('Next side manually set to', $nextSide);
- },
-
- active: function() {
- module.verbose('Setting new side to active', $nextSide);
- $side
- .removeClass(className.active)
- ;
- $nextSide
- .addClass(className.active)
- ;
- settings.onChange.call($nextSide[0]);
- module.set.defaultSide();
- }
- },
-
- flip: {
- to: function(type,stage){
- if(module.is.hidden()) {
- module.debug('Module not visible', $nextSide);
- return;
- }
- if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
- module.debug('Side already visible', $nextSide);
- return;
- }
- var
- transform = module.get.transform[type]()
- ;
- if( !module.is.animating()) {
- module.debug('Flipping '+type, $nextSide);
- module.set.stageSize();
- module.stage[stage]();
- module.animate(transform);
- }
- else {
- module.queue('flip '+type);
- }
- },
-
- up: function() {
- module.flip.to('up','above');
- },
-
- down: function() {
- module.flip.to('down','below');
- },
-
- left: function() {
- module.flip.to('left','left');
- },
-
- right: function() {
- module.flip.to('right','right');
- },
-
- over: function() {
- module.flip.to('over','behind');
- },
-
- back: function() {
- module.flip.to('back','behind');
- }
-
- },
-
- get: {
-
- transform: {
- up: function() {
- var
- translateZ = $activeSide.outerHeight(true) / 2,
- translateY = $nextSide.outerHeight(true) - translateZ
- ;
- return {
- transform: 'translateY(' + translateY + 'px) translateZ(-'+ translateZ + 'px) rotateX(-90deg)'
- };
- },
-
- down: function() {
- var
- translate = {
- z: $activeSide.outerHeight(true) / 2
- }
- ;
- return {
- transform: 'translateY(-' + translate.z + 'px) translateZ(-'+ translate.z + 'px) rotateX(90deg)'
- };
- },
-
- left: function() {
- var
- translateZ = $activeSide.outerWidth(true) / 2,
- translateX = $nextSide.outerWidth(true) - translateZ
- ;
- return {
- transform: 'translateX(' + translateX + 'px) translateZ(-' + translateZ + 'px) rotateY(90deg)'
- };
- },
-
- right: function() {
- var
- translate = {
- z : $activeSide.outerWidth(true) / 2
- }
- ;
- return {
- transform: 'translateX(-' + translate.z + 'px) translateZ(-' + translate.z + 'px) rotateY(-90deg)'
- };
- },
-
- over: function() {
- var
- translate = {
- x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
- }
- ;
- return {
- transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
- };
- },
-
- back: function() {
- var
- translate = {
- x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
- }
- ;
- return {
- transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
- };
- }
- },
-
- transitionEvent: function() {
- var
- element = document.createElement('element'),
- transitions = {
- 'transition' :'transitionend',
- 'OTransition' :'oTransitionEnd',
- 'MozTransition' :'transitionend',
- 'WebkitTransition' :'webkitTransitionEnd'
- },
- transition
- ;
- for(transition in transitions){
- if( element.style[transition] !== undefined ){
- return transitions[transition];
- }
- }
- },
-
- nextSide: function() {
- return ( $activeSide.next(selector.side).length > 0 )
- ? $activeSide.next(selector.side)
- : $side.first()
- ;
- }
-
- },
-
- stage: {
-
- above: function() {
- var
- box = {
- origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
- depth : {
- active : ($nextSide.outerHeight(true) / 2),
- next : ($activeSide.outerHeight(true) / 2)
- }
- }
- ;
- module.verbose('Setting the initial animation position as above', $nextSide, box);
- $activeSide
- .css({
- 'transform' : 'rotateX(0deg)'
- })
- ;
- $nextSide
- .addClass(className.animating)
- .css({
- 'top' : box.origin + 'px',
- 'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px) translateY(-' + box.depth.active + 'px)'
- })
- ;
- },
-
- below: function() {
- var
- box = {
- origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
- depth : {
- active : ($nextSide.outerHeight(true) / 2),
- next : ($activeSide.outerHeight(true) / 2)
- }
- }
- ;
- module.verbose('Setting the initial animation position as below', $nextSide, box);
- $activeSide
- .css({
- 'transform' : 'rotateX(0deg)'
- })
- ;
- $nextSide
- .addClass(className.animating)
- .css({
- 'top' : box.origin + 'px',
- 'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px) translateY(' + box.depth.active + 'px)'
- })
- ;
- },
-
- left: function() {
- var
- height = {
- active : $activeSide.outerWidth(true),
- next : $nextSide.outerWidth(true)
- },
- box = {
- origin : ( ( height.active - height.next ) / 2),
- depth : {
- active : (height.next / 2),
- next : (height.active / 2)
- }
- }
- ;
- module.verbose('Setting the initial animation position as left', $nextSide, box);
- $activeSide
- .css({
- 'transform' : 'rotateY(0deg)'
- })
- ;
- $nextSide
- .addClass(className.animating)
- .css({
- 'left' : box.origin + 'px',
- 'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px) translateX(-' + box.depth.active + 'px)'
- })
- ;
- },
-
- right: function() {
- var
- height = {
- active : $activeSide.outerWidth(true),
- next : $nextSide.outerWidth(true)
- },
- box = {
- origin : ( ( height.active - height.next ) / 2),
- depth : {
- active : (height.next / 2),
- next : (height.active / 2)
- }
- }
- ;
- module.verbose('Setting the initial animation position as right', $nextSide, box);
- $activeSide
- .css({
- 'transform' : 'rotateY(0deg)'
- })
- ;
- $nextSide
- .addClass(className.animating)
- .css({
- 'left' : box.origin + 'px',
- 'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px) translateX(' + box.depth.active + 'px)'
- })
- ;
- },
-
- behind: function() {
- var
- height = {
- active : $activeSide.outerWidth(true),
- next : $nextSide.outerWidth(true)
- },
- box = {
- origin : ( ( height.active - height.next ) / 2),
- depth : {
- active : (height.next / 2),
- next : (height.active / 2)
- }
- }
- ;
- module.verbose('Setting the initial animation position as behind', $nextSide, box);
- $activeSide
- .css({
- 'transform' : 'rotateY(0deg)'
- })
- ;
- $nextSide
- .addClass(className.animating)
- .css({
- 'left' : box.origin + 'px',
- 'transform' : 'rotateY(-180deg)'
- })
- ;
- }
- },
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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($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(Array.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();
- }
- var $inputs = $module.find('input');
- if( $inputs.length > 0) {
- $inputs.blur();
- setTimeout(function(){
- module.invoke(query);
- }, 150);
- } else {
- module.invoke(query);
- }
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.initialize();
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.shape.settings = {
-
- // module info
- name : 'Shape',
-
- // hide all debug content
- silent : false,
-
- // debug content outputted to console
- debug : false,
-
- // verbose debug output
- verbose : false,
-
- // fudge factor in pixels when swapping from 2d to 3d (can be useful to correct rounding errors)
- jitter : 0,
-
- // performance data output
- performance: true,
-
- // event namespace
- namespace : 'shape',
-
- // width during animation, can be set to 'auto', initial', 'next' or pixel amount
- width: 'initial',
-
- // height during animation, can be set to 'auto', 'initial', 'next' or pixel amount
- height: 'initial',
-
- // callback occurs on side change
- beforeChange : function() {},
- onChange : function() {},
-
- // allow animation to same side
- allowRepeats: false,
-
- // animation duration
- duration : false,
-
- // possible errors
- error: {
- side : 'You tried to switch to a side that does not exist.',
- method : 'The method you called is not defined'
- },
-
- // classnames used
- className : {
- animating : 'animating',
- hidden : 'hidden',
- loading : 'loading',
- active : 'active'
- },
-
- // selectors used
- selector : {
- sides : '.sides',
- side : '.side'
- }
-
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/shape.less b/semantic/src/definitions/modules/shape.less
deleted file mode 100644
index 4d0b8ab..0000000
--- a/semantic/src/definitions/modules/shape.less
+++ /dev/null
@@ -1,155 +0,0 @@
-/*!
- * # Fomantic-UI - Shape
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'shape';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Shape
-*******************************/
-
-.ui.shape {
- position: relative;
- vertical-align: top;
- display: @display;
- perspective: @perspective;
- transition: @transition;
-}
-
-.ui.shape .side,
-.ui.shape .sides {
- transform-style: preserve-3d;
-}
-
-.ui.shape .side {
- display: none;
- opacity: 1;
- width: 100%;
-
- margin: @sideMargin !important;
- backface-visibility: @backfaceVisibility;
-}
-
-.ui.shape .side * {
- backface-visibility: visible !important;
-}
-
-/*******************************
- Types
-*******************************/
-
-& when (@variationShapeCube) {
- .ui.cube.shape .side {
- min-width: @cubeSize;
- height: @cubeSize;
-
- padding: @cubePadding;
-
- background-color: @cubeBackground;
- color: @cubeTextColor;
- box-shadow: @cubeBoxShadow;
- }
- .ui.cube.shape .side > .content {
- width: 100%;
- height: 100%;
- display: table;
-
- text-align: @cubeTextAlign;
- user-select: text;
- }
- .ui.cube.shape .side > .content > div {
- display: table-cell;
- vertical-align: middle;
- font-size: @cubeFontSize;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-& when (@variationShapeText) {
- .ui.text.shape.animating .sides {
- position: static;
- }
- .ui.text.shape .side {
- white-space: nowrap;
- }
- .ui.text.shape .side > * {
- white-space: normal;
- }
-}
-
-
-/*******************************
- States
-*******************************/
-
-& when (@variationShapeLoading) {
- /*--------------
- Loading
- ---------------*/
-
- .ui.loading.shape {
- position: absolute;
- top: -9999px;
- left: -9999px;
- }
-}
-
-
-/*--------------
- Animating
----------------*/
-
-.ui.shape .animating.side {
- position: absolute;
- top: 0;
- left: 0;
- display: block;
- z-index: @animatingZIndex;
-}
-.ui.shape .hidden.side {
- opacity: @hiddenSideOpacity;
-}
-
-
-/*--------------
- CSS
----------------*/
-
-.ui.shape.animating .sides {
- position: absolute;
- transition: @transition;
-}
-.ui.shape.animating .side {
- transition: @sideTransition;
-}
-.ui.shape .animating.side *,
-.ui.shape.animating .side * {
- transition: none;
-}
-
-/*--------------
- Active
----------------*/
-
-.ui.shape .active.side {
- display: block;
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/sidebar.js b/semantic/src/definitions/modules/sidebar.js
deleted file mode 100644
index ed7105c..0000000
--- a/semantic/src/definitions/modules/sidebar.js
+++ /dev/null
@@ -1,1036 +0,0 @@
-/*!
- * # Fomantic-UI - Sidebar
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.sidebar = function(parameters) {
- var
- $allModules = $(this),
- $window = $(window),
- $document = $(document),
- $html = $('html'),
- $head = $('head'),
-
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
- returnedValue
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.sidebar.settings, parameters)
- : $.extend({}, $.fn.sidebar.settings),
-
- selector = settings.selector,
- className = settings.className,
- namespace = settings.namespace,
- regExp = settings.regExp,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $context = $(settings.context),
-
- $sidebars = $module.children(selector.sidebar),
- $fixed = $context.children(selector.fixed),
- $pusher = $context.children(selector.pusher),
- $style,
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- elementNamespace,
- id,
- currentScroll,
- transitionEvent,
-
- module
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing sidebar', parameters);
-
- module.create.id();
-
- transitionEvent = module.get.transitionEvent();
-
- // avoids locking rendering if initialized in onReady
- if(settings.delaySetup) {
- requestAnimationFrame(module.setup.layout);
- }
- else {
- module.setup.layout();
- }
-
- requestAnimationFrame(function() {
- module.setup.cache();
- });
-
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- create: {
- id: function() {
- id = (Math.random().toString(16) + '000000000').substr(2,8);
- elementNamespace = '.' + id;
- module.verbose('Creating unique id for element', id);
- }
- },
-
- destroy: function() {
- module.verbose('Destroying previous module for', $module);
- $module
- .off(eventNamespace)
- .removeData(moduleNamespace)
- ;
- if(module.is.ios()) {
- module.remove.ios();
- }
- // bound by uuid
- $context.off(elementNamespace);
- $window.off(elementNamespace);
- $document.off(elementNamespace);
- },
-
- event: {
- clickaway: function(event) {
- if(settings.closable){
- var
- clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)),
- clickedContext = ($context.is(event.target))
- ;
- if(clickedInPusher) {
- module.verbose('User clicked on dimmed page');
- module.hide();
- }
- if(clickedContext) {
- module.verbose('User clicked on dimmable context (scaled out page)');
- module.hide();
- }
- }
- },
- touch: function(event) {
- //event.stopPropagation();
- },
- containScroll: function(event) {
- if(element.scrollTop <= 0) {
- element.scrollTop = 1;
- }
- if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) {
- element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
- }
- },
- scroll: function(event) {
- if( $(event.target).closest(selector.sidebar).length === 0 ) {
- event.preventDefault();
- }
- }
- },
-
- bind: {
- clickaway: function() {
- module.verbose('Adding clickaway events to context', $context);
- $context
- .on('click' + elementNamespace, module.event.clickaway)
- .on('touchend' + elementNamespace, module.event.clickaway)
- ;
- },
- scrollLock: function() {
- if(settings.scrollLock) {
- module.debug('Disabling page scroll');
- $window
- .on('DOMMouseScroll' + elementNamespace, module.event.scroll)
- ;
- }
- module.verbose('Adding events to contain sidebar scroll');
- $document
- .on('touchmove' + elementNamespace, module.event.touch)
- ;
- $module
- .on('scroll' + eventNamespace, module.event.containScroll)
- ;
- }
- },
- unbind: {
- clickaway: function() {
- module.verbose('Removing clickaway events from context', $context);
- $context.off(elementNamespace);
- },
- scrollLock: function() {
- module.verbose('Removing scroll lock from page');
- $document.off(elementNamespace);
- $window.off(elementNamespace);
- $module.off('scroll' + eventNamespace);
- }
- },
-
- add: {
- inlineCSS: function() {
- var
- width = module.cache.width || $module.outerWidth(),
- height = module.cache.height || $module.outerHeight(),
- isRTL = module.is.rtl(),
- direction = module.get.direction(),
- distance = {
- left : width,
- right : -width,
- top : height,
- bottom : -height
- },
- style
- ;
-
- if(isRTL){
- module.verbose('RTL detected, flipping widths');
- distance.left = -width;
- distance.right = width;
- }
-
- style = '<style>';
-
- if(direction === 'left' || direction === 'right') {
- module.debug('Adding CSS rules for animation distance', width);
- style += ''
- + ' .ui.visible.' + direction + '.sidebar ~ .fixed,'
- + ' .ui.visible.' + direction + '.sidebar ~ .pusher {'
- + ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
- + ' transform: translate3d('+ distance[direction] + 'px, 0, 0);'
- + ' }'
- ;
- }
- else if(direction === 'top' || direction == 'bottom') {
- style += ''
- + ' .ui.visible.' + direction + '.sidebar ~ .fixed,'
- + ' .ui.visible.' + direction + '.sidebar ~ .pusher {'
- + ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
- + ' transform: translate3d(0, ' + distance[direction] + 'px, 0);'
- + ' }'
- ;
- }
-
- /* IE is only browser not to create context with transforms */
- /* https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 */
- if( module.is.ie() ) {
- if(direction === 'left' || direction === 'right') {
- module.debug('Adding CSS rules for animation distance', width);
- style += ''
- + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
- + ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
- + ' transform: translate3d('+ distance[direction] + 'px, 0, 0);'
- + ' }'
- ;
- }
- else if(direction === 'top' || direction == 'bottom') {
- style += ''
- + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
- + ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
- + ' transform: translate3d(0, ' + distance[direction] + 'px, 0);'
- + ' }'
- ;
- }
- /* opposite sides visible forces content overlay */
- style += ''
- + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
- + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
- + ' -webkit-transform: translate3d(0, 0, 0);'
- + ' transform: translate3d(0, 0, 0);'
- + ' }'
- ;
- }
- style += '</style>';
- $style = $(style)
- .appendTo($head)
- ;
- module.debug('Adding sizing css to head', $style);
- }
- },
-
- refresh: function() {
- module.verbose('Refreshing selector cache');
- $context = $(settings.context);
- $sidebars = $context.children(selector.sidebar);
- $pusher = $context.children(selector.pusher);
- $fixed = $context.children(selector.fixed);
- module.clear.cache();
- },
-
- refreshSidebars: function() {
- module.verbose('Refreshing other sidebars');
- $sidebars = $context.children(selector.sidebar);
- },
-
- repaint: function() {
- module.verbose('Forcing repaint event');
- element.style.display = 'none';
- var ignored = element.offsetHeight;
- element.scrollTop = element.scrollTop;
- element.style.display = '';
- },
-
- setup: {
- cache: function() {
- module.cache = {
- width : $module.outerWidth(),
- height : $module.outerHeight()
- };
- },
- layout: function() {
- if( $context.children(selector.pusher).length === 0 ) {
- module.debug('Adding wrapper element for sidebar');
- module.error(error.pusher);
- $pusher = $('<div class="pusher" />');
- $context
- .children()
- .not(selector.omitted)
- .not($sidebars)
- .wrapAll($pusher)
- ;
- module.refresh();
- }
- if($module.nextAll(selector.pusher).length === 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) {
- module.debug('Moved sidebar to correct parent element');
- module.error(error.movedSidebar, element);
- $module.detach().prependTo($context);
- module.refresh();
- }
- module.clear.cache();
- module.set.pushable();
- module.set.direction();
- }
- },
-
- attachEvents: function(selector, event) {
- var
- $toggle = $(selector)
- ;
- event = $.isFunction(module[event])
- ? module[event]
- : module.toggle
- ;
- if($toggle.length > 0) {
- module.debug('Attaching sidebar events to element', selector, event);
- $toggle
- .on('click' + eventNamespace, event)
- ;
- }
- else {
- module.error(error.notFound, selector);
- }
- },
-
- show: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(module.is.hidden()) {
- module.refreshSidebars();
- if(settings.overlay) {
- module.error(error.overlay);
- settings.transition = 'overlay';
- }
- module.refresh();
- if(module.othersActive()) {
- module.debug('Other sidebars currently visible');
- if(settings.exclusive) {
- // if not overlay queue animation after hide
- if(settings.transition != 'overlay') {
- module.hideOthers(module.show);
- return;
- }
- else {
- module.hideOthers();
- }
- }
- else {
- settings.transition = 'overlay';
- }
- }
- module.pushPage(function() {
- callback.call(element);
- settings.onShow.call(element);
- });
- settings.onChange.call(element);
- settings.onVisible.call(element);
- }
- else {
- module.debug('Sidebar is already visible');
- }
- },
-
- hide: function(callback) {
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(module.is.visible() || module.is.animating()) {
- module.debug('Hiding sidebar', callback);
- module.refreshSidebars();
- module.pullPage(function() {
- callback.call(element);
- settings.onHidden.call(element);
- });
- settings.onChange.call(element);
- settings.onHide.call(element);
- }
- },
-
- othersAnimating: function() {
- return ($sidebars.not($module).filter('.' + className.animating).length > 0);
- },
- othersVisible: function() {
- return ($sidebars.not($module).filter('.' + className.visible).length > 0);
- },
- othersActive: function() {
- return(module.othersVisible() || module.othersAnimating());
- },
-
- hideOthers: function(callback) {
- var
- $otherSidebars = $sidebars.not($module).filter('.' + className.visible),
- sidebarCount = $otherSidebars.length,
- callbackCount = 0
- ;
- callback = callback || function(){};
- $otherSidebars
- .sidebar('hide', function() {
- callbackCount++;
- if(callbackCount == sidebarCount) {
- callback();
- }
- })
- ;
- },
-
- toggle: function() {
- module.verbose('Determining toggled direction');
- if(module.is.hidden()) {
- module.show();
- }
- else {
- module.hide();
- }
- },
-
- pushPage: function(callback) {
- var
- transition = module.get.transition(),
- $transition = (transition === 'overlay' || module.othersActive())
- ? $module
- : $pusher,
- animate,
- dim,
- transitionEnd
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- if(settings.transition == 'scale down') {
- module.scrollToTop();
- }
- module.set.transition(transition);
- module.repaint();
- animate = function() {
- module.bind.clickaway();
- module.add.inlineCSS();
- module.set.animating();
- module.set.visible();
- };
- dim = function() {
- module.set.dimmed();
- };
- transitionEnd = function(event) {
- if( event.target == $transition[0] ) {
- $transition.off(transitionEvent + elementNamespace, transitionEnd);
- module.remove.animating();
- module.bind.scrollLock();
- callback.call(element);
- }
- };
- $transition.off(transitionEvent + elementNamespace);
- $transition.on(transitionEvent + elementNamespace, transitionEnd);
- requestAnimationFrame(animate);
- if(settings.dimPage && !module.othersVisible()) {
- requestAnimationFrame(dim);
- }
- },
-
- pullPage: function(callback) {
- var
- transition = module.get.transition(),
- $transition = (transition == 'overlay' || module.othersActive())
- ? $module
- : $pusher,
- animate,
- transitionEnd
- ;
- callback = $.isFunction(callback)
- ? callback
- : function(){}
- ;
- module.verbose('Removing context push state', module.get.direction());
-
- module.unbind.clickaway();
- module.unbind.scrollLock();
-
- animate = function() {
- module.set.transition(transition);
- module.set.animating();
- module.remove.visible();
- if(settings.dimPage && !module.othersVisible()) {
- $pusher.removeClass(className.dimmed);
- }
- };
- transitionEnd = function(event) {
- if( event.target == $transition[0] ) {
- $transition.off(transitionEvent + elementNamespace, transitionEnd);
- module.remove.animating();
- module.remove.transition();
- module.remove.inlineCSS();
- if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
- module.scrollBack();
- }
- callback.call(element);
- }
- };
- $transition.off(transitionEvent + elementNamespace);
- $transition.on(transitionEvent + elementNamespace, transitionEnd);
- requestAnimationFrame(animate);
- },
-
- scrollToTop: function() {
- module.verbose('Scrolling to top of page to avoid animation issues');
- currentScroll = $(window).scrollTop();
- $module.scrollTop(0);
- window.scrollTo(0, 0);
- },
-
- scrollBack: function() {
- module.verbose('Scrolling back to original page position');
- window.scrollTo(0, currentScroll);
- },
-
- clear: {
- cache: function() {
- module.verbose('Clearing cached dimensions');
- module.cache = {};
- }
- },
-
- set: {
-
- // ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios
- // (This is no longer necessary in latest iOS)
- ios: function() {
- $html.addClass(className.ios);
- },
-
- // container
- pushed: function() {
- $context.addClass(className.pushed);
- },
- pushable: function() {
- $context.addClass(className.pushable);
- },
-
- // pusher
- dimmed: function() {
- $pusher.addClass(className.dimmed);
- },
-
- // sidebar
- active: function() {
- $module.addClass(className.active);
- },
- animating: function() {
- $module.addClass(className.animating);
- },
- transition: function(transition) {
- transition = transition || module.get.transition();
- $module.addClass(transition);
- },
- direction: function(direction) {
- direction = direction || module.get.direction();
- $module.addClass(className[direction]);
- },
- visible: function() {
- $module.addClass(className.visible);
- },
- overlay: function() {
- $module.addClass(className.overlay);
- }
- },
- remove: {
-
- inlineCSS: function() {
- module.debug('Removing inline css styles', $style);
- if($style && $style.length > 0) {
- $style.remove();
- }
- },
-
- // ios scroll on html not document
- ios: function() {
- $html.removeClass(className.ios);
- },
-
- // context
- pushed: function() {
- $context.removeClass(className.pushed);
- },
- pushable: function() {
- $context.removeClass(className.pushable);
- },
-
- // sidebar
- active: function() {
- $module.removeClass(className.active);
- },
- animating: function() {
- $module.removeClass(className.animating);
- },
- transition: function(transition) {
- transition = transition || module.get.transition();
- $module.removeClass(transition);
- },
- direction: function(direction) {
- direction = direction || module.get.direction();
- $module.removeClass(className[direction]);
- },
- visible: function() {
- $module.removeClass(className.visible);
- },
- overlay: function() {
- $module.removeClass(className.overlay);
- }
- },
-
- get: {
- direction: function() {
- if($module.hasClass(className.top)) {
- return className.top;
- }
- else if($module.hasClass(className.right)) {
- return className.right;
- }
- else if($module.hasClass(className.bottom)) {
- return className.bottom;
- }
- return className.left;
- },
- transition: function() {
- var
- direction = module.get.direction(),
- transition
- ;
- transition = ( module.is.mobile() )
- ? (settings.mobileTransition == 'auto')
- ? settings.defaultTransition.mobile[direction]
- : settings.mobileTransition
- : (settings.transition == 'auto')
- ? settings.defaultTransition.computer[direction]
- : settings.transition
- ;
- module.verbose('Determined transition', transition);
- return transition;
- },
- transitionEvent: function() {
- var
- element = document.createElement('element'),
- transitions = {
- 'transition' :'transitionend',
- 'OTransition' :'oTransitionEnd',
- 'MozTransition' :'transitionend',
- 'WebkitTransition' :'webkitTransitionEnd'
- },
- transition
- ;
- for(transition in transitions){
- if( element.style[transition] !== undefined ){
- return transitions[transition];
- }
- }
- }
- },
-
- is: {
-
- ie: function() {
- var
- isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
- isIE = ('ActiveXObject' in window)
- ;
- return (isIE11 || isIE);
- },
-
- ios: function() {
- var
- userAgent = navigator.userAgent,
- isIOS = userAgent.match(regExp.ios),
- isMobileChrome = userAgent.match(regExp.mobileChrome)
- ;
- if(isIOS && !isMobileChrome) {
- module.verbose('Browser was found to be iOS', userAgent);
- return true;
- }
- else {
- return false;
- }
- },
- mobile: function() {
- var
- userAgent = navigator.userAgent,
- isMobile = userAgent.match(regExp.mobile)
- ;
- if(isMobile) {
- module.verbose('Browser was found to be mobile', userAgent);
- return true;
- }
- else {
- module.verbose('Browser is not mobile, using regular transition', userAgent);
- return false;
- }
- },
- hidden: function() {
- return !module.is.visible();
- },
- visible: function() {
- return $module.hasClass(className.visible);
- },
- // alias
- open: function() {
- return module.is.visible();
- },
- closed: function() {
- return module.is.hidden();
- },
- vertical: function() {
- return $module.hasClass(className.top);
- },
- animating: function() {
- return $context.hasClass(className.animating);
- },
- rtl: function () {
- if(module.cache.rtl === undefined) {
- module.cache.rtl = $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl';
- }
- return module.cache.rtl;
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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) {
- module.invoke('destroy');
- }
- module.initialize();
- }
- });
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.sidebar.settings = {
-
- name : 'Sidebar',
- namespace : 'sidebar',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- transition : 'auto',
- mobileTransition : 'auto',
-
- defaultTransition : {
- computer: {
- left : 'uncover',
- right : 'uncover',
- top : 'overlay',
- bottom : 'overlay'
- },
- mobile: {
- left : 'uncover',
- right : 'uncover',
- top : 'overlay',
- bottom : 'overlay'
- }
- },
-
- context : 'body',
- exclusive : false,
- closable : true,
- dimPage : true,
- scrollLock : false,
- returnScroll : false,
- delaySetup : false,
-
- duration : 500,
-
- onChange : function(){},
- onShow : function(){},
- onHide : function(){},
-
- onHidden : function(){},
- onVisible : function(){},
-
- className : {
- active : 'active',
- animating : 'animating',
- dimmed : 'dimmed',
- ios : 'ios',
- pushable : 'pushable',
- pushed : 'pushed',
- right : 'right',
- top : 'top',
- left : 'left',
- bottom : 'bottom',
- visible : 'visible'
- },
-
- selector: {
- fixed : '.fixed',
- omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
- pusher : '.pusher',
- sidebar : '.ui.sidebar'
- },
-
- regExp: {
- ios : /(iPad|iPhone|iPod)/g,
- mobileChrome : /(CriOS)/g,
- mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
- },
-
- error : {
- method : 'The method you called is not defined.',
- pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
- movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
- overlay : 'The overlay setting is no longer supported, use animation: overlay',
- notFound : 'There were no elements that matched the specified selector'
- }
-
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/sidebar.less b/semantic/src/definitions/modules/sidebar.less
deleted file mode 100644
index 54e1400..0000000
--- a/semantic/src/definitions/modules/sidebar.less
+++ /dev/null
@@ -1,654 +0,0 @@
-/*!
- * # Fomantic-UI - Sidebar
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'sidebar';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Sidebar
-*******************************/
-
-/* Sidebar Menu */
-.ui.sidebar {
- position: fixed;
- top: 0;
- left: 0;
-
- backface-visibility: hidden;
- transition: none;
- will-change: transform;
- transform: translate3d(0, 0, 0);
- visibility: hidden;
- -webkit-overflow-scrolling: touch;
-
- height: 100% !important;
- max-height: 100%;
- border-radius: 0 !important;
- margin: 0 !important;
- overflow-y: auto !important;
- z-index: @topLayer;
-}
-
-/* GPU Layers for Child Elements */
-.ui.sidebar > * {
- backface-visibility: hidden;
-}
-
-
-/*--------------
- Direction
----------------*/
-& when (@variationSidebarLeft) {
- .ui.left.sidebar {
- right: auto;
- left: 0;
- transform: translate3d(-100%, 0, 0);
- }
-}
-& when (@variationSidebarRight) {
- .ui.right.sidebar {
- right: 0 !important;
- left: auto !important;
- transform: translate3d(100%, 0, 0);
- }
-}
-
-& when (@variationSidebarTop) or (@variationSidebarBottom) {
- .ui.top.sidebar,
- .ui.bottom.sidebar {
- width: 100% !important;
- height: auto !important;
- }
- & when (@variationSidebarTop) {
- .ui.top.sidebar {
- top: 0 !important;
- bottom: auto !important;
- transform: translate3d(0, -100%, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.bottom.sidebar {
- top: auto !important;
- bottom: 0 !important;
- transform: translate3d(0, 100%, 0);
- }
- }
-}
-
-
-/*--------------
- Pushable
----------------*/
-
-.pushable {
- height: 100%;
- overflow-x: hidden;
- padding: 0 !important;
-}
-
-/* Whole Page */
-body.pushable {
- background: @canvasBackground;
- &.dimmed {
- background: inherit;
- }
-}
-
-/* Page Context */
-.pushable:not(body) {
- transform: translate3d(0, 0, 0);
- overflow-y: hidden;
-}
-.pushable:not(body) > .ui.sidebar,
-.pushable:not(body) > .fixed,
-.pushable:not(body) > .pusher:after {
- position: absolute;
-}
-
-
-/*--------------
- Fixed
----------------*/
-
-.pushable > .fixed {
- position: fixed;
- backface-visibility: hidden;
-
- transition: transform @duration @easing;
- will-change: transform;
- z-index: @fixedLayer;
-}
-
-/*--------------
- Page
----------------*/
-
-.pushable > .pusher {
- position: relative;
- backface-visibility: hidden;
- overflow: hidden;
- min-height: 100%;
- transition: transform @duration @easing;
- z-index: @middleLayer;
-
- /* Pusher should inherit background from context */
- background: inherit;
-}
-
-body.pushable > .pusher {
- background: @pageBackground;
-}
-
-/*--------------
- Dimmer
----------------*/
-
-.pushable > .pusher:after {
- position: fixed;
- top: 0;
- right: 0;
- content: '';
- background: @dimmerColor;
- overflow: hidden;
- opacity: 0;
- transition: @dimmerTransition;
- will-change: opacity;
- z-index: @dimmerLayer;
-}
-
-/*--------------
- Coupling
----------------*/
-
-.ui.sidebar.menu .item {
- border-radius: 0 !important;
-}
-
-/*******************************
- States
-*******************************/
-
-/*--------------
- Dimmed
----------------*/
-
-.pushable > .pusher.dimmed:after {
- width: 100% !important;
- height: 100% !important;
- opacity: 1 !important;
-}
-
-/*--------------
- Animating
----------------*/
-
-.ui.animating.sidebar {
- visibility: visible;
-}
-
-/*--------------
- Visible
----------------*/
-
-.ui.visible.sidebar {
- visibility: visible;
- transform: translate3d(0, 0, 0);
-}
-
-/* Shadow Direction */
-& when (@variationSidebarLeft) or (@variationSidebarRight) {
- .ui.left.visible.sidebar,
- .ui.right.visible.sidebar {
- box-shadow: @horizontalBoxShadow;
- }
-}
-& when (@variationSidebarTop) or (@variationSidebarBottom) {
- .ui.top.visible.sidebar,
- .ui.bottom.visible.sidebar {
- box-shadow: @verticalBoxShadow;
- }
-}
-
-/* Visible On Load */
-& when (@variationSidebarLeft) {
- .ui.visible.left.sidebar ~ .fixed,
- .ui.visible.left.sidebar ~ .pusher {
- transform: translate3d(@width, 0, 0);
- }
-}
-& when (@variationSidebarRight) {
- .ui.visible.right.sidebar ~ .fixed,
- .ui.visible.right.sidebar ~ .pusher {
- transform: translate3d(-@width, 0, 0);
- }
-}
-& when (@variationSidebarTop) {
- .ui.visible.top.sidebar ~ .fixed,
- .ui.visible.top.sidebar ~ .pusher {
- transform: translate3d(0, @height, 0);
- }
-}
-& when (@variationSidebarBottom) {
- .ui.visible.bottom.sidebar ~ .fixed,
- .ui.visible.bottom.sidebar ~ .pusher {
- transform: translate3d(0, -@height, 0);
- }
-}
-
-& when (@variationSidebarLeft) or (@variationSidebarRight) {
- /* opposite sides visible forces content overlay */
- .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,
- .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,
- .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,
- .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {
- transform: translate3d(0, 0, 0);
- }
-}
-
-/*--------------
- iOS
----------------*/
-
-
-/*******************************
- Variations
-*******************************/
-
-/*--------------
- Width
----------------*/
-
-/* Left / Right */
-& when (@variationSidebarLeft) or (@variationSidebarRight) {
- & when (@variationSidebarThin) {
- .ui.thin.left.sidebar,
- .ui.thin.right.sidebar {
- width: @thinWidth;
- }
-
- .ui[class*="very thin"].left.sidebar,
- .ui[class*="very thin"].right.sidebar {
- width: @veryThinWidth;
- }
- }
-
- .ui.left.sidebar,
- .ui.right.sidebar {
- width: @width;
- }
-
- & when (@variationSidebarWide) {
- .ui.wide.left.sidebar,
- .ui.wide.right.sidebar {
- width: @wideWidth;
- }
-
- .ui[class*="very wide"].left.sidebar,
- .ui[class*="very wide"].right.sidebar {
- width: @veryWideWidth;
- }
- }
-
- /* Left Visible */
- & when (@variationSidebarLeft) {
- & when (@variationSidebarThin) {
- .ui.visible.thin.left.sidebar ~ .fixed,
- .ui.visible.thin.left.sidebar ~ .pusher {
- transform: translate3d(@thinWidth, 0, 0);
- }
-
- .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
- .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
- transform: translate3d(@veryThinWidth, 0, 0);
- }
- }
-
- & when (@variationSidebarWide) {
- .ui.visible.wide.left.sidebar ~ .fixed,
- .ui.visible.wide.left.sidebar ~ .pusher {
- transform: translate3d(@wideWidth, 0, 0);
- }
-
- .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
- .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
- transform: translate3d(@veryWideWidth, 0, 0);
- }
- }
- }
-
- /* Right Visible */
- & when (@variationSidebarRight) {
- & when (@variationSidebarThin) {
- .ui.visible.thin.right.sidebar ~ .fixed,
- .ui.visible.thin.right.sidebar ~ .pusher {
- transform: translate3d(-@thinWidth, 0, 0);
- }
-
- .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
- .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
- transform: translate3d(-@veryThinWidth, 0, 0);
- }
- }
-
- & when (@variationSidebarWide) {
- .ui.visible.wide.right.sidebar ~ .fixed,
- .ui.visible.wide.right.sidebar ~ .pusher {
- transform: translate3d(-@wideWidth, 0, 0);
- }
-
- .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
- .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
- transform: translate3d(-@veryWideWidth, 0, 0);
- }
- }
- }
-}
-
-
-
-/*******************************
- Animations
-*******************************/
-
-& when (@variationSidebarOverlay) {
- /*--------------
- Overlay
- ---------------*/
-
- /* Set-up */
- .ui.overlay.sidebar {
- z-index: @topLayer;
- }
-
- /* Initial */
- & when (@variationSidebarLeft) {
- .ui.left.overlay.sidebar {
- transform: translate3d(-100%, 0, 0);
- }
- }
- & when (@variationSidebarRight) {
- .ui.right.overlay.sidebar {
- transform: translate3d(100%, 0, 0);
- }
- }
- & when (@variationSidebarTop) {
- .ui.top.overlay.sidebar {
- transform: translate3d(0%, -100%, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.bottom.overlay.sidebar {
- transform: translate3d(0%, 100%, 0);
- }
- }
-
- /* Animation */
- .animating.ui.overlay.sidebar,
- .ui.visible.overlay.sidebar {
- transition: transform @duration @easing;
- }
-
- /* End - Sidebar */
- & when (@variationSidebarLeft) {
- .ui.visible.left.overlay.sidebar {
- transform: translate3d(0%, 0, 0);
- }
- }
- & when (@variationSidebarRight) {
- .ui.visible.right.overlay.sidebar {
- transform: translate3d(0%, 0, 0);
- }
- }
- & when (@variationSidebarTop) {
- .ui.visible.top.overlay.sidebar {
- transform: translate3d(0%, 0, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.visible.bottom.overlay.sidebar {
- transform: translate3d(0%, 0, 0);
- }
- }
- /* End - Pusher */
- .ui.visible.overlay.sidebar ~ .fixed,
- .ui.visible.overlay.sidebar ~ .pusher {
- transform: none !important;
- }
-}
-
-
-& when (@variationSidebarPush) {
- /*--------------
- Push
- ---------------*/
-
- /* Initial */
- .ui.push.sidebar {
- transition: transform @duration @easing;
- z-index: @topLayer;
- }
-
- /* Sidebar - Initial */
- & when (@variationSidebarLeft) {
- .ui.left.push.sidebar {
- transform: translate3d(-100%, 0, 0);
- }
- }
- & when (@variationSidebarRight) {
- .ui.right.push.sidebar {
- transform: translate3d(100%, 0, 0);
- }
- }
- & when (@variationSidebarTop) {
- .ui.top.push.sidebar {
- transform: translate3d(0%, -100%, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.bottom.push.sidebar {
- transform: translate3d(0%, 100%, 0);
- }
- }
-
- /* End */
- .ui.visible.push.sidebar {
- transform: translate3d(0%, 0, 0);
- }
-}
-
-& when (@variationSidebarUncover) {
- /*--------------
- Uncover
- ---------------*/
-
- /* Initial */
- .ui.uncover.sidebar {
- transform: translate3d(0, 0, 0);
- z-index: @bottomLayer;
- }
-
- /* End */
- .ui.visible.uncover.sidebar {
- transform: translate3d(0, 0, 0);
- transition: transform @duration @easing;
- }
-}
-
-& when (@variationSidebarSlideAlong) {
- /*--------------
- Slide Along
- ---------------*/
-
- /* Initial */
- .ui.slide.along.sidebar {
- z-index: @bottomLayer;
- }
-
- /* Sidebar - Initial */
- & when (@variationSidebarLeft) {
- .ui.left.slide.along.sidebar {
- transform: translate3d(-50%, 0, 0);
- }
- }
- & when (@variationSidebarRight) {
- .ui.right.slide.along.sidebar {
- transform: translate3d(50%, 0, 0);
- }
- }
- & when (@variationSidebarTop) {
- .ui.top.slide.along.sidebar {
- transform: translate3d(0, -50%, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.bottom.slide.along.sidebar {
- transform: translate3d(0%, 50%, 0);
- }
- }
-
- /* Animation */
- .ui.animating.slide.along.sidebar {
- transition: transform @duration @easing;
- }
-
- /* End */
- .ui.visible.slide.along.sidebar {
- transform: translate3d(0%, 0, 0);
- }
-}
-
-& when (@variationSidebarSlideOut) {
- /*--------------
- Slide Out
- ---------------*/
-
- /* Initial */
- .ui.slide.out.sidebar {
- z-index: @bottomLayer;
- }
-
- /* Sidebar - Initial */
- & when (@variationSidebarLeft) {
- .ui.left.slide.out.sidebar {
- transform: translate3d(50%, 0, 0);
- }
- }
- & when (@variationSidebarRight) {
- .ui.right.slide.out.sidebar {
- transform: translate3d(-50%, 0, 0);
- }
- }
- & when (@variationSidebarTop) {
- .ui.top.slide.out.sidebar {
- transform: translate3d(0%, 50%, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.bottom.slide.out.sidebar {
- transform: translate3d(0%, -50%, 0);
- }
- }
-
- /* Animation */
- .ui.animating.slide.out.sidebar {
- transition: transform @duration @easing;
- }
-
- /* End */
- .ui.visible.slide.out.sidebar {
- transform: translate3d(0%, 0, 0);
- }
-}
-
-& when (@variationSidebarScale) {
- /*--------------
- Scale Down
- ---------------*/
-
- /* Initial */
- .ui.scale.down.sidebar {
- transition: transform @duration @easing;
- z-index: @topLayer;
- }
-
-
- & when (@variationSidebarLeft) {
- .ui.left.scale.down.sidebar {
- transform: translate3d(-100%, 0, 0);
- }
- }
- & when (@variationSidebarRight) {
- .ui.right.scale.down.sidebar {
- transform: translate3d(100%, 0, 0);
- }
- }
- & when (@variationSidebarTop) {
- .ui.top.scale.down.sidebar {
- transform: translate3d(0%, -100%, 0);
- }
- }
- & when (@variationSidebarBottom) {
- .ui.bottom.scale.down.sidebar {
- transform: translate3d(0%, 100%, 0);
- }
- }
-
- /* Pusher - Initial */
- & when (@variationSidebarLeft) {
- .ui.scale.down.left.sidebar ~ .pusher {
- transform-origin: 75% 50%;
- }
- }
- & when (@variationSidebarRight) {
- .ui.scale.down.right.sidebar ~ .pusher {
- transform-origin: 25% 50%;
- }
- }
- & when (@variationSidebarTop) {
- .ui.scale.down.top.sidebar ~ .pusher {
- transform-origin: 50% 75%;
- }
- }
- & when (@variationSidebarBottom) {
- .ui.scale.down.bottom.sidebar ~ .pusher {
- transform-origin: 50% 25%;
- }
- }
-
- /* Animation */
- .ui.animating.scale.down > .visible.ui.sidebar {
- transition: transform @duration @easing;
- }
- .ui.visible.scale.down.sidebar ~ .pusher,
- .ui.animating.scale.down.sidebar ~ .pusher {
- display: block !important;
- width: 100%;
- height: 100%;
- overflow: hidden !important;
- }
-
- /* End */
- .ui.visible.scale.down.sidebar {
- transform: translate3d(0, 0, 0);
- }
- .ui.visible.scale.down.sidebar ~ .pusher {
- transform: scale(0.75);
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/slider.js b/semantic/src/definitions/modules/slider.js
deleted file mode 100644
index 11d8ca3..0000000
--- a/semantic/src/definitions/modules/slider.js
+++ /dev/null
@@ -1,1314 +0,0 @@
-/*!
- * # Fomantic-UI - Slider
- * http://github.com/fomantic/Fomantic-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.slider = function(parameters) {
-
- var
- $allModules = $(this),
- $window = $(window),
-
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- query = arguments[0],
- methodInvoked = (typeof query == 'string'),
- queryArguments = [].slice.call(arguments, 1),
-
- alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
-
- SINGLE_STEP = 1,
- BIG_STEP = 2,
- NO_STEP = 0,
- SINGLE_BACKSTEP = -1,
- BIG_BACKSTEP = -2,
-
- // Used to manage document bound events.
- // Use this so that we can distinguish between which document events are bound to which range.
- currentRange = 0,
-
- returnedValue
- ;
-
- $allModules
- .each(function() {
-
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.slider.settings, parameters)
- : $.extend({}, $.fn.slider.settings),
-
- className = settings.className,
- metadata = settings.metadata,
- namespace = settings.namespace,
- error = settings.error,
- keys = settings.keys,
- interpretLabel = settings.interpretLabel,
-
- isHover = false,
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $currThumb,
- $thumb,
- $secondThumb,
- $track,
- $trackFill,
- $labels,
-
- element = this,
- instance = $module.data(moduleNamespace),
-
- documentEventID,
-
- value,
- position,
- secondPos,
- offset,
- precision,
- isTouch,
- gapRatio = 1,
-
- initialPosition,
- initialLoad,
- module
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing slider', settings);
- initialLoad = true;
-
- currentRange += 1;
- documentEventID = currentRange;
-
- isTouch = module.setup.testOutTouch();
- module.setup.layout();
- module.setup.labels();
-
- if(!module.is.disabled()) {
- module.bind.events();
- }
-
- module.read.metadata();
- module.read.settings();
-
- initialLoad = false;
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of slider', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous slider for', $module);
- clearInterval(instance.interval);
- module.unbind.events();
- module.unbind.slidingEvents();
- $module.removeData(moduleNamespace);
- instance = undefined;
- },
-
- setup: {
- layout: function() {
- if( $module.attr('tabindex') === undefined) {
- $module.attr('tabindex', 0);
- }
- if($module.find('.inner').length == 0) {
- $module.append("<div class='inner'>"
- + "<div class='track'></div>"
- + "<div class='track-fill'></div>"
- + "<div class='thumb'></div>"
- + "</div>");
- }
- precision = module.get.precision();
- $thumb = $module.find('.thumb:not(.second)');
- $currThumb = $thumb;
- if(module.is.range()) {
- if($module.find('.thumb.second').length == 0) {
- $module.find('.inner').append("<div class='thumb second'></div>");
- }
- $secondThumb = $module.find('.thumb.second');
- }
- $track = $module.find('.track');
- $trackFill = $module.find('.track-fill');
- offset = $thumb.width() / 2;
- },
- labels: function() {
- if(module.is.labeled()) {
- $labels = $module.find('.labels:not(.auto)');
- if($labels.length != 0) {
- module.setup.customLabel();
- } else {
- module.setup.autoLabel();
- }
-
- if (settings.showLabelTicks) {
- $module.addClass(className.ticked)
- }
- }
- },
- testOutTouch: function() {
- try {
- document.createEvent('TouchEvent');
- return true;
- } catch (e) {
- return false;
- }
- },
- customLabel: function() {
- var
- $children = $labels.find('.label'),
- numChildren = $children.length,
- min = module.get.min(),
- max = module.get.max(),
- ratio
- ;
- $children.each(function(index) {
- var
- $child = $(this),
- attrValue = $child.attr('data-value')
- ;
- if(attrValue) {
- attrValue = attrValue > max ? max : attrValue < min ? min : attrValue;
- ratio = (attrValue - min) / (max - min);
- } else {
- ratio = (index + 1) / (numChildren + 1);
- }
- module.update.labelPosition(ratio, $(this));
- });
- },
- autoLabel: function() {
- if(module.get.step() != 0) {
- $labels = $module.find('.labels');
- if($labels.length != 0) {
- $labels.empty();
- }
- else {
- $labels = $module.append('<ul class="auto labels"></ul>').find('.labels');
- }
- for(var i = 0, len = module.get.numLabels(); i <= len; i++) {
- var
- labelText = module.get.label(i),
- $label = (labelText !== "")
- ? !(i % module.get.gapRatio())
- ? $('<li class="label">' + labelText + '</li>')
- : $('<li class="halftick label"></li>')
- : null,
- ratio = i / len
- ;
- if($label) {
- module.update.labelPosition(ratio, $label);
- $labels.append($label);
- }
- }
- }
- }
- },
-
- bind: {
- events: function() {
- module.bind.globalKeyboardEvents();
- module.bind.keyboardEvents();
- module.bind.mouseEvents();
- if(module.is.touch()) {
- module.bind.touchEvents();
- }
- if (settings.autoAdjustLabels) {
- module.bind.windowEvents();
- }
- },
- keyboardEvents: function() {
- module.verbose('Binding keyboard events');
- $module.on('keydown' + eventNamespace, module.event.keydown);
- },
- globalKeyboardEvents: function() {
- $(document).on('keydown' + eventNamespace + documentEventID, module.event.activateFocus);
- },
- mouseEvents: function() {
- module.verbose('Binding mouse events');
- $module.find('.track, .thumb, .inner').on('mousedown' + eventNamespace, function(event) {
- event.stopImmediatePropagation();
- event.preventDefault();
- module.event.down(event);
- });
- $module.on('mousedown' + eventNamespace, module.event.down);
- $module.on('mouseenter' + eventNamespace, function(event) {
- isHover = true;
- });
- $module.on('mouseleave' + eventNamespace, function(event) {
- isHover = false;
- });
- },
- touchEvents: function() {
- module.verbose('Binding touch events');
- $module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
- event.stopImmediatePropagation();
- event.preventDefault();
- module.event.down(event);
- });
- $module.on('touchstart' + eventNamespace, module.event.down);
- },
- slidingEvents: function() {
- // these don't need the identifier because we only ever want one of them to be registered with document
- module.verbose('Binding page wide events while handle is being draged');
- if(module.is.touch()) {
- $(document).on('touchmove' + eventNamespace, module.event.move);
- $(document).on('touchend' + eventNamespace, module.event.up);
- }
- else {
- $(document).on('mousemove' + eventNamespace, module.event.move);
- $(document).on('mouseup' + eventNamespace, module.event.up);
- }
- },
- windowEvents: function() {
- $window.on('resize' + eventNamespace, module.event.resize);
- }
- },
-
- unbind: {
- events: function() {
- $module.find('.track, .thumb, .inner').off('mousedown' + eventNamespace);
- $module.find('.track, .thumb, .inner').off('touchstart' + eventNamespace);
- $module.off('mousedown' + eventNamespace);
- $module.off('mouseenter' + eventNamespace);
- $module.off('mouseleave' + eventNamespace);
- $module.off('touchstart' + eventNamespace);
- $module.off('keydown' + eventNamespace);
- $module.off('focusout' + eventNamespace);
- $(document).off('keydown' + eventNamespace + documentEventID, module.event.activateFocus);
- $window.off('resize' + eventNamespace);
- },
- slidingEvents: function() {
- if(module.is.touch()) {
- $(document).off('touchmove' + eventNamespace);
- $(document).off('touchend' + eventNamespace);
- } else {
- $(document).off('mousemove' + eventNamespace);
- $(document).off('mouseup' + eventNamespace);
- }
- },
- },
-
- event: {
- down: function(event) {
- event.preventDefault();
- if(module.is.range()) {
- var
- eventPos = module.determine.eventPos(event),
- newPos = module.determine.pos(eventPos)
- ;
- // Special handling if range mode and both thumbs have the same value
- if(settings.preventCrossover && module.is.range() && module.thumbVal === module.secondThumbVal) {
- initialPosition = newPos;
- $currThumb = undefined;
- } else {
- $currThumb = module.determine.closestThumb(newPos);
- }
- }
- if(!module.is.disabled()) {
- module.bind.slidingEvents();
- }
- },
- move: function(event) {
- event.preventDefault();
- var value = module.determine.valueFromEvent(event);
- if($currThumb === undefined) {
- var
- eventPos = module.determine.eventPos(event),
- newPos = module.determine.pos(eventPos)
- ;
- $currThumb = initialPosition > newPos ? $thumb : $secondThumb;
- }
- if(module.get.step() == 0 || module.is.smooth()) {
- var
- thumbVal = module.thumbVal,
- secondThumbVal = module.secondThumbVal,
- thumbSmoothVal = module.determine.smoothValueFromEvent(event)
- ;
- if(!$currThumb.hasClass('second')) {
- if(settings.preventCrossover && module.is.range()) {
- value = Math.min(secondThumbVal, value);
- thumbSmoothVal = Math.min(secondThumbVal, thumbSmoothVal);
- }
- thumbVal = value;
- } else {
- if(settings.preventCrossover && module.is.range()) {
- value = Math.max(thumbVal, value);
- thumbSmoothVal = Math.max(thumbVal, thumbSmoothVal);
- }
- secondThumbVal = value;
- }
- value = Math.abs(thumbVal - (secondThumbVal || 0));
- module.update.position(thumbSmoothVal);
- settings.onMove.call(element, value, thumbVal, secondThumbVal);
- } else {
- module.update.value(value, function(value, thumbVal, secondThumbVal) {
- settings.onMove.call(element, value, thumbVal, secondThumbVal);
- });
- }
- },
- up: function(event) {
- event.preventDefault();
- var value = module.determine.valueFromEvent(event);
- module.set.value(value);
- module.unbind.slidingEvents();
- },
- keydown: function(event, first) {
- if(settings.preventCrossover && module.is.range() && module.thumbVal === module.secondThumbVal) {
- $currThumb = undefined;
- }
- if(module.is.focused()) {
- $(document).trigger(event);
- }
- if(first || module.is.focused()) {
- var step = module.determine.keyMovement(event);
- if(step != NO_STEP) {
- event.preventDefault();
- switch(step) {
- case SINGLE_STEP:
- module.takeStep();
- break;
- case BIG_STEP:
- module.takeStep(module.get.multiplier());
- break;
- case SINGLE_BACKSTEP:
- module.backStep();
- break;
- case BIG_BACKSTEP:
- module.backStep(module.get.multiplier());
- break;
- }
- }
- }
- },
- activateFocus: function(event) {
- if(!module.is.focused() && module.is.hover() && module.determine.keyMovement(event) != NO_STEP) {
- event.preventDefault();
- module.event.keydown(event, true);
- $module.focus();
- }
- },
- resize: function(_event) {
- // To avoid a useless performance cost, we only call the label refresh when its necessary
- if (gapRatio != module.get.gapRatio()) {
- module.setup.labels();
- gapRatio = module.get.gapRatio();
- }
- }
- },
-
- resync: function() {
- module.verbose('Resyncing thumb position based on value');
- if(module.is.range()) {
- module.update.position(module.secondThumbVal, $secondThumb);
- }
- module.update.position(module.thumbVal, $thumb);
- module.setup.labels();
- },
- takeStep: function(multiplier) {
- var
- multiplier = multiplier != undefined ? multiplier : 1,
- step = module.get.step(),
- currValue = module.get.currentThumbValue()
- ;
- module.verbose('Taking a step');
- if(step > 0) {
- module.set.value(currValue + step * multiplier);
- } else if (step == 0){
- var
- precision = module.get.precision(),
- newValue = currValue + (multiplier/precision)
- ;
- module.set.value(Math.round(newValue * precision) / precision);
- }
- },
-
- backStep: function(multiplier) {
- var
- multiplier = multiplier != undefined ? multiplier : 1,
- step = module.get.step(),
- currValue = module.get.currentThumbValue()
- ;
- module.verbose('Going back a step');
- if(step > 0) {
- module.set.value(currValue - step * multiplier);
- } else if (step == 0) {
- var
- precision = module.get.precision(),
- newValue = currValue - (multiplier/precision)
- ;
- module.set.value(Math.round(newValue * precision) / precision);
- }
- },
-
- is: {
- range: function() {
- return $module.hasClass(settings.className.range);
- },
- hover: function() {
- return isHover;
- },
- focused: function() {
- return $module.is(':focus');
- },
- disabled: function() {
- return $module.hasClass(settings.className.disabled);
- },
- labeled: function() {
- return $module.hasClass(settings.className.labeled);
- },
- reversed: function() {
- return $module.hasClass(settings.className.reversed);
- },
- vertical: function() {
- return $module.hasClass(settings.className.vertical);
- },
- smooth: function() {
- return settings.smooth || $module.hasClass(settings.className.smooth);
- },
- touch: function() {
- return isTouch;
- }
- },
-
- get: {
- trackOffset: function() {
- if (module.is.vertical()) {
- return $track.offset().top;
- } else {
- return $track.offset().left;
- }
- },
- trackLength: function() {
- if (module.is.vertical()) {
- return $track.height();
- } else {
- return $track.width();
- }
- },
- trackLeft: function() {
- if (module.is.vertical()) {
- return $track.position().top;
- } else {
- return $track.position().left;
- }
- },
- trackStartPos: function() {
- return module.is.reversed() ? module.get.trackLeft() + module.get.trackLength() : module.get.trackLeft();
- },
- trackEndPos: function() {
- return module.is.reversed() ? module.get.trackLeft() : module.get.trackLeft() + module.get.trackLength();
- },
- trackStartMargin: function () {
- var margin;
- if (module.is.vertical()) {
- margin = module.is.reversed() ? $module.css('padding-bottom') : $module.css('padding-top');
- } else {
- margin = module.is.reversed() ? $module.css('padding-right') : $module.css('padding-left');
- }
- return margin || '0px';
- },
- trackEndMargin: function () {
- var margin;
- if (module.is.vertical()) {
- margin = module.is.reversed() ? $module.css('padding-top') : $module.css('padding-bottom');
- } else {
- margin = module.is.reversed() ? $module.css('padding-left') : $module.css('padding-right');
- }
- return margin || '0px';
- },
- precision: function() {
- var
- decimalPlaces,
- step = module.get.step()
- ;
- if(step != 0) {
- var split = String(step).split('.');
- if(split.length == 2) {
- decimalPlaces = split[1].length;
- } else {
- decimalPlaces = 0;
- }
- } else {
- decimalPlaces = settings.decimalPlaces;
- }
- var precision = Math.pow(10, decimalPlaces);
- module.debug('Precision determined', precision);
- return precision;
- },
- min: function() {
- return settings.min;
- },
- max: function() {
- var step = module.get.step(),
- min = module.get.min(),
- quotient = step === 0 ? 0 : Math.floor((settings.max - min) / step),
- remainder = step === 0 ? 0 : (settings.max - min) % step;
- return remainder === 0 ? settings.max : min + quotient * step;
- },
- step: function() {
- return settings.step;
- },
- numLabels: function() {
- var value = Math.round((module.get.max() - module.get.min()) / module.get.step());
- module.debug('Determined that there should be ' + value + ' labels');
- return value;
- },
- labelType: function() {
- return settings.labelType;
- },
- label: function(value) {
- if(interpretLabel) {
- return interpretLabel(value);
- }
-
- switch (settings.labelType) {
- case settings.labelTypes.number:
- return Math.round(((value * module.get.step()) + module.get.min()) * precision ) / precision;
- case settings.labelTypes.letter:
- return alphabet[(value) % 26];
- default:
- return value;
- }
- },
- value: function() {
- return value;
- },
- currentThumbValue: function() {
- return $currThumb !== undefined && $currThumb.hasClass('second') ? module.secondThumbVal : module.thumbVal;
- },
- thumbValue: function(which) {
- switch(which) {
- case 'second':
- if(module.is.range()) {
- return module.secondThumbVal;
- }
- else {
- module.error(error.notrange);
- break;
- }
- case 'first':
- default:
- return module.thumbVal;
- }
- },
- multiplier: function() {
- return settings.pageMultiplier;
- },
- thumbPosition: function(which) {
- switch(which) {
- case 'second':
- if(module.is.range()) {
- return secondPos;
- }
- else {
- module.error(error.notrange);
- break;
- }
- case 'first':
- default:
- return position;
- }
- },
- gapRatio: function() {
- var gapRatio = 1;
-
- if( settings.autoAdjustLabels ) {
- var
- numLabels = module.get.numLabels(),
- trackLength = module.get.trackLength(),
- gapCounter = 1
- ;
-
- // While the distance between two labels is too short,
- // we divide the number of labels at each iteration
- // and apply only if the modulo of the operation is an odd number.
- if(trackLength>0){
- while ((trackLength / numLabels) * gapCounter < settings.labelDistance) {
- if( !(numLabels % gapCounter) ) {
- gapRatio = gapCounter;
- }
- gapCounter += 1;
- }
- }
- }
- return gapRatio;
- }
- },
-
- determine: {
- pos: function(pagePos) {
- return module.is.reversed()
- ?
- module.get.trackStartPos() - pagePos + module.get.trackOffset()
- :
- pagePos - module.get.trackOffset() - module.get.trackStartPos()
- ;
- },
- closestThumb: function(eventPos) {
- var
- thumbPos = parseFloat(module.determine.thumbPos($thumb)),
- thumbDelta = Math.abs(eventPos - thumbPos),
- secondThumbPos = parseFloat(module.determine.thumbPos($secondThumb)),
- secondThumbDelta = Math.abs(eventPos - secondThumbPos)
- ;
- if(thumbDelta === secondThumbDelta && module.get.thumbValue() === module.get.min()) {
- return $secondThumb;
- }
- return thumbDelta <= secondThumbDelta ? $thumb : $secondThumb;
- },
- closestThumbPos: function(eventPos) {
- var
- thumbPos = parseFloat(module.determine.thumbPos($thumb)),
- thumbDelta = Math.abs(eventPos - thumbPos),
- secondThumbPos = parseFloat(module.determine.thumbPos($secondThumb)),
- secondThumbDelta = Math.abs(eventPos - secondThumbPos)
- ;
- return thumbDelta <= secondThumbDelta ? thumbPos : secondThumbPos;
- },
- thumbPos: function($element) {
- var pos =
- module.is.vertical()
- ?
- module.is.reversed() ? $element.css('bottom') : $element.css('top')
- :
- module.is.reversed() ? $element.css('right') : $element.css('left')
- ;
- return pos;
- },
- positionFromValue: function(value) {
- var
- min = module.get.min(),
- max = module.get.max(),
- value = value > max ? max : value < min ? min : value,
- trackLength = module.get.trackLength(),
- ratio = (value - min) / (max - min),
- position = Math.round(ratio * trackLength)
- ;
- module.verbose('Determined position: ' + position + ' from value: ' + value);
- return position;
- },
- positionFromRatio: function(ratio) {
- var
- trackLength = module.get.trackLength(),
- step = module.get.step(),
- position = Math.round(ratio * trackLength),
- adjustedPos = (step == 0) ? position : Math.round(position / step) * step
- ;
- return adjustedPos;
- },
- valueFromEvent: function(event) {
- var
- eventPos = module.determine.eventPos(event),
- newPos = module.determine.pos(eventPos),
- value
- ;
- if(eventPos < module.get.trackOffset()) {
- value = module.is.reversed() ? module.get.max() : module.get.min();
- } else if(eventPos > module.get.trackOffset() + module.get.trackLength()) {
- value = module.is.reversed() ? module.get.min() : module.get.max();
- } else {
- value = module.determine.value(newPos);
- }
- return value;
- },
- smoothValueFromEvent: function(event) {
- var
- min = module.get.min(),
- max = module.get.max(),
- trackLength = module.get.trackLength(),
- eventPos = module.determine.eventPos(event),
- newPos = eventPos - module.get.trackOffset(),
- ratio,
- value
- ;
- newPos = newPos < 0 ? 0 : newPos > trackLength ? trackLength : newPos;
- ratio = newPos / trackLength;
- if (module.is.reversed()) {
- ratio = 1 - ratio;
- }
- value = ratio * (max - min) + min;
- return value;
- },
- eventPos: function(event) {
- if(module.is.touch()) {
- var
- touchEvent = event.changedTouches ? event : event.originalEvent,
- touches = touchEvent.changedTouches[0] ? touchEvent.changedTouches : touchEvent.touches,
- touchY = touches[0].pageY,
- touchX = touches[0].pageX
- ;
- return module.is.vertical() ? touchY : touchX;
- }
- var
- clickY = event.pageY || event.originalEvent.pageY,
- clickX = event.pageX || event.originalEvent.pageX
- ;
- return module.is.vertical() ? clickY : clickX;
- },
- value: function(position) {
- var
- startPos = module.is.reversed() ? module.get.trackEndPos() : module.get.trackStartPos(),
- endPos = module.is.reversed() ? module.get.trackStartPos() : module.get.trackEndPos(),
- ratio = (position - startPos) / (endPos - startPos),
- range = module.get.max() - module.get.min(),
- step = module.get.step(),
- value = (ratio * range),
- difference = (step == 0) ? value : Math.round(value / step) * step
- ;
- module.verbose('Determined value based upon position: ' + position + ' as: ' + value);
- if(value != difference) {
- module.verbose('Rounding value to closest step: ' + difference);
- }
- // Use precision to avoid ugly Javascript floating point rounding issues
- // (like 35 * .01 = 0.35000000000000003)
- module.verbose('Cutting off additional decimal places');
- return Math.round((difference + module.get.min()) * precision) / precision;
- },
- keyMovement: function(event) {
- var
- key = event.which,
- downArrow =
- module.is.vertical()
- ?
- module.is.reversed() ? keys.downArrow : keys.upArrow
- :
- keys.downArrow
- ,
- upArrow =
- module.is.vertical()
- ?
- module.is.reversed() ? keys.upArrow : keys.downArrow
- :
- keys.upArrow
- ,
- leftArrow =
- !module.is.vertical()
- ?
- module.is.reversed() ? keys.rightArrow : keys.leftArrow
- :
- keys.leftArrow
- ,
- rightArrow =
- !module.is.vertical()
- ?
- module.is.reversed() ? keys.leftArrow : keys.rightArrow
- :
- keys.rightArrow
- ;
- if(key == downArrow || key == leftArrow) {
- return SINGLE_BACKSTEP;
- } else if(key == upArrow || key == rightArrow) {
- return SINGLE_STEP;
- } else if (key == keys.pageDown) {
- return BIG_BACKSTEP;
- } else if (key == keys.pageUp) {
- return BIG_STEP;
- } else {
- return NO_STEP;
- }
- }
- },
-
- handleNewValuePosition: function(val) {
- var
- min = module.get.min(),
- max = module.get.max(),
- newPos
- ;
- if (val <= min) {
- val = min;
- } else if (val >= max) {
- val = max;
- }
- newPos = module.determine.positionFromValue(val);
- return newPos;
- },
-
- set: {
- value: function(newValue) {
- module.update.value(newValue, function(value, thumbVal, secondThumbVal) {
- if (!initialLoad || settings.fireOnInit){
- settings.onChange.call(element, value, thumbVal, secondThumbVal);
- settings.onMove.call(element, value, thumbVal, secondThumbVal);
- }
- });
- },
- rangeValue: function(first, second) {
- if(module.is.range()) {
- var
- min = module.get.min(),
- max = module.get.max()
- ;
- if (first <= min) {
- first = min;
- } else if(first >= max){
- first = max;
- }
- if (second <= min) {
- second = min;
- } else if(second >= max){
- second = max;
- }
- module.thumbVal = first;
- module.secondThumbVal = second;
- value = Math.abs(module.thumbVal - module.secondThumbVal);
- module.update.position(module.thumbVal, $thumb);
- module.update.position(module.secondThumbVal, $secondThumb);
- if (!initialLoad || settings.fireOnInit) {
- settings.onChange.call(element, value, module.thumbVal, module.secondThumbVal);
- settings.onMove.call(element, value, module.thumbVal, module.secondThumbVal);
- }
- } else {
- module.error(error.notrange);
- }
- },
- position: function(position, which) {
- var thumbVal = module.determine.value(position);
- switch (which) {
- case 'second':
- module.secondThumbVal = thumbVal;
- module.update.position(thumbVal, $secondThumb);
- break;
- default:
- module.thumbVal = thumbVal;
- module.update.position(thumbVal, $thumb);
- }
- value = Math.abs(module.thumbVal - (module.secondThumbVal || 0));
- module.set.value(value);
- }
- },
-
- update: {
- value: function(newValue, callback) {
- var
- min = module.get.min(),
- max = module.get.max()
- ;
- if (newValue <= min) {
- newValue = min;
- } else if(newValue >= max){
- newValue = max;
- }
- if(!module.is.range()) {
- value = newValue;
- module.thumbVal = value;
- } else {
- if($currThumb === undefined) {
- $currThumb = newValue <= module.get.currentThumbValue() ? $thumb : $secondThumb;
- }
- if(!$currThumb.hasClass('second')) {
- if(settings.preventCrossover && module.is.range()) {
- newValue = Math.min(module.secondThumbVal, newValue);
- }
- module.thumbVal = newValue;
- } else {
- if(settings.preventCrossover && module.is.range()) {
- newValue = Math.max(module.thumbVal, newValue);
- }
- module.secondThumbVal = newValue;
- }
- value = Math.abs(module.thumbVal - module.secondThumbVal);
- }
- module.update.position(newValue);
- module.debug('Setting slider value to ' + value);
- if(typeof callback === 'function') {
- callback(value, module.thumbVal, module.secondThumbVal);
- }
- },
- position: function(newValue, $element) {
- var
- newPos = module.handleNewValuePosition(newValue),
- $targetThumb = $element != undefined ? $element : $currThumb,
- thumbVal = module.thumbVal || module.get.min(),
- secondThumbVal = module.secondThumbVal || module.get.min()
- ;
- if(module.is.range()) {
- if(!$targetThumb.hasClass('second')) {
- position = newPos;
- thumbVal = newValue;
- } else {
- secondPos = newPos;
- secondThumbVal = newValue;
- }
- } else {
- position = newPos;
- thumbVal = newValue;
- }
- var
- trackPosValue,
- thumbPosValue,
- min = module.get.min(),
- max = module.get.max(),
- thumbPosPercent = 100 * (newValue - min) / (max - min),
- trackStartPosPercent = 100 * (Math.min(thumbVal, secondThumbVal) - min) / (max - min),
- trackEndPosPercent = 100 * (1 - (Math.max(thumbVal, secondThumbVal) - min) / (max - min))
- ;
- if (module.is.vertical()) {
- if (module.is.reversed()) {
- thumbPosValue = {bottom: 'calc(' + thumbPosPercent + '% - ' + offset + 'px)', top: 'auto'};
- trackPosValue = {bottom: trackStartPosPercent + '%', top: trackEndPosPercent + '%'};
- }
- else {
- thumbPosValue = {top: 'calc(' + thumbPosPercent + '% - ' + offset + 'px)', bottom: 'auto'};
- trackPosValue = {top: trackStartPosPercent + '%', bottom: trackEndPosPercent + '%'};
- }
- } else {
- if (module.is.reversed()) {
- thumbPosValue = {right: 'calc(' + thumbPosPercent + '% - ' + offset + 'px)', left: 'auto'};
- trackPosValue = {right: trackStartPosPercent + '%', left: trackEndPosPercent + '%'};
- }
- else {
- thumbPosValue = {left: 'calc(' + thumbPosPercent + '% - ' + offset + 'px)', right: 'auto'};
- trackPosValue = {left: trackStartPosPercent + '%', right: trackEndPosPercent + '%'};
- }
- }
- $targetThumb.css(thumbPosValue);
- $trackFill.css(trackPosValue);
- module.debug('Setting slider position to ' + newPos);
- },
- labelPosition: function (ratio, $label) {
- var
- startMargin = module.get.trackStartMargin(),
- endMargin = module.get.trackEndMargin(),
- posDir =
- module.is.vertical()
- ?
- module.is.reversed() ? 'bottom' : 'top'
- :
- module.is.reversed() ? 'right' : 'left',
- startMarginMod = module.is.reversed() && !module.is.vertical() ? ' - ' : ' + '
- ;
- var position = '(100% - ' + startMargin + ' - ' + endMargin + ') * ' + ratio;
- $label.css(posDir, 'calc(' + position + startMarginMod + startMargin + ')');
- }
- },
-
- goto: {
- max: function() {
- module.set.value(module.get.max());
- },
- min: function() {
- module.set.value(module.get.min());
- },
- },
-
- read: {
- metadata: function() {
- var
- data = {
- thumbVal : $module.data(metadata.thumbVal),
- secondThumbVal : $module.data(metadata.secondThumbVal)
- }
- ;
- if(data.thumbVal) {
- if(module.is.range() && data.secondThumbVal) {
- module.debug('Current value set from metadata', data.thumbVal, data.secondThumbVal);
- module.set.rangeValue(data.thumbVal, data.secondThumbVal);
- } else {
- module.debug('Current value set from metadata', data.thumbVal);
- module.set.value(data.thumbVal);
- }
- }
- },
- settings: function() {
- if(settings.start !== false) {
- if(module.is.range()) {
- module.debug('Start position set from settings', settings.start, settings.end);
- module.set.rangeValue(settings.start, settings.end);
- } else {
- module.debug('Start position set from settings', settings.start);
- module.set.value(settings.start);
- }
- }
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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();
- }
- module.invoke(query);
- }
- else {
- if(instance !== undefined) {
- instance.invoke('destroy');
- }
- module.initialize();
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-
-};
-
-$.fn.slider.settings = {
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- name : 'Slider',
- namespace : 'slider',
-
- error : {
- method : 'The method you called is not defined.',
- notrange : 'This slider is not a range slider'
- },
-
- metadata: {
- thumbVal : 'thumbVal',
- secondThumbVal : 'secondThumbVal'
- },
-
- min : 0,
- max : 20,
- step : 1,
- start : 0,
- end : 20,
- labelType : 'number',
- showLabelTicks : false,
- smooth : false,
- autoAdjustLabels : true,
- labelDistance : 100,
- preventCrossover : true,
- fireOnInit : false,
- interpretLabel : false,
-
- //the decimal place to round to if step is undefined
- decimalPlaces : 2,
-
- // page up/down multiplier. How many more times the steps to take on page up/down press
- pageMultiplier : 2,
-
- selector: {
-
- },
-
- className : {
- reversed : 'reversed',
- disabled : 'disabled',
- labeled : 'labeled',
- ticked : 'ticked',
- vertical : 'vertical',
- range : 'range',
- smooth : 'smooth'
- },
-
- keys : {
- pageUp : 33,
- pageDown : 34,
- leftArrow : 37,
- upArrow : 38,
- rightArrow : 39,
- downArrow : 40
- },
-
- labelTypes : {
- number : 'number',
- letter : 'letter'
- },
-
- onChange : function(value, thumbVal, secondThumbVal){},
- onMove : function(value, thumbVal, secondThumbVal){},
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/slider.less b/semantic/src/definitions/modules/slider.less
deleted file mode 100644
index 7862859..0000000
--- a/semantic/src/definitions/modules/slider.less
+++ /dev/null
@@ -1,417 +0,0 @@
- /*******************************
- Theme
- *******************************/
-
-@type : 'module';
-@element : 'slider';
-
-@import (multiple) '../../theme.config';
-
-.ui.slider:not(.vertical):not(.checkbox) {
- width: 100%;
- padding: @padding;
-}
-
-.ui.slider:not(.checkbox) {
- position: relative;
-}
-
-.ui.slider:not(.checkbox):focus {
- outline: 0;
-}
-
-.ui.slider .inner {
- position: relative;
- z-index: 2;
-}
-
-.ui.slider:not(.vertical) .inner {
- height: @height;
-}
-
-.ui.slider .inner:hover {
- cursor: @hoverPointer;
-}
-
-.ui.slider .inner .track {
- position: absolute;
- border-radius: @trackBorderRadius;
- background-color: @trackColor;
-}
-
-.ui.slider:not(.vertical) .inner .track {
- width: 100%;
- height: @trackHeight;
- top: @trackPositionTop;
- left: 0;
-}
-
-.ui.slider .inner .track-fill {
- position: absolute;
- border-radius: @trackFillBorderRadius;
- background-color: @trackFillColor;
-}
-
-.ui.slider:not(.vertical) .inner .track-fill {
- height: @trackFillHeight;
- top: @trackPositionTop;
- left: 0;
-}
-
-.ui.slider .inner .thumb {
- position: absolute;
- left: 0;
- top: 0;
- height: @thumbHeight;
- width: @thumbHeight;
- background: @thumbBackground;
- border-radius: @thumbBorderRadius;
- box-shadow: @thumbShadow;
- transition: @thumbTransition;
-}
-
-.ui.slider:not(.disabled) .inner .thumb:hover {
- cursor: @thumbHoverPointer;
- background: @thumbHoverBackground;
-}
-
-.ui.slider:not(.disabled):focus .inner .thumb {
- background: @thumbHoverBackground;
-}
-
-
-/*******************************
- States
-*******************************/
-
-& when (@variationSliderDisabled) {
- /*--------------
- Disabled
- ---------------*/
-
- .ui.disabled.slider:not(.checkbox) {
- opacity: @disabledOpactiy;
- }
-
- .ui.disabled.slider .inner:hover {
- cursor: auto;
- }
-
- .ui.disabled.slider .inner .track-fill {
- background: @disabledTrackFillColor;
- }
-}
-
-& when (@variationSliderReversed) {
- /*--------------
- Reversed
- ---------------*/
-
- .ui.reversed.slider .inner .track-fill {
- left: auto;
- right: 0;
- }
-
- .ui.reversed.slider:not(.vertical) .inner .thumb {
- left: auto;
- right: 0;
- }
-
- .ui.reversed.vertical.slider .inner .thumb {
- left: @thumbVerticalSliderOffset;
- }
-
- & when (@variationSliderLabeled) {
- .ui.labeled.reversed.slider > .labels .label {
- transform: translate(-100%, -100%);
- }
- }
-}
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationSliderVertical) {
- /*--------------
- Vertical
- ---------------*/
-
- .ui.vertical.slider {
- height: 100%;
- width: @height;
- padding: @verticalPadding;
- }
-
- .ui.vertical.slider .inner {
- height: 100%;
- }
-
- .ui.vertical.slider .inner .track {
- height: 100%;
- width: @trackHeight;
- left: @trackPositionTop;
- top: 0;
- }
-
- .ui.vertical.slider .inner .track-fill {
- width: @trackFillHeight;
- left: @trackPositionTop;
- top: 0;
- }
- & when (@variationSliderReversed) {
- /* Vertical Reversed */
- .ui.vertical.reversed.slider .inner .thumb {
- top: auto;
- bottom: 0;
- }
-
- .ui.vertical.reversed.slider .inner .track-fill {
- top: auto;
- bottom: 0;
- }
- }
-}
-
-& when (@variationSliderLabeled) {
- /*--------------
- Labeled
- ---------------*/
-
- .ui.labeled.slider > .labels {
- height: @labelHeight;
- width: auto;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- }
-
- .ui.labeled.slider:not(.vertical) > .labels {
- transform: translateY(-50%);
- }
-
- .ui.labeled.slider > .labels .label {
- display: inline-flex;
- padding: @labelPadding;
- position: absolute;
- transform: translate(-50%, -100%);
- white-space: nowrap;
- }
-
- .ui.bottom.aligned.labeled.slider > .labels .label {
- transform: translate(-50%, 100%);
- }
- & when (@variationSliderTicked) {
- .ui.labeled.ticked.slider > .labels .label:after {
- content: ' ';
- height: @labelHeight;
- width: @labelWidth;
- background: @labelColor;
- position: absolute;
- top: 100%;
- left: 50%;
- }
- .ui.bottom.aligned.labeled.ticked.slider > .labels .label:after {
- top: -100%;
- }
- .ui.labeled.ticked.slider > .labels .halftick.label:after {
- height: @labelHeight / 2;
- }
- }
-
- & when (@variationSliderVertical) {
- /* Vertical Labels */
-
- .ui.labeled.vertical.slider > .labels {
- width: @labelHeight;
- height: auto;
- left: 50%;
- top: 0;
- bottom: 0;
- transform: translateX(-50%);
- }
-
- .ui.labeled.vertical.slider > .labels .label {
- transform: translate(-100%, -50%);
- }
-
- .ui.labeled.vertical.slider > .labels .label:after {
- width: @labelHeight;
- height: @labelWidth;
- left: 100%;
- top: 50%;
- }
- .ui.labeled.vertical.slider > .labels .halftick.label:after {
- width: @labelHeight / 2;
- height: @labelWidth;
- }
-
- & when (@variationSliderReversed) {
- /* Vertical Reversed Labels */
- .ui.labeled.vertical.reversed.slider > .labels .label {
- transform: translate(-100%, 50%);
- }
- }
- }
-}
-
-/*--------------
- Hover
----------------*/
-
-.ui.hover.slider .inner .thumb {
- opacity: @hoverVarOpacity;
- transition: @hoverOpacityTransition;
-}
-
-.ui.hover.slider:not(.disabled):hover .inner .thumb, .ui.hover.slider:not(.disabled):focus .inner .thumb {
- opacity: @hoverVarHoverOpacity;
-}
-
-
-& when (@variationSliderInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.slider .inner .track-fill {
- background-color: @invertedTrackFillColor;
- }
-
- .ui.inverted.slider .inner .track {
- background-color: @transparentWhite;
- }
-}
-
-/*--------------
- Colors
----------------*/
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
- @h: @colors[@@color][hover];
- @lh: @colors[@@color][lightHover];
-
- /* Standard */
- .ui.@{color}.slider .inner .track-fill {
- background-color: @c;
- }
- & when (@variationSliderInverted) {
- .ui.@{color}.inverted.slider .inner .track-fill {
- background-color: @l;
- }
- }
-
- & when (@variationSliderBasic) {
- /* Basic */
- .ui.@{color}.slider.basic .inner .thumb {
- background-color: @c;
- }
- .ui.@{color}.slider.basic .inner .thumb:hover,
- .ui.@{color}.slider.basic:focus .inner .thumb {
- background-color: @h;
- }
- & when (@variationSliderInverted) {
- /* Basic Inverted */
- .ui.@{color}.inverted.slider.basic .inner .thumb {
- background-color: @l;
- }
- .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
- .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
- background-color: @lh;
- }
- }
- }
-
-})
-
-& when (@variationSliderBasic) {
- /*--------------
- Basic
- ---------------*/
-
- /* Standard */
- .ui.slider.basic .inner .thumb {
- background-color: @trackFillColor;
- }
- .ui.slider.basic .inner .thumb:hover, .ui.slider.basic:focus .inner .thumb {
- background-color: @trackFillColorFocus;
- }
-
- & when (@variationSliderInverted) {
- /*--------------
- Basic Inverted
- ---------------*/
-
- /* Standard */
- .ui.inverted.slider.basic .inner .thumb {
- background-color: @invertedTrackFillColor;
- }
- .ui.inverted.slider.basic .inner .thumb:hover, .ui.inverted.slider.basic:focus .inner .thumb {
- background-color: @invertedTrackFillColorFocus;
- }
- }
-}
-
-
-/*--------------
- Sizing
----------------*/
-
-& when not (@variationSliderSizes = false) {
- each(@variationSliderSizes, {
- @h: @{value}Height;
- @th: @{value}TrackHeight;
- @tp: @{value}TrackPositionTop;
- @lh: @{value}LabelHeight;
- .ui.slider.@{value} .inner .thumb {
- height: @@h;
- width: @@h;
- }
- .ui.slider.@{value}:not(.vertical) .inner {
- height: @@h;
- }
- .ui.slider.@{value}:not(.vertical) .inner .track,
- .ui.slider.@{value}:not(.vertical) .inner .track-fill {
- height: @@th;
- top: @@tp;
- }
- & when (@variationSliderLabeled) {
- .ui.@{value}.labeled.slider:not(.vertical) > .labels,
- .ui.@{value}.labeled.slider:not(.vertical) > .labels .label:after {
- height: @@lh;
- }
- .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label:after {
- height: @@lh / 2;
- }
- }
- & when (@variationSliderVertical) {
- /* Small Vertical */
- .ui.slider.@{value}.vertical .inner {
- width: @@h;
- }
- .ui.slider.@{value}.vertical .inner .track,
- .ui.slider.@{value}.vertical .inner .track-fill {
- width: @@th;
- left: @@tp;
- }
- & when (@variationSliderLabeled) {
- .ui.@{value}.labeled.vertical.slider> .labels,
- .ui.@{value}.labeled.vertical.slider> .labels .label:after {
- width: @@lh;
- }
- .ui.@{value}.labeled.vertical.slider> .labels .halftick.label:after {
- width: @@lh / 2;
- }
- }
- }
- })
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/sticky.js b/semantic/src/definitions/modules/sticky.js
deleted file mode 100644
index 561213f..0000000
--- a/semantic/src/definitions/modules/sticky.js
+++ /dev/null
@@ -1,957 +0,0 @@
-/*!
- * # Fomantic-UI - Sticky
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.sticky = 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
- ;
-
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.sticky.settings, parameters)
- : $.extend({}, $.fn.sticky.settings),
-
- className = settings.className,
- namespace = settings.namespace,
- error = settings.error,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
-
- $module = $(this),
- $window = $(window),
- $scroll = $(settings.scrollContext),
- $container,
- $context,
-
- instance = $module.data(moduleNamespace),
-
- requestAnimationFrame = window.requestAnimationFrame
- || window.mozRequestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.msRequestAnimationFrame
- || function(callback) { setTimeout(callback, 0); },
-
- element = this,
-
- documentObserver,
- observer,
- module
- ;
-
- module = {
-
- initialize: function() {
-
- module.determineContainer();
- module.determineContext();
- module.verbose('Initializing sticky', settings, $container);
-
- module.save.positions();
- module.checkErrors();
- module.bind.events();
-
- if(settings.observeChanges) {
- module.observeChanges();
- }
- module.instantiate();
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous instance');
- module.reset();
- if(documentObserver) {
- documentObserver.disconnect();
- }
- if(observer) {
- observer.disconnect();
- }
- $window
- .off('load' + eventNamespace, module.event.load)
- .off('resize' + eventNamespace, module.event.resize)
- ;
- $scroll
- .off('scrollchange' + eventNamespace, module.event.scrollchange)
- ;
- $module.removeData(moduleNamespace);
- },
-
- observeChanges: function() {
- if('MutationObserver' in window) {
- documentObserver = new MutationObserver(module.event.documentChanged);
- observer = new MutationObserver(module.event.changed);
- documentObserver.observe(document, {
- childList : true,
- subtree : true
- });
- observer.observe(element, {
- childList : true,
- subtree : true
- });
- observer.observe($context[0], {
- childList : true,
- subtree : true
- });
- module.debug('Setting up mutation observer', observer);
- }
- },
-
- determineContainer: function() {
- if(settings.container) {
- $container = $(settings.container);
- }
- else {
- $container = $module.offsetParent();
- }
- },
-
- determineContext: function() {
- if(settings.context) {
- $context = $(settings.context);
- }
- else {
- $context = $container;
- }
- if($context.length === 0) {
- module.error(error.invalidContext, settings.context, $module);
- return;
- }
- },
-
- checkErrors: function() {
- if( module.is.hidden() ) {
- module.error(error.visible, $module);
- }
- if(module.cache.element.height > module.cache.context.height) {
- module.reset();
- module.error(error.elementSize, $module);
- return;
- }
- },
-
- bind: {
- events: function() {
- $window
- .on('load' + eventNamespace, module.event.load)
- .on('resize' + eventNamespace, module.event.resize)
- ;
- // pub/sub pattern
- $scroll
- .off('scroll' + eventNamespace)
- .on('scroll' + eventNamespace, module.event.scroll)
- .on('scrollchange' + eventNamespace, module.event.scrollchange)
- ;
- }
- },
-
- event: {
- changed: function(mutations) {
- clearTimeout(module.timer);
- module.timer = setTimeout(function() {
- module.verbose('DOM tree modified, updating sticky menu', mutations);
- module.refresh();
- }, 100);
- },
- documentChanged: 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();
- }
- });
- }
- });
- },
- load: function() {
- module.verbose('Page contents finished loading');
- requestAnimationFrame(module.refresh);
- },
- resize: function() {
- module.verbose('Window resized');
- requestAnimationFrame(module.refresh);
- },
- scroll: function() {
- requestAnimationFrame(function() {
- $scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
- });
- },
- scrollchange: function(event, scrollPosition) {
- module.stick(scrollPosition);
- settings.onScroll.call(element);
- }
- },
-
- refresh: function(hardRefresh) {
- module.reset();
- if(!settings.context) {
- module.determineContext();
- }
- if(hardRefresh) {
- module.determineContainer();
- }
- module.save.positions();
- module.stick();
- settings.onReposition.call(element);
- },
-
- supports: {
- sticky: function() {
- var
- $element = $('<div/>')
- ;
- $element.addClass(className.supported);
- return($element.css('position').match('sticky'));
- }
- },
-
- save: {
- lastScroll: function(scroll) {
- module.lastScroll = scroll;
- },
- elementScroll: function(scroll) {
- module.elementScroll = scroll;
- },
- positions: function() {
- var
- scrollContext = {
- height : $scroll.height()
- },
- element = {
- margin: {
- top : parseInt($module.css('margin-top'), 10),
- bottom : parseInt($module.css('margin-bottom'), 10),
- },
- offset : $module.offset(),
- width : $module.outerWidth(),
- height : $module.outerHeight()
- },
- context = {
- offset : $context.offset(),
- height : $context.outerHeight()
- }
- ;
- if( !module.is.standardScroll() ) {
- module.debug('Non-standard scroll. Removing scroll offset from element offset');
-
- scrollContext.top = $scroll.scrollTop();
- scrollContext.left = $scroll.scrollLeft();
-
- element.offset.top += scrollContext.top;
- context.offset.top += scrollContext.top;
- element.offset.left += scrollContext.left;
- context.offset.left += scrollContext.left;
- }
- module.cache = {
- fits : ( (element.height + settings.offset) <= scrollContext.height),
- sameHeight : (element.height == context.height),
- scrollContext : {
- height : scrollContext.height
- },
- element: {
- margin : element.margin,
- top : element.offset.top - element.margin.top,
- left : element.offset.left,
- width : element.width,
- height : element.height,
- bottom : element.offset.top + element.height
- },
- context: {
- top : context.offset.top,
- height : context.height,
- bottom : context.offset.top + context.height
- }
- };
- module.set.containerSize();
-
- module.stick();
- module.debug('Caching element positions', module.cache);
- }
- },
-
- get: {
- direction: function(scroll) {
- var
- direction = 'down'
- ;
- scroll = scroll || $scroll.scrollTop();
- if(module.lastScroll !== undefined) {
- if(module.lastScroll < scroll) {
- direction = 'down';
- }
- else if(module.lastScroll > scroll) {
- direction = 'up';
- }
- }
- return direction;
- },
- scrollChange: function(scroll) {
- scroll = scroll || $scroll.scrollTop();
- return (module.lastScroll)
- ? (scroll - module.lastScroll)
- : 0
- ;
- },
- currentElementScroll: function() {
- if(module.elementScroll) {
- return module.elementScroll;
- }
- return ( module.is.top() )
- ? Math.abs(parseInt($module.css('top'), 10)) || 0
- : Math.abs(parseInt($module.css('bottom'), 10)) || 0
- ;
- },
-
- elementScroll: function(scroll) {
- scroll = scroll || $scroll.scrollTop();
- var
- element = module.cache.element,
- scrollContext = module.cache.scrollContext,
- delta = module.get.scrollChange(scroll),
- maxScroll = (element.height - scrollContext.height + settings.offset),
- elementScroll = module.get.currentElementScroll(),
- possibleScroll = (elementScroll + delta)
- ;
- if(module.cache.fits || possibleScroll < 0) {
- elementScroll = 0;
- }
- else if(possibleScroll > maxScroll ) {
- elementScroll = maxScroll;
- }
- else {
- elementScroll = possibleScroll;
- }
- return elementScroll;
- }
- },
-
- remove: {
- lastScroll: function() {
- delete module.lastScroll;
- },
- elementScroll: function(scroll) {
- delete module.elementScroll;
- },
- minimumSize: function() {
- $container
- .css('min-height', '')
- ;
- },
- offset: function() {
- $module.css('margin-top', '');
- }
- },
-
- set: {
- offset: function() {
- module.verbose('Setting offset on element', settings.offset);
- $module
- .css('margin-top', settings.offset)
- ;
- },
- containerSize: function() {
- var
- tagName = $container.get(0).tagName
- ;
- if(tagName === 'HTML' || tagName == 'body') {
- // this can trigger for too many reasons
- //module.error(error.container, tagName, $module);
- module.determineContainer();
- }
- else {
- if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
- module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
- $container.css({
- height: module.cache.context.height
- });
- }
- }
- },
- minimumSize: function() {
- var
- element = module.cache.element
- ;
- $container
- .css('min-height', element.height)
- ;
- },
- scroll: function(scroll) {
- module.debug('Setting scroll on element', scroll);
- if(module.elementScroll == scroll) {
- return;
- }
- if( module.is.top() ) {
- $module
- .css('bottom', '')
- .css('top', -scroll)
- ;
- }
- if( module.is.bottom() ) {
- $module
- .css('top', '')
- .css('bottom', scroll)
- ;
- }
- },
- size: function() {
- if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
- element.style.setProperty('width', module.cache.element.width + 'px', 'important');
- element.style.setProperty('height', module.cache.element.height + 'px', 'important');
- }
- }
- },
-
- is: {
- standardScroll: function() {
- return ($scroll[0] == window);
- },
- top: function() {
- return $module.hasClass(className.top);
- },
- bottom: function() {
- return $module.hasClass(className.bottom);
- },
- initialPosition: function() {
- return (!module.is.fixed() && !module.is.bound());
- },
- hidden: function() {
- return (!$module.is(':visible'));
- },
- bound: function() {
- return $module.hasClass(className.bound);
- },
- fixed: function() {
- return $module.hasClass(className.fixed);
- }
- },
-
- stick: function(scroll) {
- var
- cachedPosition = scroll || $scroll.scrollTop(),
- cache = module.cache,
- fits = cache.fits,
- sameHeight = cache.sameHeight,
- element = cache.element,
- scrollContext = cache.scrollContext,
- context = cache.context,
- offset = (module.is.bottom() && settings.pushing)
- ? settings.bottomOffset
- : settings.offset,
- scroll = {
- top : cachedPosition + offset,
- bottom : cachedPosition + offset + scrollContext.height
- },
- elementScroll = (fits)
- ? 0
- : module.get.elementScroll(scroll.top),
-
- // shorthand
- doesntFit = !fits,
- elementVisible = (element.height !== 0)
- ;
- if(elementVisible && !sameHeight) {
-
- if( module.is.initialPosition() ) {
- if(scroll.top >= context.bottom) {
- module.debug('Initial element position is bottom of container');
- module.bindBottom();
- }
- else if(scroll.top > element.top) {
- if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
- module.debug('Initial element position is bottom of container');
- module.bindBottom();
- }
- else {
- module.debug('Initial element position is fixed');
- module.fixTop();
- }
- }
-
- }
- else if( module.is.fixed() ) {
-
- // currently fixed top
- if( module.is.top() ) {
- if( scroll.top <= element.top ) {
- module.debug('Fixed element reached top of container');
- module.setInitialPosition();
- }
- else if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
- module.debug('Fixed element reached bottom of container');
- module.bindBottom();
- }
- // scroll element if larger than screen
- else if(doesntFit) {
- module.set.scroll(elementScroll);
- module.save.lastScroll(scroll.top);
- module.save.elementScroll(elementScroll);
- }
- }
-
- // currently fixed bottom
- else if(module.is.bottom() ) {
-
- // top edge
- if( (scroll.bottom - element.height) <= element.top) {
- module.debug('Bottom fixed rail has reached top of container');
- module.setInitialPosition();
- }
- // bottom edge
- else if(scroll.bottom >= context.bottom) {
- module.debug('Bottom fixed rail has reached bottom of container');
- module.bindBottom();
- }
- // scroll element if larger than screen
- else if(doesntFit) {
- module.set.scroll(elementScroll);
- module.save.lastScroll(scroll.top);
- module.save.elementScroll(elementScroll);
- }
-
- }
- }
- else if( module.is.bottom() ) {
- if( scroll.top <= element.top ) {
- module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button');
- module.setInitialPosition();
- }
- else {
- if(settings.pushing) {
- if(module.is.bound() && scroll.bottom <= context.bottom ) {
- module.debug('Fixing bottom attached element to bottom of browser.');
- module.fixBottom();
- }
- }
- else {
- if(module.is.bound() && (scroll.top <= context.bottom - element.height) ) {
- module.debug('Fixing bottom attached element to top of browser.');
- module.fixTop();
- }
- }
- }
- }
- }
- },
-
- bindTop: function() {
- module.debug('Binding element to top of parent container');
- module.remove.offset();
- $module
- .css({
- left : '',
- top : '',
- marginBottom : ''
- })
- .removeClass(className.fixed)
- .removeClass(className.bottom)
- .addClass(className.bound)
- .addClass(className.top)
- ;
- settings.onTop.call(element);
- settings.onUnstick.call(element);
- },
- bindBottom: function() {
- module.debug('Binding element to bottom of parent container');
- module.remove.offset();
- $module
- .css({
- left : '',
- top : ''
- })
- .removeClass(className.fixed)
- .removeClass(className.top)
- .addClass(className.bound)
- .addClass(className.bottom)
- ;
- settings.onBottom.call(element);
- settings.onUnstick.call(element);
- },
-
- setInitialPosition: function() {
- module.debug('Returning to initial position');
- module.unfix();
- module.unbind();
- },
-
-
- fixTop: function() {
- module.debug('Fixing element to top of page');
- if(settings.setSize) {
- module.set.size();
- }
- module.set.minimumSize();
- module.set.offset();
- $module
- .css({
- left : module.cache.element.left,
- bottom : '',
- marginBottom : ''
- })
- .removeClass(className.bound)
- .removeClass(className.bottom)
- .addClass(className.fixed)
- .addClass(className.top)
- ;
- settings.onStick.call(element);
- },
-
- fixBottom: function() {
- module.debug('Sticking element to bottom of page');
- if(settings.setSize) {
- module.set.size();
- }
- module.set.minimumSize();
- module.set.offset();
- $module
- .css({
- left : module.cache.element.left,
- bottom : '',
- marginBottom : ''
- })
- .removeClass(className.bound)
- .removeClass(className.top)
- .addClass(className.fixed)
- .addClass(className.bottom)
- ;
- settings.onStick.call(element);
- },
-
- unbind: function() {
- if( module.is.bound() ) {
- module.debug('Removing container bound position on element');
- module.remove.offset();
- $module
- .removeClass(className.bound)
- .removeClass(className.top)
- .removeClass(className.bottom)
- ;
- }
- },
-
- unfix: function() {
- if( module.is.fixed() ) {
- module.debug('Removing fixed position on element');
- module.remove.minimumSize();
- module.remove.offset();
- $module
- .removeClass(className.fixed)
- .removeClass(className.top)
- .removeClass(className.bottom)
- ;
- settings.onUnstick.call(element);
- }
- },
-
- reset: function() {
- module.debug('Resetting elements position');
- module.unbind();
- module.unfix();
- module.resetCSS();
- module.remove.offset();
- module.remove.lastScroll();
- },
-
- resetCSS: function() {
- $module
- .css({
- width : '',
- height : ''
- })
- ;
- $container
- .css({
- height: ''
- })
- ;
- },
-
- 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, 0);
- },
- 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 {
- return false;
- }
- });
- }
- if ( $.isFunction( found ) ) {
- response = found.apply(context, passedArguments);
- }
- else if(found !== undefined) {
- response = found;
- }
- if(Array.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.sticky.settings = {
-
- name : 'Sticky',
- namespace : 'sticky',
-
- silent : false,
- debug : false,
- verbose : true,
- performance : true,
-
- // whether to stick in the opposite direction on scroll up
- pushing : false,
-
- context : false,
- container : false,
-
- // Context to watch scroll events
- scrollContext : window,
-
- // Offset to adjust scroll
- offset : 0,
-
- // Offset to adjust scroll when attached to bottom of screen
- bottomOffset : 0,
-
- // will only set container height if difference between context and container is larger than this number
- jitter : 5,
-
- // set width of sticky element when it is fixed to page (used to make sure 100% width is maintained if no fixed size set)
- setSize : true,
-
- // Whether to automatically observe changes with Mutation Observers
- observeChanges : false,
-
- // Called when position is recalculated
- onReposition : function(){},
-
- // Called on each scroll
- onScroll : function(){},
-
- // Called when element is stuck to viewport
- onStick : function(){},
-
- // Called when element is unstuck from viewport
- onUnstick : function(){},
-
- // Called when element reaches top of context
- onTop : function(){},
-
- // Called when element reaches bottom of context
- onBottom : function(){},
-
- error : {
- container : 'Sticky element must be inside a relative container',
- visible : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',
- method : 'The method you called is not defined.',
- invalidContext : 'Context specified does not exist',
- elementSize : 'Sticky element is larger than its container, cannot create sticky.'
- },
-
- className : {
- bound : 'bound',
- fixed : 'fixed',
- supported : 'native',
- top : 'top',
- bottom : 'bottom'
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/sticky.less b/semantic/src/definitions/modules/sticky.less
deleted file mode 100644
index 2dabc6d..0000000
--- a/semantic/src/definitions/modules/sticky.less
+++ /dev/null
@@ -1,74 +0,0 @@
-/*!
- * # Fomantic-UI - Sticky
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'sticky';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Sticky
-*******************************/
-
-.ui.sticky {
- position: static;
- transition: @transition;
- z-index: @zIndex;
-}
-
-/*******************************
- States
-*******************************/
-
-/* Bound */
-.ui.sticky.bound {
- position: absolute;
- left: auto;
- right: auto;
-}
-
-/* Fixed */
-.ui.sticky.fixed {
- position: fixed;
- left: auto;
- right: auto;
-}
-
-/* Bound/Fixed Position */
-.ui.sticky.bound.top,
-.ui.sticky.fixed.top {
- top: 0;
- bottom: auto;
-}
-.ui.sticky.bound.bottom,
-.ui.sticky.fixed.bottom {
- top: auto;
- bottom: 0;
-}
-
-
-/*******************************
- Types
-*******************************/
-
-.ui.native.sticky {
- position: -webkit-sticky;
- position: -moz-sticky;
- position: -ms-sticky;
- position: -o-sticky;
- position: sticky;
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/tab.js b/semantic/src/definitions/modules/tab.js
deleted file mode 100644
index eae3cfc..0000000
--- a/semantic/src/definitions/modules/tab.js
+++ /dev/null
@@ -1,1001 +0,0 @@
-/*!
- * # Fomantic-UI - Tab
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isWindow = $.isWindow || function(obj) {
- return obj != null && obj === obj.window;
-};
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.tab = function(parameters) {
-
- var
- // use window context if none specified
- $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),
-
- initializedHistory = false,
- returnedValue
- ;
-
- $allModules
- .each(function() {
- var
-
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.tab.settings, parameters)
- : $.extend({}, $.fn.tab.settings),
-
- className = settings.className,
- metadata = settings.metadata,
- selector = settings.selector,
- error = settings.error,
- regExp = settings.regExp,
-
- eventNamespace = '.' + settings.namespace,
- moduleNamespace = 'module-' + settings.namespace,
-
- $module = $(this),
- $context,
- $tabs,
-
- cache = {},
- firstLoad = true,
- recursionDepth = 0,
- element = this,
- instance = $module.data(moduleNamespace),
-
- activeTabPath,
- parameterArray,
- module,
-
- historyEvent
-
- ;
-
- module = {
-
- initialize: function() {
- module.debug('Initializing tab menu item', $module);
- module.fix.callbacks();
- module.determineTabs();
-
- module.debug('Determining tabs', settings.context, $tabs);
- // set up automatic routing
- if(settings.auto) {
- module.set.auto();
- }
- module.bind.events();
-
- if(settings.history && !initializedHistory) {
- module.initializeHistory();
- initializedHistory = true;
- }
-
- if(settings.autoTabActivation && instance === undefined && module.determine.activeTab() == null) {
- module.debug('No active tab detected, setting first tab active', module.get.initialPath());
- module.changeTab(settings.autoTabActivation === true ? module.get.initialPath() : settings.autoTabActivation);
- };
-
- module.instantiate();
- },
-
- instantiate: function () {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, module)
- ;
- },
-
- destroy: function() {
- module.debug('Destroying tabs', $module);
- $module
- .removeData(moduleNamespace)
- .off(eventNamespace)
- ;
- },
-
- bind: {
- events: function() {
- // if using $.tab don't add events
- if( !$.isWindow( element ) ) {
- module.debug('Attaching tab activation events to element', $module);
- $module
- .on('click' + eventNamespace, module.event.click)
- ;
- }
- }
- },
-
- determineTabs: function() {
- var
- $reference
- ;
-
- // determine tab context
- if(settings.context === 'parent') {
- if($module.closest(selector.ui).length > 0) {
- $reference = $module.closest(selector.ui);
- module.verbose('Using closest UI element as parent', $reference);
- }
- else {
- $reference = $module;
- }
- $context = $reference.parent();
- module.verbose('Determined parent element for creating context', $context);
- }
- else if(settings.context) {
- $context = $(settings.context);
- module.verbose('Using selector for tab context', settings.context, $context);
- }
- else {
- $context = $('body');
- }
- // find tabs
- if(settings.childrenOnly) {
- $tabs = $context.children(selector.tabs);
- module.debug('Searching tab context children for tabs', $context, $tabs);
- }
- else {
- $tabs = $context.find(selector.tabs);
- module.debug('Searching tab context for tabs', $context, $tabs);
- }
- },
-
- fix: {
- callbacks: function() {
- if( $.isPlainObject(parameters) && (parameters.onTabLoad || parameters.onTabInit) ) {
- if(parameters.onTabLoad) {
- parameters.onLoad = parameters.onTabLoad;
- delete parameters.onTabLoad;
- module.error(error.legacyLoad, parameters.onLoad);
- }
- if(parameters.onTabInit) {
- parameters.onFirstLoad = parameters.onTabInit;
- delete parameters.onTabInit;
- module.error(error.legacyInit, parameters.onFirstLoad);
- }
- settings = $.extend(true, {}, $.fn.tab.settings, parameters);
- }
- }
- },
-
- initializeHistory: function() {
- module.debug('Initializing page state');
- if( $.address === undefined ) {
- module.error(error.state);
- return false;
- }
- else {
- if(settings.historyType == 'state') {
- module.debug('Using HTML5 to manage state');
- if(settings.path !== false) {
- $.address
- .history(true)
- .state(settings.path)
- ;
- }
- else {
- module.error(error.path);
- return false;
- }
- }
- $.address
- .bind('change', module.event.history.change)
- ;
- }
- },
-
- event: {
- click: function(event) {
- var
- tabPath = $(this).data(metadata.tab)
- ;
- if(tabPath !== undefined) {
- if(settings.history) {
- module.verbose('Updating page state', event);
- $.address.value(tabPath);
- }
- else {
- module.verbose('Changing tab', event);
- module.changeTab(tabPath);
- }
- event.preventDefault();
- }
- else {
- module.debug('No tab specified');
- }
- },
- history: {
- change: function(event) {
- var
- tabPath = event.pathNames.join('/') || module.get.initialPath(),
- pageTitle = settings.templates.determineTitle(tabPath) || false
- ;
- module.performance.display();
- module.debug('History change event', tabPath, event);
- historyEvent = event;
- if(tabPath !== undefined) {
- module.changeTab(tabPath);
- }
- if(pageTitle) {
- $.address.title(pageTitle);
- }
- }
- }
- },
-
- refresh: function() {
- if(activeTabPath) {
- module.debug('Refreshing tab', activeTabPath);
- module.changeTab(activeTabPath);
- }
- },
-
- cache: {
-
- read: function(cacheKey) {
- return (cacheKey !== undefined)
- ? cache[cacheKey]
- : false
- ;
- },
- add: function(cacheKey, content) {
- cacheKey = cacheKey || activeTabPath;
- module.debug('Adding cached content for', cacheKey);
- cache[cacheKey] = content;
- },
- remove: function(cacheKey) {
- cacheKey = cacheKey || activeTabPath;
- module.debug('Removing cached content for', cacheKey);
- delete cache[cacheKey];
- }
- },
-
- escape: {
- string: function(text) {
- text = String(text);
- return text.replace(regExp.escape, '\\$&');
- }
- },
-
- set: {
- auto: function() {
- var
- url = (typeof settings.path == 'string')
- ? settings.path.replace(/\/$/, '') + '/{$tab}'
- : '/{$tab}'
- ;
- module.verbose('Setting up automatic tab retrieval from server', url);
- if($.isPlainObject(settings.apiSettings)) {
- settings.apiSettings.url = url;
- }
- else {
- settings.apiSettings = {
- url: url
- };
- }
- },
- loading: function(tabPath) {
- var
- $tab = module.get.tabElement(tabPath),
- isLoading = $tab.hasClass(className.loading)
- ;
- if(!isLoading) {
- module.verbose('Setting loading state for', $tab);
- $tab
- .addClass(className.loading)
- .siblings($tabs)
- .removeClass(className.active + ' ' + className.loading)
- ;
- if($tab.length > 0) {
- settings.onRequest.call($tab[0], tabPath);
- }
- }
- },
- state: function(state) {
- $.address.value(state);
- }
- },
-
- changeTab: function(tabPath) {
- var
- pushStateAvailable = (window.history && window.history.pushState),
- shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad),
- remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ),
- // only add default path if not remote content
- pathArray = (remoteContent && !shouldIgnoreLoad)
- ? module.utilities.pathToArray(tabPath)
- : module.get.defaultPathArray(tabPath)
- ;
- tabPath = module.utilities.arrayToPath(pathArray);
- $.each(pathArray, function(index, tab) {
- var
- currentPathArray = pathArray.slice(0, index + 1),
- currentPath = module.utilities.arrayToPath(currentPathArray),
-
- isTab = module.is.tab(currentPath),
- isLastIndex = (index + 1 == pathArray.length),
-
- $tab = module.get.tabElement(currentPath),
- $anchor,
- nextPathArray,
- nextPath,
- isLastTab
- ;
- module.verbose('Looking for tab', tab);
- if(isTab) {
- module.verbose('Tab was found', tab);
- // scope up
- activeTabPath = currentPath;
- parameterArray = module.utilities.filterArray(pathArray, currentPathArray);
-
- if(isLastIndex) {
- isLastTab = true;
- }
- else {
- nextPathArray = pathArray.slice(0, index + 2);
- nextPath = module.utilities.arrayToPath(nextPathArray);
- isLastTab = ( !module.is.tab(nextPath) );
- if(isLastTab) {
- module.verbose('Tab parameters found', nextPathArray);
- }
- }
- if(isLastTab && remoteContent) {
- if(!shouldIgnoreLoad) {
- module.activate.navigation(currentPath);
- module.fetch.content(currentPath, tabPath);
- }
- else {
- module.debug('Ignoring remote content on first tab load', currentPath);
- firstLoad = false;
- module.cache.add(tabPath, $tab.html());
- module.activate.all(currentPath);
- settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
- settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
- }
- return false;
- }
- else {
- module.debug('Opened local tab', currentPath);
- module.activate.all(currentPath);
- if( !module.cache.read(currentPath) ) {
- module.cache.add(currentPath, true);
- module.debug('First time tab loaded calling tab init');
- settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
- }
- settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
- }
-
- }
- else if(tabPath.search('/') == -1 && tabPath !== '') {
- // look for in page anchor
- tabPath = module.escape.string(tabPath);
- $anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]');
- currentPath = $anchor.closest('[data-tab]').data(metadata.tab);
- $tab = module.get.tabElement(currentPath);
- // if anchor exists use parent tab
- if($anchor && $anchor.length > 0 && currentPath) {
- module.debug('Anchor link used, opening parent tab', $tab, $anchor);
- if( !$tab.hasClass(className.active) ) {
- setTimeout(function() {
- module.scrollTo($anchor);
- }, 0);
- }
- module.activate.all(currentPath);
- if( !module.cache.read(currentPath) ) {
- module.cache.add(currentPath, true);
- module.debug('First time tab loaded calling tab init');
- settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
- }
- settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
- return false;
- }
- }
- else {
- module.error(error.missingTab, $module, $context, currentPath);
- return false;
- }
- });
- },
-
- scrollTo: function($element) {
- var
- scrollOffset = ($element && $element.length > 0)
- ? $element.offset().top
- : false
- ;
- if(scrollOffset !== false) {
- module.debug('Forcing scroll to an in-page link in a hidden tab', scrollOffset, $element);
- $(document).scrollTop(scrollOffset);
- }
- },
-
- update: {
- content: function(tabPath, html, evaluateScripts) {
- var
- $tab = module.get.tabElement(tabPath),
- tab = $tab[0]
- ;
- evaluateScripts = (evaluateScripts !== undefined)
- ? evaluateScripts
- : settings.evaluateScripts
- ;
- if(typeof settings.cacheType == 'string' && settings.cacheType.toLowerCase() == 'dom' && typeof html !== 'string') {
- $tab
- .empty()
- .append($(html).clone(true))
- ;
- }
- else {
- if(evaluateScripts) {
- module.debug('Updating HTML and evaluating inline scripts', tabPath, html);
- $tab.html(html);
- }
- else {
- module.debug('Updating HTML', tabPath, html);
- tab.innerHTML = html;
- }
- }
- }
- },
-
- fetch: {
-
- content: function(tabPath, fullTabPath) {
- var
- $tab = module.get.tabElement(tabPath),
- apiSettings = {
- dataType : 'html',
- encodeParameters : false,
- on : 'now',
- cache : settings.alwaysRefresh,
- headers : {
- 'X-Remote': true
- },
- onSuccess : function(response) {
- if(settings.cacheType == 'response') {
- module.cache.add(fullTabPath, response);
- }
- module.update.content(tabPath, response);
- if(tabPath == activeTabPath) {
- module.debug('Content loaded', tabPath);
- module.activate.tab(tabPath);
- }
- else {
- module.debug('Content loaded in background', tabPath);
- }
- settings.onFirstLoad.call($tab[0], tabPath, parameterArray, historyEvent);
- settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
-
- if(settings.loadOnce) {
- module.cache.add(fullTabPath, true);
- }
- else if(typeof settings.cacheType == 'string' && settings.cacheType.toLowerCase() == 'dom' && $tab.children().length > 0) {
- setTimeout(function() {
- var
- $clone = $tab.children().clone(true)
- ;
- $clone = $clone.not('script');
- module.cache.add(fullTabPath, $clone);
- }, 0);
- }
- else {
- module.cache.add(fullTabPath, $tab.html());
- }
- },
- urlData: {
- tab: fullTabPath
- }
- },
- request = $tab.api('get request') || false,
- existingRequest = ( request && request.state() === 'pending' ),
- requestSettings,
- cachedContent
- ;
-
- fullTabPath = fullTabPath || tabPath;
- cachedContent = module.cache.read(fullTabPath);
-
-
- if(settings.cache && cachedContent) {
- module.activate.tab(tabPath);
- module.debug('Adding cached content', fullTabPath);
- if(!settings.loadOnce) {
- if(settings.evaluateScripts == 'once') {
- module.update.content(tabPath, cachedContent, false);
- }
- else {
- module.update.content(tabPath, cachedContent);
- }
- }
- settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
- }
- else if(existingRequest) {
- module.set.loading(tabPath);
- module.debug('Content is already loading', fullTabPath);
- }
- else if($.api !== undefined) {
- requestSettings = $.extend(true, {}, settings.apiSettings, apiSettings);
- module.debug('Retrieving remote content', fullTabPath, requestSettings);
- module.set.loading(tabPath);
- $tab.api(requestSettings);
- }
- else {
- module.error(error.api);
- }
- }
- },
-
- activate: {
- all: function(tabPath) {
- module.activate.tab(tabPath);
- module.activate.navigation(tabPath);
- },
- tab: function(tabPath) {
- var
- $tab = module.get.tabElement(tabPath),
- $deactiveTabs = (settings.deactivate == 'siblings')
- ? $tab.siblings($tabs)
- : $tabs.not($tab),
- isActive = $tab.hasClass(className.active)
- ;
- module.verbose('Showing tab content for', $tab);
- if(!isActive) {
- $tab
- .addClass(className.active)
- ;
- $deactiveTabs
- .removeClass(className.active + ' ' + className.loading)
- ;
- if($tab.length > 0) {
- settings.onVisible.call($tab[0], tabPath);
- }
- }
- },
- navigation: function(tabPath) {
- var
- $navigation = module.get.navElement(tabPath),
- $deactiveNavigation = (settings.deactivate == 'siblings')
- ? $navigation.siblings($allModules)
- : $allModules.not($navigation),
- isActive = $navigation.hasClass(className.active)
- ;
- module.verbose('Activating tab navigation for', $navigation, tabPath);
- if(!isActive) {
- $navigation
- .addClass(className.active)
- ;
- $deactiveNavigation
- .removeClass(className.active + ' ' + className.loading)
- ;
- }
- }
- },
-
- deactivate: {
- all: function() {
- module.deactivate.navigation();
- module.deactivate.tabs();
- },
- navigation: function() {
- $allModules
- .removeClass(className.active)
- ;
- },
- tabs: function() {
- $tabs
- .removeClass(className.active + ' ' + className.loading)
- ;
- }
- },
-
- is: {
- tab: function(tabName) {
- return (tabName !== undefined)
- ? ( module.get.tabElement(tabName).length > 0 )
- : false
- ;
- }
- },
-
- get: {
- initialPath: function() {
- return $allModules.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab);
- },
- path: function() {
- return $.address.value();
- },
- // adds default tabs to tab path
- defaultPathArray: function(tabPath) {
- return module.utilities.pathToArray( module.get.defaultPath(tabPath) );
- },
- defaultPath: function(tabPath) {
- var
- $defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + module.escape.string(tabPath) + '/"]').eq(0),
- defaultTab = $defaultNav.data(metadata.tab) || false
- ;
- if( defaultTab ) {
- module.debug('Found default tab', defaultTab);
- if(recursionDepth < settings.maxDepth) {
- recursionDepth++;
- return module.get.defaultPath(defaultTab);
- }
- module.error(error.recursion);
- }
- else {
- module.debug('No default tabs found for', tabPath, $tabs);
- }
- recursionDepth = 0;
- return tabPath;
- },
- navElement: function(tabPath) {
- tabPath = tabPath || activeTabPath;
- return $allModules.filter('[data-' + metadata.tab + '="' + module.escape.string(tabPath) + '"]');
- },
- tabElement: function(tabPath) {
- var
- $fullPathTab,
- $simplePathTab,
- tabPathArray,
- lastTab
- ;
- tabPath = tabPath || activeTabPath;
- tabPathArray = module.utilities.pathToArray(tabPath);
- lastTab = module.utilities.last(tabPathArray);
- $fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + module.escape.string(tabPath) + '"]');
- $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + module.escape.string(lastTab) + '"]');
- return ($fullPathTab.length > 0)
- ? $fullPathTab
- : $simplePathTab
- ;
- },
- tab: function() {
- return activeTabPath;
- }
- },
-
- determine: {
- activeTab: function() {
- var activeTab = null;
-
- $tabs.each(function(_index, tab) {
- var $tab = $(tab);
-
- if( $tab.hasClass(className.active) ) {
- var
- tabPath = $(this).data(metadata.tab),
- $anchor = $allModules.filter('[data-' + metadata.tab + '="' + module.escape.string(tabPath) + '"]')
- ;
-
- if( $anchor.hasClass(className.active) ) {
- activeTab = tabPath;
- }
- }
- });
-
- return activeTab;
- }
- },
-
- utilities: {
- filterArray: function(keepArray, removeArray) {
- return $.grep(keepArray, function(keepValue) {
- return ( $.inArray(keepValue, removeArray) == -1);
- });
- },
- last: function(array) {
- return Array.isArray(array)
- ? array[ array.length - 1]
- : false
- ;
- },
- pathToArray: function(pathName) {
- if(pathName === undefined) {
- pathName = activeTabPath;
- }
- return typeof pathName == 'string'
- ? pathName.split('/')
- : [pathName]
- ;
- },
- arrayToPath: function(pathArray) {
- return Array.isArray(pathArray)
- ? pathArray.join('/')
- : false
- ;
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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
- ;
-
-};
-
-// shortcut for tabbed content with no defined navigation
-$.tab = function() {
- $(window).tab.apply(this, arguments);
-};
-
-$.fn.tab.settings = {
-
- name : 'Tab',
- namespace : 'tab',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers
- history : false, // use browser history
- historyType : 'hash', // #/ or html5 state
- path : false, // base path of url
-
- context : false, // specify a context that tabs must appear inside
- childrenOnly : false, // use only tabs that are children of context
- maxDepth : 25, // max depth a tab can be nested
-
- deactivate : 'siblings', // whether tabs should deactivate sibling menu elements or all elements initialized together
-
- alwaysRefresh : false, // load tab content new every tab click
- cache : true, // cache the content requests to pull locally
- loadOnce : false, // Whether tab data should only be loaded once when using remote content
- cacheType : 'response', // Whether to cache exact response, or to html cache contents after scripts execute
- ignoreFirstLoad : false, // don't load remote content on first load
-
- apiSettings : false, // settings for api call
- evaluateScripts : 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content
- autoTabActivation: true, // whether a non existing active tab will auto activate the first available tab
-
- onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
- onLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
- onVisible : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
- onRequest : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content
-
- templates : {
- determineTitle: function(tabArray) {} // returns page title for path
- },
-
- error: {
- api : 'You attempted to load content without API module',
- method : 'The method you called is not defined',
- missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.',
- noContent : 'The tab you specified is missing a content url.',
- path : 'History enabled, but no path was specified',
- recursion : 'Max recursive depth reached',
- legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.',
- legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code',
- state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
- },
-
- regExp : {
- escape : /[-[\]{}()*+?.,\\^$|#\s:=@]/g
- },
-
- metadata : {
- tab : 'tab',
- loaded : 'loaded',
- promise: 'promise'
- },
-
- className : {
- loading : 'loading',
- active : 'active'
- },
-
- selector : {
- tabs : '.ui.tab',
- ui : '.ui'
- }
-
-};
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/tab.less b/semantic/src/definitions/modules/tab.less
deleted file mode 100644
index 3c8f509..0000000
--- a/semantic/src/definitions/modules/tab.less
+++ /dev/null
@@ -1,91 +0,0 @@
-/*!
- * # Fomantic-UI - Tab
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'tab';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- UI Tabs
-*******************************/
-
-.ui.tab {
- display: none;
-}
-
-/*******************************
- States
-*******************************/
-
-/*--------------------
- Active
----------------------*/
-
-.ui.tab.active,
-.ui.tab.open {
- display: block;
-}
-
-& when (@variationTabLoading) {
- /*--------------------
- Loading
- ---------------------*/
-
- .ui.tab.loading {
- position: relative;
- overflow: hidden;
- display: block;
- min-height: @loadingMinHeight;
- }
- .ui.tab.loading * {
- position: @loadingContentPosition !important;
- left: @loadingContentOffset !important;
- }
-
- .ui.tab.loading:before,
- .ui.tab.loading.segment:before {
- position: absolute;
- content: '';
- top: @loaderDistanceFromTop;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- border-radius: @circularRadius;
- border: @loaderLineWidth solid @loaderFillColor;
- }
- .ui.tab.loading:after,
- .ui.tab.loading.segment:after {
- position: absolute;
- content: '';
- top: @loaderDistanceFromTop;
- left: 50%;
-
- margin: @loaderMargin;
- width: @loaderSize;
- height: @loaderSize;
-
- animation: loader @loaderSpeed infinite linear;
- border: @loaderLineWidth solid @loaderLineColor;
- border-radius: @circularRadius;
-
- box-shadow: 0 0 0 1px transparent;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/toast.js b/semantic/src/definitions/modules/toast.js
deleted file mode 100644
index 02064ff..0000000
--- a/semantic/src/definitions/modules/toast.js
+++ /dev/null
@@ -1,872 +0,0 @@
-/*!
- * # Fomantic-UI - Toast
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.toast = 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
- ;
- $allModules
- .each(function() {
- var
- settings = ( $.isPlainObject(parameters) )
- ? $.extend(true, {}, $.fn.toast.settings, parameters)
- : $.extend({}, $.fn.toast.settings),
-
- className = settings.className,
- selector = settings.selector,
- error = settings.error,
- namespace = settings.namespace,
- fields = settings.fields,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
- $module = $(this),
- $toastBox,
- $toast,
- $actions,
- $progress,
- $progressBar,
- $animationObject,
- $close,
- $context = (settings.context)
- ? $(settings.context)
- : $('body'),
-
- isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
-
- element = this,
- instance = isToastComponent ? $module.data(moduleNamespace) : undefined,
-
- module
- ;
- module = {
-
- initialize: function() {
- module.verbose('Initializing element');
- if (!module.has.container()) {
- module.create.container();
- }
- if(isToastComponent || settings.message !== '' || settings.title !== '' || module.get.iconClass() !== '' || settings.showImage || module.has.configActions()) {
- if(typeof settings.showProgress !== 'string' || [className.top,className.bottom].indexOf(settings.showProgress) === -1 ) {
- settings.showProgress = false;
- }
- module.create.toast();
- if(settings.closeOnClick && (settings.closeIcon || $($toast).find(selector.input).length > 0 || module.has.configActions())){
- settings.closeOnClick = false;
- }
- if(!settings.closeOnClick) {
- $toastBox.addClass(className.unclickable);
- }
- module.bind.events();
- }
- module.instantiate();
- if($toastBox) {
- module.show();
- }
- },
-
- instantiate: function() {
- module.verbose('Storing instance of toast');
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- if($toastBox) {
- module.debug('Removing toast', $toastBox);
- module.unbind.events();
- $toastBox.remove();
- $toastBox = undefined;
- $toast = undefined;
- $animationObject = undefined;
- settings.onRemove.call($toastBox, element);
- $progress = undefined;
- $progressBar = undefined;
- $close = undefined;
- }
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- show: function(callback) {
- callback = callback || function(){};
- module.debug('Showing toast');
- if(settings.onShow.call($toastBox, element) === false) {
- module.debug('onShow callback returned false, cancelling toast animation');
- return;
- }
- module.animate.show(callback);
- },
-
- close: function(callback) {
- callback = callback || function(){};
- module.remove.visible();
- module.unbind.events();
- module.animate.close(callback);
-
- },
-
- create: {
- container: function() {
- module.verbose('Creating container');
- $context.append($('<div/>',{class: settings.position + ' ' + className.container}));
- },
- toast: function() {
- $toastBox = $('<div/>', {class: className.box});
- if (!isToastComponent) {
- module.verbose('Creating toast');
- $toast = $('<div/>');
- var $content = $('<div/>', {class: className.content});
- var iconClass = module.get.iconClass();
- if (iconClass !== '') {
- $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
- }
-
- if (settings.showImage) {
- $toast.append($('<img>', {
- class: className.image + ' ' + settings.classImage,
- src: settings.showImage
- }));
- }
- if (settings.title !== '') {
- $content.append($('<div/>', {
- class: className.title,
- text: settings.title
- }));
- }
-
- $content.append($('<div/>', {html: module.helpers.escape(settings.message, settings.preserveHTML)}));
-
- $toast
- .addClass(settings.class + ' ' + className.toast)
- .append($content)
- ;
- $toast.css('opacity', settings.opacity);
- if (settings.closeIcon) {
- $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : '')});
- if($close.hasClass(className.left)) {
- $toast.prepend($close);
- } else {
- $toast.append($close);
- }
- }
- } else {
- $toast = settings.cloneModule ? $module.clone().removeAttr('id') : $module;
- $close = $toast.find('> i'+module.helpers.toClass(className.close));
- settings.closeIcon = ($close.length > 0);
- }
- if ($toast.hasClass(className.compact)) {
- settings.compact = true;
- }
- if ($toast.hasClass('card')) {
- settings.compact = false;
- }
- $actions = $toast.find('.actions');
- if (module.has.configActions()) {
- if ($actions.length === 0) {
- $actions = $('<div/>', {class: className.actions + ' ' + (settings.classActions || '')}).appendTo($toast);
- }
- if($toast.hasClass('card') && !$actions.hasClass(className.attached)) {
- $actions.addClass(className.extraContent);
- if($actions.hasClass(className.vertical)) {
- $actions.removeClass(className.vertical);
- module.error(error.verticalCard);
- }
- }
- settings.actions.forEach(function (el) {
- var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
- text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
- cls = module.helpers.deQuote(el[fields.class] || ''),
- click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
- $actions.append($('<button/>', {
- html: icon + text,
- class: className.button + ' ' + cls,
- click: function () {
- if (click.call(element, $module) === false) {
- return;
- }
- module.close();
- }
- }));
- });
- }
- if ($actions && $actions.hasClass(className.vertical)) {
- $toast.addClass(className.vertical);
- }
- if($actions.length > 0 && !$actions.hasClass(className.attached)) {
- if ($actions && (!$actions.hasClass(className.basic) || $actions.hasClass(className.left))) {
- $toast.addClass(className.actions);
- }
- }
- if(settings.displayTime === 'auto'){
- settings.displayTime = Math.max(settings.minDisplayTime, $toast.text().split(" ").length / settings.wordsPerMinute * 60000);
- }
- $toastBox.append($toast);
-
- if($actions.length > 0 && $actions.hasClass(className.attached)) {
- $actions.addClass(className.buttons);
- $actions.detach();
- $toast.addClass(className.attached);
- if (!$actions.hasClass(className.vertical)) {
- if ($actions.hasClass(className.top)) {
- $toastBox.prepend($actions);
- $toast.addClass(className.bottom);
- } else {
- $toastBox.append($actions);
- $toast.addClass(className.top);
- }
- } else {
- $toast.wrap(
- $('<div/>',{
- class:className.vertical + ' ' +
- className.attached + ' ' +
- (settings.compact ? className.compact : '')
- })
- );
- if($actions.hasClass(className.left)) {
- $toast.addClass(className.left).parent().addClass(className.left).prepend($actions);
- } else {
- $toast.parent().append($actions);
- }
- }
- }
- if($module !== $toast) {
- $module = $toast;
- element = $toast[0];
- }
- if(settings.displayTime > 0) {
- var progressingClass = className.progressing+' '+(settings.pauseOnHover ? className.pausable:'');
- if (!!settings.showProgress) {
- $progress = $('<div/>', {
- class: className.progress + ' ' + (settings.classProgress || settings.class),
- 'data-percent': ''
- });
- if(!settings.classProgress) {
- if ($toast.hasClass('toast') && !$toast.hasClass(className.inverted)) {
- $progress.addClass(className.inverted);
- } else {
- $progress.removeClass(className.inverted);
- }
- }
- $progressBar = $('<div/>', {class: 'bar '+(settings.progressUp ? 'up ' : 'down ')+progressingClass});
- $progress
- .addClass(settings.showProgress)
- .append($progressBar);
- if ($progress.hasClass(className.top)) {
- $toastBox.prepend($progress);
- } else {
- $toastBox.append($progress);
- }
- $progressBar.css('animation-duration', settings.displayTime / 1000 + 's');
- }
- $animationObject = $('<span/>',{class:'wait '+progressingClass});
- $animationObject.css('animation-duration', settings.displayTime / 1000 + 's');
- $animationObject.appendTo($toast);
- }
- if (settings.compact) {
- $toastBox.addClass(className.compact);
- $toast.addClass(className.compact);
- if($progress) {
- $progress.addClass(className.compact);
- }
- }
- if (settings.newestOnTop) {
- $toastBox.prependTo(module.get.container());
- }
- else {
- $toastBox.appendTo(module.get.container());
- }
- }
- },
-
- bind: {
- events: function() {
- module.debug('Binding events to toast');
- if(settings.closeOnClick || settings.closeIcon) {
- (settings.closeIcon ? $close : $toast)
- .on('click' + eventNamespace, module.event.click)
- ;
- }
- if($animationObject) {
- $animationObject.on('animationend' + eventNamespace, module.close);
- }
- $toastBox
- .on('click' + eventNamespace, selector.approve, module.event.approve)
- .on('click' + eventNamespace, selector.deny, module.event.deny)
- ;
- }
- },
-
- unbind: {
- events: function() {
- module.debug('Unbinding events to toast');
- if(settings.closeOnClick || settings.closeIcon) {
- (settings.closeIcon ? $close : $toast)
- .off('click' + eventNamespace)
- ;
- }
- if($animationObject) {
- $animationObject.off('animationend' + eventNamespace);
- }
- $toastBox
- .off('click' + eventNamespace)
- ;
- }
- },
-
- animate: {
- show: function(callback) {
- callback = $.isFunction(callback) ? callback : function(){};
- if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
- module.set.visible();
- $toastBox
- .transition({
- animation : settings.transition.showMethod + ' in',
- queue : false,
- debug : settings.debug,
- verbose : settings.verbose,
- duration : settings.transition.showDuration,
- onComplete : function() {
- callback.call($toastBox, element);
- settings.onVisible.call($toastBox, element);
- }
- })
- ;
- }
- },
- close: function(callback) {
- callback = $.isFunction(callback) ? callback : function(){};
- module.debug('Closing toast');
- if(settings.onHide.call($toastBox, element) === false) {
- module.debug('onHide callback returned false, cancelling toast animation');
- return;
- }
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
- $toastBox
- .transition({
- animation : settings.transition.hideMethod + ' out',
- queue : false,
- duration : settings.transition.hideDuration,
- debug : settings.debug,
- verbose : settings.verbose,
- interval : 50,
-
- onBeforeHide: function(callback){
- callback = $.isFunction(callback)?callback : function(){};
- if(settings.transition.closeEasing !== ''){
- if($toastBox) {
- $toastBox.css('opacity', 0);
- $toastBox.wrap('<div/>').parent().slideUp(500, settings.transition.closeEasing, function () {
- if ($toastBox) {
- $toastBox.parent().remove();
- callback.call($toastBox);
- }
- });
- }
- } else {
- callback.call($toastBox);
- }
- },
- onComplete : function() {
- callback.call($toastBox, element);
- settings.onHidden.call($toastBox, element);
- module.destroy();
- }
- })
- ;
- }
- else {
- module.error(error.noTransition);
- }
- },
- pause: function() {
- $animationObject.css('animationPlayState','paused');
- if($progressBar) {
- $progressBar.css('animationPlayState', 'paused');
- }
- },
- continue: function() {
- $animationObject.css('animationPlayState','running');
- if($progressBar) {
- $progressBar.css('animationPlayState', 'running');
- }
- }
- },
-
- has: {
- container: function() {
- module.verbose('Determining if there is already a container');
- return ($context.find(module.helpers.toClass(settings.position) + selector.container).length > 0);
- },
- toast: function(){
- return !!module.get.toast();
- },
- toasts: function(){
- return module.get.toasts().length > 0;
- },
- configActions: function () {
- return Array.isArray(settings.actions) && settings.actions.length > 0;
- }
- },
-
- get: {
- container: function() {
- return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
- },
- toastBox: function() {
- return $toastBox || null;
- },
- toast: function() {
- return $toast || null;
- },
- toasts: function() {
- return $(module.get.container()).find(selector.box);
- },
- iconClass: function() {
- return typeof settings.showIcon === 'string' ? settings.showIcon : settings.showIcon && settings.icons[settings.class] ? settings.icons[settings.class] : '';
- },
- remainingTime: function() {
- return $animationObject ? $animationObject.css('opacity') * settings.displayTime : 0;
- }
- },
-
- set: {
- visible: function() {
- $toast.addClass(className.visible);
- }
- },
-
- remove: {
- visible: function() {
- $toast.removeClass(className.visible);
- }
- },
-
- event: {
- click: function(event) {
- if($(event.target).closest('a').length === 0) {
- settings.onClick.call($toastBox, element);
- module.close();
- }
- },
- approve: function() {
- if(settings.onApprove.call(element, $module) === false) {
- module.verbose('Approve callback returned false cancelling close');
- return;
- }
- module.close();
- },
- deny: function() {
- if(settings.onDeny.call(element, $module) === false) {
- module.verbose('Deny callback returned false cancelling close');
- return;
- }
- module.close();
- }
- },
-
- helpers: {
- toClass: function(selector) {
- var
- classes = selector.split(' '),
- result = ''
- ;
-
- classes.forEach(function (element) {
- result += '.' + element;
- });
-
- return result;
- },
- deQuote: function(string) {
- return String(string).replace(/"/g,"");
- },
- escape: function(string, preserveHTML) {
- if (preserveHTML){
- return string;
- }
- var
- badChars = /[<>"'`]/g,
- shouldEscape = /[&<>"'`]/,
- escape = {
- "<": "&lt;",
- ">": "&gt;",
- '"': "&quot;",
- "'": "&#x27;",
- "`": "&#x60;"
- },
- escapedChar = function(chr) {
- return escape[chr];
- }
- ;
- if(shouldEscape.test(string)) {
- string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
- return string.replace(badChars, escapedChar);
- }
- return string;
- }
- },
-
- can: {
- useElement: function(element){
- if ($.fn[element] !== undefined) {
- return true;
- }
- module.error(error.noElement.replace('{element}',element));
- return false;
- }
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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(Array.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();
- returnedValue = $module;
- }
- })
- ;
-
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-$.fn.toast.settings = {
-
- name : 'Toast',
- namespace : 'toast',
-
- silent : false,
- debug : false,
- verbose : false,
- performance : true,
-
- context : 'body',
-
- position : 'top right',
- class : 'neutral',
- classProgress : false,
- classActions : false,
- classImage : 'mini',
-
- title : '',
- message : '',
- displayTime : 3000, // set to zero to require manually dismissal, otherwise hides on its own
- minDisplayTime : 1000, // minimum displaytime in case displayTime is set to 'auto'
- wordsPerMinute : 120,
- showIcon : false,
- newestOnTop : false,
- showProgress : false,
- pauseOnHover : true,
- progressUp : false, //if true, the bar will start at 0% and increase to 100%
- opacity : 1,
- compact : true,
- closeIcon : false,
- closeOnClick : true,
- cloneModule : true,
- actions : false,
- preserveHTML : true,
- showImage : false,
-
- // transition settings
- transition : {
- showMethod : 'scale',
- showDuration : 500,
- hideMethod : 'scale',
- hideDuration : 500,
- closeEasing : 'easeOutCubic' //Set to empty string to stack the closed toast area immediately (old behaviour)
- },
-
- error: {
- method : 'The method you called is not defined.',
- noElement : 'This module requires ui {element}',
- verticalCard : 'Vertical but not attached actions are not supported for card layout'
- },
-
- className : {
- container : 'ui toast-container',
- box : 'floating toast-box',
- progress : 'ui attached active progress',
- toast : 'ui toast',
- icon : 'centered icon',
- visible : 'visible',
- content : 'content',
- title : 'ui header',
- actions : 'actions',
- extraContent : 'extra content',
- button : 'ui button',
- buttons : 'ui buttons',
- close : 'close icon',
- image : 'ui image',
- vertical : 'vertical',
- attached : 'attached',
- inverted : 'inverted',
- compact : 'compact',
- pausable : 'pausable',
- progressing : 'progressing',
- top : 'top',
- bottom : 'bottom',
- left : 'left',
- basic : 'basic',
- unclickable : 'unclickable'
- },
-
- icons : {
- info : 'info',
- success : 'checkmark',
- warning : 'warning',
- error : 'times'
- },
-
- selector : {
- container : '.ui.toast-container',
- box : '.toast-box',
- toast : '.ui.toast',
- input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
- approve : '.actions .positive, .actions .approve, .actions .ok',
- deny : '.actions .negative, .actions .deny, .actions .cancel'
- },
-
- fields : {
- class : 'class',
- text : 'text',
- icon : 'icon',
- click : 'click'
- },
-
- // callbacks
- onShow : function(){},
- onVisible : function(){},
- onClick : function(){},
- onHide : function(){},
- onHidden : function(){},
- onRemove : function(){},
- onApprove : function(){},
- onDeny : function(){}
-};
-
-$.extend( $.easing, {
- easeOutBounce: function (x, t, b, c, d) {
- if ((t/=d) < (1/2.75)) {
- return c*(7.5625*t*t) + b;
- } else if (t < (2/2.75)) {
- return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
- } else if (t < (2.5/2.75)) {
- return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
- } else {
- return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
- }
- },
- easeOutCubic: function (t) {
- return (--t)*t*t+1;
- }
-});
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/toast.less b/semantic/src/definitions/modules/toast.less
deleted file mode 100644
index 1949afc..0000000
--- a/semantic/src/definitions/modules/toast.less
+++ /dev/null
@@ -1,590 +0,0 @@
-/*!
- * # Fomantic-UI - Toast
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'toast';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Toast container
-*******************************/
-
-.ui.toast-container {
- position: fixed;
- z-index: 9999;
- &.top when (@variationToastTop) {
- &.right when (@variationToastRight) {
- top: @toastContainerDistance;
- right: @toastContainerDistance;
- margin-left: @toastContainerDistance;
- }
- &.left when (@variationToastLeft) {
- top: @toastContainerDistance;
- left: @toastContainerDistance;
- margin-right: @toastContainerDistance;
- }
- &.center when (@variationToastCenter) {
- left: 50%;
- transform: translate(-50%, 0);
- top: @toastContainerDistance;
- }
- }
- &.bottom when (@variationToastBottom) {
- &.right when (@variationToastRight) {
- bottom: @toastContainerDistance;
- right: @toastContainerDistance;
- margin-left: @toastContainerDistance;
- }
- &.left when (@variationToastLeft) {
- bottom: @toastContainerDistance;
- left: @toastContainerDistance;
- margin-right: @toastContainerDistance;
- }
- &.center when (@variationToastCenter) {
- left: 50%;
- transform: translate(-50%, 0);
- bottom: @toastContainerDistance;
- }
- }
- & .visible.toast-box,
- .animating.toast-box,
- .toast-box {
- display: table !important;
- }
- & .toast-box {
- margin-bottom: @toastBoxMarginBottom;
- border-radius: @defaultBorderRadius;
- cursor: default;
- &:hover {
- opacity: @toastOpacityOnHover;
- }
- &:not(.unclickable):hover {
- cursor: @toastCursorOnHover;
- }
- & when (@variationToastFloating) {
- &.floating,
- &.hoverfloating:hover {
- box-shadow: @floatingShadow;
- border: @toastBoxBorder;
- }
- }
- &.compact,
- > .compact {
- width: @toastWidth;
- }
- & > .ui.toast,
- > .ui.message {
- margin: @toastMargin;
- position: relative;
- }
- & > .attached.progress when (@variationToastProgress) {
- z-index:1;
- &.bottom {
- margin: @toastMarginProgress -@toastLeftRightMargin @toastMarginBottom;
- }
- &.top {
- margin: @toastMarginBottom -@toastLeftRightMargin @toastMarginProgress;
- }
- & .bar {
- min-width: 0;
- }
- &.info .bar.bar.bar {
- background: @toastInfoProgressColor;
- }
- &.warning .bar.bar.bar {
- background: @toastWarningProgressColor;
- }
- &.success .bar.bar.bar {
- background: @toastSuccessProgressColor;
- }
- &.error .bar.bar.bar {
- background: @toastErrorProgressColor;
- }
- &.neutral .bar.bar.bar {
- background: @toastNeutralProgressColor;
- }
- }
- & > .ui.message when (@variationToastMessage) {
- & > .close.icon when (@variationToastClose){
- top: @toastCloseTopDistance;
- right: @toastCloseRightDistance;
- }
- & > .actions:last-child when (@variationToastActions) {
- margin-bottom: @toastActionMargin;
- }
- &.icon when (@variationToastIcon) {
- align-items: inherit;
- & > :not(.icon):not(.actions) {
- padding-left: @toastIconMessageContentPadding;
- }
- & > i.icon:not(.close) when (@variationToastIcon) {
- display: inline-block;
- position: absolute;
- width: @toastIconMessageWidth;
- top: 50%;
- transform: translateY(-50%);
- }
- &:not(.vertical) {
- &.actions > i.icon:not(.close) when (@variationToastActions) and (@variationToastIcon) {
- top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
- transform: none;
- }
- &.icon.icon.icon when (@variationToastIcon){
- display: block;
- }
- }
- }
- }
- & .ui.toast {
- & > .close.icon when (@variationToastClose){
- cursor: pointer;
- margin: 0;
- opacity: @toastCloseOpacity;
- transition: @toastCloseTransition;
- &:hover {
- opacity: 1;
- }
- }
- &.vertical > .close.icon when (@variationToastVertical) and (@variationToastClose) {
- margin-top: -@toastCloseTopDistance;
- margin-right: -@toastCloseTopDistance;
- }
- &:not(.vertical) > .close.icon when (@variationToastClose) {
- position: absolute;
- top: @toastCloseTopDistance;
- &:not(.left) {
- right: @toastCloseRightDistance;
- }
- &.left {
- margin-left: -@toastCloseRightDistance;
- }
- }
- }
- & .ui.card when (@variationToastCard) {
- margin:0;
- &.attached:not(.vertical) when (@variationToastAttached) {
- &.bottom {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- &.horizontal {
- & > .image > img {
- border-top-left-radius: 0;
- }
- & > .image:last-child > img {
- border-top-right-radius: 0;
- }
- }
- }
- &.top {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- &.horizontal {
- & > .image > img {
- border-bottom-left-radius: 0;
- }
- & > .image:last-child > img {
- border-bottom-right-radius: 0;
- }
- }
- }
- }
- &.horizontal.actions when (@variationToastActions) {
- & > .image > img {
- border-bottom-left-radius: 0;
- }
- & > .image:last-child > img {
- border-bottom-right-radius: 0;
- }
- }
- }
- & .progressing {
- animation-iteration-count: 1;
- animation-timing-function: linear;
- & when (@variationToastProgress) {
- &.up {
- animation-name: progressUp;
- }
- &.down {
- animation-name: progressDown;
- }
- }
- &.wait {
- animation-name: progressWait;
- }
- }
- &:hover .pausable.progressing {
- animation-play-state: paused;
- }
- & .ui.toast:not(.vertical) {
- display:block;
- }
- & :not(.comment) {
- &:not(.card) .actions when (@variationToastActions) {
- margin: @toastActionMarginTop @toastActionMargin @toastActionMargin @toastActionMargin;
- }
- & .actions when (@variationToastActions) {
- padding: @toastActionPadding @toastActionPadding @toastActionPaddingBottom @toastActionPadding;
- text-align: right;
- &.attached:not(.vertical) when (@variationToastAttached) {
- margin-right: @toastLeftRightMargin;
- }
- &:not(.basic):not(.attached) {
- background: @toastActionBackground;
- border-top: @toastActionBorder;
- }
- &.left {
- text-align: left;
- }
- }
- }
- & when (@variationToastVertical) {
- & .vertical.actions > .button,
- & > .vertical > .vertical.vertical,
- & > .vertical.vertical.vertical {
- display: flex;
- }
- }
- & :not(.comment) .vertical.actions when (@variationToastVertical) and (@variationToastActions) {
- flex-direction: column;
- & > .button {
- justify-content: center;
- }
- &.attached > .button when (@variationToastAttached) {
- align-items: center;
- }
- &:not(.attached) {
- border-top: 0;
- margin-top: -@toastActionPaddingBottom;
- margin-bottom: -@toastActionPaddingBottom;
- margin-left: @toastActionMarginLeft;
- justify-content: space-around;
- &:not(.basic) {
- border-left: @toastActionBorder;
- }
- & > .button:not(:last-child) {
- margin-bottom: @toastActionMarginBottom;
- }
- &.top {
- justify-content: flex-start;
- }
- &.bottom {
- justify-content: flex-end;
- }
- }
- }
- }
-}
-
-.ui.vertical.attached when (@variationToastVertical) and (@variationToastAttached) {
- &:not(.left) {
- &.card when (@variationToastCard) {
- & > .image > img {
- border-top-right-radius: 0;
- }
- &.horizontal > .image:last-child > img {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
- &.card,
- &.toast {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- &.actions when (@variationToastActions) {
- border-top-right-radius: @toastBorderRadius;
- border-bottom-right-radius: @toastBorderRadius;
- & .button:first-child,
- .button:last-child {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- }
- &.message when (@variationToastMessage) {
- border-top-right-radius: 0;
- border-bottom-left-radius: @toastBorderRadius;
- }
- }
- &.left {
- &.card when (@variationToastCard) {
- & > .image > img {
- border-top-left-radius: 0;
- }
- &.horizontal > .image > img {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- }
- &.card,
- &.toast {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- &.actions when (@variationToastActions) {
- border-top-left-radius: @toastBorderRadius;
- border-bottom-left-radius: @toastBorderRadius;
- & .button:first-child,
- .button:last-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- & .button:not(:first-child):not(:last-child) {
- margin-left: -@toastLeftRightMargin;
- }
- }
- &.message.message.message when (@variationToastMessage) {
- border-top-right-radius: @toastBorderRadius;
- border-bottom-right-radius: @toastBorderRadius;
- }
- }
-}
-
-.ui.attached:not(.vertical) when (@variationToastAttached) {
- &:not(.top) {
- &.actions when (@variationToastActions) {
- border-bottom-left-radius: @toastBorderRadius;
- border-bottom-right-radius: @toastBorderRadius;
- & .button:first-child {
- border-bottom-left-radius: @toastBorderRadius;
- }
- & .button:last-child {
- border-bottom-right-radius: @toastBorderRadius;
- }
- }
- }
- &.top {
- &.actions when (@variationToastActions) {
- border-top-left-radius: @toastBorderRadius;
- border-top-right-radius: @toastBorderRadius;
- & .button:first-child {
- border-top-left-radius: @toastBorderRadius;
- }
- & .button:last-child {
- border-top-right-radius: @toastBorderRadius;
- }
- }
- }
-}
-
-/*******************************
- Toast
-*******************************/
-
-.ui.toast {
- display: none;
- border-radius: @defaultBorderRadius;
- padding: @toastPadding;
- margin: @toastMargin;
- color: @toastInvertedTextColor;
- background-color: @toastNeutralColor;
- & > .content > .header {
- font-weight: bold;
- color: inherit;
- margin:0;
- }
- &.info when (@variationToastInfo) {
- background-color: @toastInfoColor;
- color: @toastTextColor;
- }
- &.warning when (@variationToastWarning) {
- background-color: @toastWarningColor;
- color: @toastTextColor;
- }
- &.success when (@variationToastSuccess) {
- background-color: @toastSuccessColor;
- color: @toastTextColor;
- }
- &.error when (@variationToastError) {
- background-color: @toastErrorColor;
- color: @toastTextColor;
- }
- &.neutral {
- background-color: @toastNeutralColor;
- color: @toastNeutralTextColor;
- }
- & > i.icon:not(.close) when (@variationToastIcon) {
- font-size: @toastIconFontSize;
- }
- &:not(.vertical) {
- & > i.icon:not(.close) when (@variationToastIcon) {
- position: absolute;
- & + .content {
- padding-left: @toastIconContentPadding;
- }
- }
- & > .close.icon + .content when (@variationToastClose){
- padding-left: @toastCloseDistance;
- }
- & > .ui.image when (@variationToastImage) {
- position: absolute;
- &.avatar + .content {
- padding-left: @toastAvatarImageContentPadding;
- min-height: @toastAvatarImageHeight;
- }
- &.mini + .content {
- padding-left: @toastMiniImageContentPadding;
- min-height: @toastMiniImageHeight;
- }
- &.tiny + .content {
- padding-left: @toastTinyImageContentPadding;
- min-height: @toastTinyImageHeight;
- }
- &.small + .content {
- padding-left: @toastSmallImageContentPadding;
- min-height: @toastSmallImageHeight;
- }
- }
- & when (@variationToastImage) or (@variationToastIcon) {
- & > .centered.image,
- > .centered.icon {
- transform: translateY(-50%);
- top: 50%;
- }
- }
- &.actions > .centered.image when (@variationToastActions) and (@variationToastImage) {
- top: e(%("calc(50%% - %d)", @toastImageCenteredAdjustment));
- }
- &.actions > .centered.icon when (@variationToastActions) and (@variationToastIcon) {
- top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
- }
- }
- &.vertical when (@variationToastVertical) {
- & > .close.icon + .content when (@variationToastClose){
- padding-left: @toastCloseDistanceVertical;
- }
- & when (@variationToastImage) or (@variationToastIcon) {
- & > .ui.image + .content,
- > i.icon:not(.close) + .content {
- padding-left: @toastImageContentPadding;
- }
- }
- & > .ui.image when (@variationToastImage){
- align-self: flex-start;
- flex-shrink:0; /* IE11 fix */
- }
- & when (@variationToastImage) or (@variationToastIcon) {
- & > .centered.image,
- > .centered.icon {
- align-self: center;
- }
- }
- }
-
- &.attached when (@variationToastAttached) {
- &.bottom {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- &.top {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
-}
-
-
-.ui.hoverfloating.message:hover when (@variationToastMessage) and (@variationToastFloating) {
- box-shadow: 0 0 0 1px inset, @floatingShadow;
-}
-
-.ui.center.toast-container .toast-box,
-.ui.right.toast-container .toast-box {
- margin-left: auto;
-}
-
-.ui.center.toast-container .toast-box {
- margin-right: auto;
-}
-
-/*--------------
- Colors
--------------- */
-
-each(@colors, {
- @color: replace(@key, '@', '');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
-
- .ui.@{color}.toast {
- background-color: @c;
- color: @toastTextColor;
- }
- & when (@variationToastInverted) {
- .ui.inverted.@{color}.toast,
- .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
- background-color: @l;
- color: @toastInvertedTextColor;
- }
- }
-})
-
-& when (@variationToastInverted) {
- .ui.inverted.toast {
- color: @toastTextColor;
- background-color: @toastInvertedColor;
- }
-}
-
-@media only screen and (max-width: @mobileToastBreakpoint) {
- .ui.toast-container .toast-box {
- &.toast-box,
- & > .compact,
- & > .vertical > *,
- & > * {
- width: auto;
- max-width: 100%;
- }
- & > *:not(.vertical) {
- min-width: @mobileWidth;
- }
- & when (@variationToastCard) {
- & > .ui.card.horizontal,
- > .vertical > .ui.horizontal.card {
- min-width: initial;
- }
- }
- }
-}
-
-/*---------------
- Progress Bar
- ----------------*/
-& when (@variationToastProgress) {
- @keyframes progressDown {
- 0% {
- width: 100%;
- }
- 100% {
- width: 0;
- }
- }
- @keyframes progressUp {
- 0% {
- width: 0;
- }
- 100% {
- width: 100%;
- }
- }
-}
-@keyframes progressWait {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
diff --git a/semantic/src/definitions/modules/transition.js b/semantic/src/definitions/modules/transition.js
deleted file mode 100644
index 45dfefe..0000000
--- a/semantic/src/definitions/modules/transition.js
+++ /dev/null
@@ -1,1109 +0,0 @@
-/*!
- * # Fomantic-UI - Transition
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-;(function ($, window, document, undefined) {
-
-'use strict';
-
-$.isFunction = $.isFunction || function(obj) {
- return typeof obj === "function" && typeof obj.nodeType !== "number";
-};
-
-window = (typeof window != 'undefined' && window.Math == Math)
- ? window
- : (typeof self != 'undefined' && self.Math == Math)
- ? self
- : Function('return this')()
-;
-
-$.fn.transition = function() {
- var
- $allModules = $(this),
- moduleSelector = $allModules.selector || '',
-
- time = new Date().getTime(),
- performance = [],
-
- moduleArguments = arguments,
- query = moduleArguments[0],
- queryArguments = [].slice.call(arguments, 1),
- methodInvoked = (typeof query === 'string'),
-
- returnedValue
- ;
- $allModules
- .each(function(index) {
- var
- $module = $(this),
- element = this,
-
- // set at run time
- settings,
- instance,
-
- error,
- className,
- metadata,
- animationEnd,
-
- moduleNamespace,
- eventNamespace,
- module
- ;
-
- module = {
-
- initialize: function() {
-
- // get full settings
- settings = module.get.settings.apply(element, moduleArguments);
-
- // shorthand
- className = settings.className;
- error = settings.error;
- metadata = settings.metadata;
-
- // define namespace
- eventNamespace = '.' + settings.namespace;
- moduleNamespace = 'module-' + settings.namespace;
- instance = $module.data(moduleNamespace) || module;
-
- // get vendor specific events
- animationEnd = module.get.animationEndEvent();
-
- if(methodInvoked) {
- methodInvoked = module.invoke(query);
- }
-
- // method not invoked, lets run an animation
- if(methodInvoked === false) {
- module.verbose('Converted arguments into settings object', settings);
- if(settings.interval) {
- module.delay(settings.animate);
- }
- else {
- module.animate();
- }
- module.instantiate();
- }
- },
-
- instantiate: function() {
- module.verbose('Storing instance of module', module);
- instance = module;
- $module
- .data(moduleNamespace, instance)
- ;
- },
-
- destroy: function() {
- module.verbose('Destroying previous module for', element);
- $module
- .removeData(moduleNamespace)
- ;
- },
-
- refresh: function() {
- module.verbose('Refreshing display type on next animation');
- delete module.displayType;
- },
-
- forceRepaint: function() {
- module.verbose('Forcing element repaint');
- var
- $parentElement = $module.parent(),
- $nextElement = $module.next()
- ;
- if($nextElement.length === 0) {
- $module.detach().appendTo($parentElement);
- }
- else {
- $module.detach().insertBefore($nextElement);
- }
- },
-
- repaint: function() {
- module.verbose('Repainting element');
- var
- fakeAssignment = element.offsetWidth
- ;
- },
-
- delay: function(interval) {
- var
- direction = module.get.animationDirection(),
- shouldReverse,
- delay
- ;
- if(!direction) {
- direction = module.can.transition()
- ? module.get.direction()
- : 'static'
- ;
- }
- interval = (interval !== undefined)
- ? interval
- : settings.interval
- ;
- shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
- delay = (shouldReverse || settings.reverse == true)
- ? ($allModules.length - index) * settings.interval
- : index * settings.interval
- ;
- module.debug('Delaying animation by', delay);
- setTimeout(module.animate, delay);
- },
-
- animate: function(overrideSettings) {
- settings = overrideSettings || settings;
- if(!module.is.supported()) {
- module.error(error.support);
- return false;
- }
- module.debug('Preparing animation', settings.animation);
- if(module.is.animating()) {
- if(settings.queue) {
- if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
- module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
- }
- else {
- module.queue(settings.animation);
- }
- return false;
- }
- else if(!settings.allowRepeats && module.is.occurring()) {
- module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
- return false;
- }
- else {
- module.debug('New animation started, completing previous early', settings.animation);
- instance.complete();
- }
- }
- if( module.can.animate() ) {
- module.set.animating(settings.animation);
- }
- else {
- module.error(error.noAnimation, settings.animation, element);
- }
- },
-
- reset: function() {
- module.debug('Resetting animation to beginning conditions');
- module.remove.animationCallbacks();
- module.restore.conditions();
- module.remove.animating();
- },
-
- queue: function(animation) {
- module.debug('Queueing animation of', animation);
- module.queuing = true;
- $module
- .one(animationEnd + '.queue' + eventNamespace, function() {
- module.queuing = false;
- module.repaint();
- module.animate.apply(this, settings);
- })
- ;
- },
-
- complete: function (event) {
- if(event && event.target === element) {
- event.stopPropagation();
- }
- module.debug('Animation complete', settings.animation);
- module.remove.completeCallback();
- module.remove.failSafe();
- if(!module.is.looping()) {
- if( module.is.outward() ) {
- module.verbose('Animation is outward, hiding element');
- module.restore.conditions();
- module.hide();
- }
- else if( module.is.inward() ) {
- module.verbose('Animation is outward, showing element');
- module.restore.conditions();
- module.show();
- }
- else {
- module.verbose('Static animation completed');
- module.restore.conditions();
- settings.onComplete.call(element);
- }
- }
- },
-
- force: {
- visible: function() {
- var
- style = $module.attr('style'),
- userStyle = module.get.userStyle(style),
- displayType = module.get.displayType(),
- overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
- inlineDisplay = $module[0].style.display,
- mustStayHidden = !displayType || (inlineDisplay === 'none' && settings.skipInlineHidden) || $module[0].tagName.match(/(script|link|style)/i)
- ;
- if (mustStayHidden){
- module.remove.transition();
- return false;
- }
- module.verbose('Overriding default display to show element', displayType);
- $module
- .attr('style', overrideStyle)
- ;
- return true;
- },
- hidden: function() {
- var
- style = $module.attr('style'),
- currentDisplay = $module.css('display'),
- emptyStyle = (style === undefined || style === '')
- ;
- if(currentDisplay !== 'none' && !module.is.hidden()) {
- module.verbose('Overriding default display to hide element');
- $module
- .css('display', 'none')
- ;
- }
- else if(emptyStyle) {
- $module
- .removeAttr('style')
- ;
- }
- }
- },
-
- has: {
- direction: function(animation) {
- var
- hasDirection = false
- ;
- animation = animation || settings.animation;
- if(typeof animation === 'string') {
- animation = animation.split(' ');
- $.each(animation, function(index, word){
- if(word === className.inward || word === className.outward) {
- hasDirection = true;
- }
- });
- }
- return hasDirection;
- },
- inlineDisplay: function() {
- var
- style = $module.attr('style') || ''
- ;
- return Array.isArray(style.match(/display.*?;/, ''));
- }
- },
-
- set: {
- animating: function(animation) {
- // remove previous callbacks
- module.remove.completeCallback();
-
- // determine exact animation
- animation = animation || settings.animation;
- var animationClass = module.get.animationClass(animation);
-
- // save animation class in cache to restore class names
- module.save.animation(animationClass);
-
- if(module.force.visible()) {
- module.remove.hidden();
- module.remove.direction();
-
- module.start.animation(animationClass);
- }
- },
- duration: function(animationName, duration) {
- duration = duration || settings.duration;
- duration = (typeof duration == 'number')
- ? duration + 'ms'
- : duration
- ;
- if(duration || duration === 0) {
- module.verbose('Setting animation duration', duration);
- $module
- .css({
- 'animation-duration': duration
- })
- ;
- }
- },
- direction: function(direction) {
- direction = direction || module.get.direction();
- if(direction == className.inward) {
- module.set.inward();
- }
- else {
- module.set.outward();
- }
- },
- looping: function() {
- module.debug('Transition set to loop');
- $module
- .addClass(className.looping)
- ;
- },
- hidden: function() {
- $module
- .addClass(className.transition)
- .addClass(className.hidden)
- ;
- },
- inward: function() {
- module.debug('Setting direction to inward');
- $module
- .removeClass(className.outward)
- .addClass(className.inward)
- ;
- },
- outward: function() {
- module.debug('Setting direction to outward');
- $module
- .removeClass(className.inward)
- .addClass(className.outward)
- ;
- },
- visible: function() {
- $module
- .addClass(className.transition)
- .addClass(className.visible)
- ;
- }
- },
-
- start: {
- animation: function(animationClass) {
- animationClass = animationClass || module.get.animationClass();
- module.debug('Starting tween', animationClass);
- $module
- .addClass(animationClass)
- .one(animationEnd + '.complete' + eventNamespace, module.complete)
- ;
- if(settings.useFailSafe) {
- module.add.failSafe();
- }
- module.set.duration(settings.duration);
- settings.onStart.call(element);
- }
- },
-
- save: {
- animation: function(animation) {
- if(!module.cache) {
- module.cache = {};
- }
- module.cache.animation = animation;
- },
- displayType: function(displayType) {
- if(displayType !== 'none') {
- $module.data(metadata.displayType, displayType);
- }
- },
- transitionExists: function(animation, exists) {
- $.fn.transition.exists[animation] = exists;
- module.verbose('Saving existence of transition', animation, exists);
- }
- },
-
- restore: {
- conditions: function() {
- var
- animation = module.get.currentAnimation()
- ;
- if(animation) {
- $module
- .removeClass(animation)
- ;
- module.verbose('Removing animation class', module.cache);
- }
- module.remove.duration();
- }
- },
-
- add: {
- failSafe: function() {
- var
- duration = module.get.duration()
- ;
- module.timer = setTimeout(function() {
- $module.triggerHandler(animationEnd);
- }, duration + settings.failSafeDelay);
- module.verbose('Adding fail safe timer', module.timer);
- }
- },
-
- remove: {
- animating: function() {
- $module.removeClass(className.animating);
- },
- animationCallbacks: function() {
- module.remove.queueCallback();
- module.remove.completeCallback();
- },
- queueCallback: function() {
- $module.off('.queue' + eventNamespace);
- },
- completeCallback: function() {
- $module.off('.complete' + eventNamespace);
- },
- display: function() {
- $module.css('display', '');
- },
- direction: function() {
- $module
- .removeClass(className.inward)
- .removeClass(className.outward)
- ;
- },
- duration: function() {
- $module
- .css('animation-duration', '')
- ;
- },
- failSafe: function() {
- module.verbose('Removing fail safe timer', module.timer);
- if(module.timer) {
- clearTimeout(module.timer);
- }
- },
- hidden: function() {
- $module.removeClass(className.hidden);
- },
- visible: function() {
- $module.removeClass(className.visible);
- },
- looping: function() {
- module.debug('Transitions are no longer looping');
- if( module.is.looping() ) {
- module.reset();
- $module
- .removeClass(className.looping)
- ;
- }
- },
- transition: function() {
- $module
- .removeClass(className.transition)
- .removeClass(className.visible)
- .removeClass(className.hidden)
- ;
- }
- },
- get: {
- settings: function(animation, duration, onComplete) {
- // single settings object
- if(typeof animation == 'object') {
- return $.extend(true, {}, $.fn.transition.settings, animation);
- }
- // all arguments provided
- else if(typeof onComplete == 'function') {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation,
- onComplete : onComplete,
- duration : duration
- });
- }
- // only duration provided
- else if(typeof duration == 'string' || typeof duration == 'number') {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation,
- duration : duration
- });
- }
- // duration is actually settings object
- else if(typeof duration == 'object') {
- return $.extend({}, $.fn.transition.settings, duration, {
- animation : animation
- });
- }
- // duration is actually callback
- else if(typeof duration == 'function') {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation,
- onComplete : duration
- });
- }
- // only animation provided
- else {
- return $.extend({}, $.fn.transition.settings, {
- animation : animation
- });
- }
- },
- animationClass: function(animation) {
- var
- animationClass = animation || settings.animation,
- directionClass = (module.can.transition() && !module.has.direction())
- ? module.get.direction() + ' '
- : ''
- ;
- return className.animating + ' '
- + className.transition + ' '
- + directionClass
- + animationClass
- ;
- },
- currentAnimation: function() {
- return (module.cache && module.cache.animation !== undefined)
- ? module.cache.animation
- : false
- ;
- },
- currentDirection: function() {
- return module.is.inward()
- ? className.inward
- : className.outward
- ;
- },
- direction: function() {
- return module.is.hidden() || !module.is.visible()
- ? className.inward
- : className.outward
- ;
- },
- animationDirection: function(animation) {
- var
- direction
- ;
- animation = animation || settings.animation;
- if(typeof animation === 'string') {
- animation = animation.split(' ');
- // search animation name for out/in class
- $.each(animation, function(index, word){
- if(word === className.inward) {
- direction = className.inward;
- }
- else if(word === className.outward) {
- direction = className.outward;
- }
- });
- }
- // return found direction
- if(direction) {
- return direction;
- }
- return false;
- },
- duration: function(duration) {
- duration = duration || settings.duration;
- if(duration === false) {
- duration = $module.css('animation-duration') || 0;
- }
- return (typeof duration === 'string')
- ? (duration.indexOf('ms') > -1)
- ? parseFloat(duration)
- : parseFloat(duration) * 1000
- : duration
- ;
- },
- displayType: function(shouldDetermine) {
- shouldDetermine = (shouldDetermine !== undefined)
- ? shouldDetermine
- : true
- ;
- if(settings.displayType) {
- return settings.displayType;
- }
- if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
- var currentDisplay = $module.css('display');
- if(currentDisplay === '' || currentDisplay === 'none'){
- // create fake element to determine display state
- module.can.transition(true);
- } else {
- module.save.displayType(currentDisplay);
- }
- }
- return $module.data(metadata.displayType);
- },
- userStyle: function(style) {
- style = style || $module.attr('style') || '';
- return style.replace(/display.*?;/, '');
- },
- transitionExists: function(animation) {
- return $.fn.transition.exists[animation];
- },
- animationStartEvent: function() {
- var
- element = document.createElement('div'),
- animations = {
- 'animation' :'animationstart',
- 'OAnimation' :'oAnimationStart',
- 'MozAnimation' :'mozAnimationStart',
- 'WebkitAnimation' :'webkitAnimationStart'
- },
- animation
- ;
- for(animation in animations){
- if( element.style[animation] !== undefined ){
- return animations[animation];
- }
- }
- return false;
- },
- animationEndEvent: function() {
- var
- element = document.createElement('div'),
- animations = {
- 'animation' :'animationend',
- 'OAnimation' :'oAnimationEnd',
- 'MozAnimation' :'mozAnimationEnd',
- 'WebkitAnimation' :'webkitAnimationEnd'
- },
- animation
- ;
- for(animation in animations){
- if( element.style[animation] !== undefined ){
- return animations[animation];
- }
- }
- return false;
- }
-
- },
-
- can: {
- transition: function(forced) {
- var
- animation = settings.animation,
- transitionExists = module.get.transitionExists(animation),
- displayType = module.get.displayType(false),
- elementClass,
- tagName,
- $clone,
- currentAnimation,
- inAnimation,
- directionExists
- ;
- if( transitionExists === undefined || forced) {
- module.verbose('Determining whether animation exists');
- elementClass = $module.attr('class');
- tagName = $module.prop('tagName');
-
- $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
- currentAnimation = $clone
- .addClass(animation)
- .removeClass(className.inward)
- .removeClass(className.outward)
- .addClass(className.animating)
- .addClass(className.transition)
- .css('animationName')
- ;
- inAnimation = $clone
- .addClass(className.inward)
- .css('animationName')
- ;
- if(!displayType) {
- displayType = $clone
- .attr('class', elementClass)
- .removeAttr('style')
- .removeClass(className.hidden)
- .removeClass(className.visible)
- .show()
- .css('display')
- ;
- module.verbose('Determining final display state', displayType);
- module.save.displayType(displayType);
- }
-
- $clone.remove();
- if(currentAnimation != inAnimation) {
- module.debug('Direction exists for animation', animation);
- directionExists = true;
- }
- else if(currentAnimation == 'none' || !currentAnimation) {
- module.debug('No animation defined in css', animation);
- return;
- }
- else {
- module.debug('Static animation found', animation, displayType);
- directionExists = false;
- }
- module.save.transitionExists(animation, directionExists);
- }
- return (transitionExists !== undefined)
- ? transitionExists
- : directionExists
- ;
- },
- animate: function() {
- // can transition does not return a value if animation does not exist
- return (module.can.transition() !== undefined);
- }
- },
-
- is: {
- animating: function() {
- return $module.hasClass(className.animating);
- },
- inward: function() {
- return $module.hasClass(className.inward);
- },
- outward: function() {
- return $module.hasClass(className.outward);
- },
- looping: function() {
- return $module.hasClass(className.looping);
- },
- occurring: function(animation) {
- animation = animation || settings.animation;
- animation = '.' + animation.replace(' ', '.');
- return ( $module.filter(animation).length > 0 );
- },
- visible: function() {
- return $module.is(':visible');
- },
- hidden: function() {
- return $module.css('visibility') === 'hidden';
- },
- supported: function() {
- return(animationEnd !== false);
- }
- },
-
- hide: function() {
- module.verbose('Hiding element');
- if( module.is.animating() ) {
- module.reset();
- }
- element.blur(); // IE will trigger focus change if element is not blurred before hiding
- module.remove.display();
- module.remove.visible();
- if($.isFunction(settings.onBeforeHide)){
- settings.onBeforeHide.call(element,function(){
- module.hideNow();
- });
- } else {
- module.hideNow();
- }
-
- },
-
- hideNow: function() {
- module.set.hidden();
- module.force.hidden();
- settings.onHide.call(element);
- settings.onComplete.call(element);
- // module.repaint();
- },
-
- show: function(display) {
- module.verbose('Showing element', display);
- if(module.force.visible()) {
- module.remove.hidden();
- module.set.visible();
- settings.onShow.call(element);
- settings.onComplete.call(element);
- // module.repaint();
- }
- },
-
- toggle: function() {
- if( module.is.visible() ) {
- module.hide();
- }
- else {
- module.show();
- }
- },
-
- stop: function() {
- module.debug('Stopping current animation');
- $module.triggerHandler(animationEnd);
- },
-
- stopAll: function() {
- module.debug('Stopping all animation');
- module.remove.queueCallback();
- $module.triggerHandler(animationEnd);
- },
-
- clear: {
- queue: function() {
- module.debug('Clearing animation queue');
- module.remove.queueCallback();
- }
- },
-
- enable: function() {
- module.verbose('Starting animation');
- $module.removeClass(className.disabled);
- },
-
- disable: function() {
- module.debug('Stopping animation');
- $module.addClass(className.disabled);
- },
-
- setting: function(name, value) {
- module.debug('Changing setting', name, value);
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else if(value !== undefined) {
- if($.isPlainObject(settings[name])) {
- $.extend(true, settings[name], value);
- }
- else {
- 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($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 = [];
- }
- },
- // modified for transition to return invoke success
- 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(Array.isArray(returnedValue)) {
- returnedValue.push(response);
- }
- else if(returnedValue !== undefined) {
- returnedValue = [returnedValue, response];
- }
- else if(response !== undefined) {
- returnedValue = response;
- }
- return (found !== undefined)
- ? found
- : false
- ;
- }
- };
- module.initialize();
- })
- ;
- return (returnedValue !== undefined)
- ? returnedValue
- : this
- ;
-};
-
-// Records if CSS transition is available
-$.fn.transition.exists = {};
-
-$.fn.transition.settings = {
-
- // module info
- name : 'Transition',
-
- // hide all output from this component regardless of other settings
- silent : false,
-
- // debug content outputted to console
- debug : false,
-
- // verbose debug output
- verbose : false,
-
- // performance data output
- performance : true,
-
- // event namespace
- namespace : 'transition',
-
- // delay between animations in group
- interval : 0,
-
- // whether group animations should be reversed
- reverse : 'auto',
-
- // animation callback event
- onStart : function() {},
- onComplete : function() {},
- onShow : function() {},
- onHide : function() {},
-
- // whether timeout should be used to ensure callback fires in cases animationend does not
- useFailSafe : true,
-
- // delay in ms for fail safe
- failSafeDelay : 100,
-
- // whether EXACT animation can occur twice in a row
- allowRepeats : false,
-
- // Override final display type on visible
- displayType : false,
-
- // animation duration
- animation : 'fade',
- duration : false,
-
- // new animations will occur after previous ones
- queue : true,
-
-// whether initially inline hidden objects should be skipped for transition
- skipInlineHidden: false,
-
- metadata : {
- displayType: 'display'
- },
-
- className : {
- animating : 'animating',
- disabled : 'disabled',
- hidden : 'hidden',
- inward : 'in',
- loading : 'loading',
- looping : 'looping',
- outward : 'out',
- transition : 'transition',
- visible : 'visible'
- },
-
- // possible errors
- error: {
- noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.',
- repeated : 'That animation is already occurring, cancelling repeated animation',
- method : 'The method you called is not defined',
- support : 'This browser does not support CSS animations'
- }
-
-};
-
-
-})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/transition.less b/semantic/src/definitions/modules/transition.less
deleted file mode 100644
index 2990d53..0000000
--- a/semantic/src/definitions/modules/transition.less
+++ /dev/null
@@ -1,82 +0,0 @@
-/*!
- * # Fomantic-UI - Transition
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'module';
-@element : 'transition';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Transitions
-*******************************/
-
-.transition {
- animation-iteration-count: 1;
- animation-duration: @transitionDefaultDuration;
- animation-timing-function: @transitionDefaultEasing;
- animation-fill-mode: @transitionDefaultFill;
-}
-
-/*******************************
- States
-*******************************/
-
-
-/* Animating */
-.animating.transition {
- backface-visibility: @backfaceVisibility;
- visibility: visible !important;
-}
-
-& when (@variationTransitionLoading) {
- /* Loading */
- .loading.transition {
- position: absolute;
- top: -99999px;
- left: -99999px;
- }
-}
-
-/* Hidden */
-.hidden.transition {
- display: none;
- visibility: hidden;
-}
-
-/* Visible */
-.visible.transition {
- display: block !important;
- visibility: visible !important;
-/* backface-visibility: @backfaceVisibility;
- transform: @use3DAcceleration;*/
-}
-
-& when (@variationTransitionDisabled) {
- /* Disabled */
- .disabled.transition {
- animation-play-state: paused;
- }
-}
-
-/*******************************
- Variations
-*******************************/
-& when (@variationTransitionLoading) {
- .looping.transition {
- animation-iteration-count: infinite;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/views/ad.less b/semantic/src/definitions/views/ad.less
deleted file mode 100644
index 8d10cb1..0000000
--- a/semantic/src/definitions/views/ad.less
+++ /dev/null
@@ -1,297 +0,0 @@
-/*!
- * # Fomantic-UI - Ad
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Copyright 2013 Contributors
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'view';
-@element : 'ad';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Advertisement
-*******************************/
-
-.ui.ad {
- display: block;
- overflow: @overflow;
- margin: @margin;
-}
-
-.ui.ad:first-child {
- margin: 0;
-}
-
-.ui.ad:last-child {
- margin: 0;
-}
-
-.ui.ad iframe {
- margin: 0;
- padding: 0;
- border: none;
- overflow: hidden;
-}
-
-/*--------------
- Common
----------------*/
-& when (@variationAdLeaderboard) {
- /* Leaderboard */
- .ui.leaderboard.ad {
- width: 728px;
- height: 90px;
- }
-}
-
-& when (@variationAdRectangle) {
- /* Medium Rectangle */
- .ui[class*="medium rectangle"].ad {
- width: 300px;
- height: 250px;
- }
-
- /* Large Rectangle */
- .ui[class*="large rectangle"].ad {
- width: 336px;
- height: 280px;
- }
- /* Half Page */
- .ui[class*="half page"].ad {
- width: 300px;
- height: 600px;
- }
-}
-
-& when (@variationAdSquare) {
- /*--------------
- Square
- ---------------*/
-
- /* Square */
- .ui.square.ad {
- width: 250px;
- height: 250px;
- }
-
- /* Small Square */
- .ui[class*="small square"].ad {
- width: 200px;
- height: 200px;
- }
-}
-
-& when (@variationAdRectangle) {
- /*--------------
- Rectangle
- ---------------*/
-
- /* Small Rectangle */
- .ui[class*="small rectangle"].ad {
- width: 180px;
- height: 150px;
- }
-
- /* Vertical Rectangle */
- .ui[class*="vertical rectangle"].ad {
- width: 240px;
- height: 400px;
- }
-}
-
-& when (@variationAdButton) {
- /*--------------
- Button
- ---------------*/
-
- .ui.button.ad {
- width: 120px;
- height: 90px;
- }
- & when (@variationAdSquare) {
- .ui[class*="square button"].ad {
- width: 125px;
- height: 125px;
- }
- }
- .ui[class*="small button"].ad {
- width: 120px;
- height: 60px;
- }
-}
-
-& when (@variationAdSkyscraper) {
- /*--------------
- Skyscrapers
- ---------------*/
-
- /* Skyscraper */
- .ui.skyscraper.ad {
- width: 120px;
- height: 600px;
- }
-
- /* Wide Skyscraper */
- .ui[class*="wide skyscraper"].ad {
- width: 160px;
- }
-}
-
-& when (@variationAdBanner) {
- /*--------------
- Banners
- ---------------*/
-
- /* Banner */
- .ui.banner.ad {
- width: 468px;
- height: 60px;
- }
-
- /* Vertical Banner */
- .ui[class*="vertical banner"].ad {
- width: 120px;
- height: 240px;
- }
-
- /* Top Banner */
- .ui[class*="top banner"].ad {
- width: 930px;
- height: 180px;
- }
-
- /* Half Banner */
- .ui[class*="half banner"].ad {
- width: 234px;
- height: 60px;
- }
-}
-
-/*--------------
- Boards
----------------*/
-& when (@variationAdLeaderboard) {
- /* Leaderboard */
- .ui[class*="large leaderboard"].ad {
- width: 970px;
- height: 90px;
- }
-}
-
-& when (@variationAdBillboard) {
- /* Billboard */
- .ui.billboard.ad {
- width: 970px;
- height: 250px;
- }
-}
-
-& when (@variationAdPanorama) {
- /*--------------
- Panorama
- ---------------*/
-
- /* Panorama */
- .ui.panorama.ad {
- width: 980px;
- height: 120px;
- }
-}
-
-& when (@variationAdNetboard) {
- /*--------------
- Netboard
- ---------------*/
-
- /* Netboard */
- .ui.netboard.ad {
- width: 580px;
- height: 400px;
- }
-}
-
-& when (@variationAdMobile) {
- /*--------------
- Mobile
- ---------------*/
- & when (@variationAdBanner) {
- /* Large Mobile Banner */
- .ui[class*="large mobile banner"].ad {
- width: 320px;
- height: 100px;
- }
- }
- & when (@variationAdLeaderboard) {
- /* Mobile Leaderboard */
- .ui[class*="mobile leaderboard"].ad {
- width: 320px;
- height: 50px;
- }
- }
-
-/*******************************
- Types
-*******************************/
-
- /* Mobile Sizes */
- .ui.mobile.ad {
- display: none;
- }
-
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.mobile.ad {
- display: block;
- }
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationAdCentered) {
- .ui.centered.ad {
- margin-left: auto;
- margin-right: auto;
- }
-}
-& when (@variationAdTest) {
- .ui.test.ad {
- position: relative;
- background: @testBackground;
- }
- .ui.test.ad:after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 100%;
- text-align: center;
- transform: translateX(-50%) translateY(-50%);
-
- content: @testText;
- color: @testColor;
- font-size: @testFontSize;
- font-weight: @testFontWeight;
- }
- & when (@variationAdMobile) {
- .ui.mobile.test.ad:after {
- font-size: @testMobileFontSize;
- }
- }
- .ui.test.ad[data-text]:after {
- content: attr(data-text);
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/views/card.less b/semantic/src/definitions/views/card.less
deleted file mode 100644
index fba8aee..0000000
--- a/semantic/src/definitions/views/card.less
+++ /dev/null
@@ -1,978 +0,0 @@
-/*!
- * # Fomantic-UI - Card
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'view';
-@element : 'card';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Standard
-*******************************/
-
-/*--------------
- Card
----------------*/
-
-.ui.cards > .card,
-.ui.card {
- max-width: 100%;
- position: relative;
- display: @display;
- flex-direction: column;
-
- width: @width;
- min-height: @minHeight;
- background: @background;
- padding: @padding;
-
- border: @border;
- border-radius: @borderRadius;
- box-shadow: @boxShadow;
- transition: @transition;
- z-index: @zIndex;
- word-wrap: break-word;
-}
-.ui.card {
- margin: @margin;
-}
-
-.ui.cards > .card a,
-.ui.card a {
- cursor: pointer;
-}
-
-.ui.card:first-child {
- margin-top: 0;
-}
-.ui.card:last-child {
- margin-bottom: 0;
-}
-
-/*--------------
- Cards
----------------*/
-
-.ui.cards {
- display: @groupDisplay;
- margin: @groupMargin;
- flex-wrap: wrap;
-}
-
-.ui.cards > .card {
- display: @groupCardDisplay;
- margin: @groupCardMargin;
- float: @groupCardFloat;
-}
-
-/* Clearing */
-.ui.cards:after,
-.ui.card:after {
- display: block;
- content: ' ';
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-
-
-/* Consecutive Card Groups Preserve Row Spacing */
-.ui.cards ~ .ui.cards {
- margin-top: @consecutiveGroupDistance;
-}
-
-
-/*--------------
- Rounded Edges
----------------*/
-
-.ui.cards > .card > :first-child,
-.ui.card > :first-child {
- border-radius: @borderRadius @borderRadius 0 0 !important;
- border-top: none !important;
-}
-
-.ui.cards > .card > :last-child,
-.ui.card > :last-child {
- border-radius: 0 0 @borderRadius @borderRadius !important;
-}
-
-.ui.cards > .card > :only-child,
-.ui.card > :only-child {
- border-radius: @borderRadius !important;
-}
-
-/*--------------
- Images
----------------*/
-
-.ui.cards > .card > .image,
-.ui.card > .image {
- position: relative;
- display: block;
- flex: 0 0 auto;
- padding: @imagePadding;
- background: @imageBackground;
-}
-.ui.cards > .card > .image > img,
-.ui.card > .image > img {
- display: block;
- width: 100%;
- height: auto;
- border-radius: inherit;
-}
-.ui.cards > .card > .image:not(.ui) > img,
-.ui.card > .image:not(.ui) > img {
- border: @imageBorder;
-}
-
-/*--------------
- Content
----------------*/
-
-.ui.cards > .card > .content,
-.ui.card > .content {
- flex-grow: 1;
- border: @contentBorder;
- border-top: @contentDivider;
- background: @contentBackground;
- margin: @contentMargin;
- padding: @contentPadding;
- box-shadow: @contentBoxShadow;
- font-size: @contentFontSize;
- border-radius: @contentBorderRadius;
-}
-
-.ui.cards > .card > .content:after,
-.ui.card > .content:after {
- display: block;
- content: ' ';
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-
-.ui.cards > .card > .content > .header,
-.ui.card > .content > .header {
- display: block;
- margin: @headerMargin;
- font-family: @headerFont;
- color: @headerColor;
-}
-
-/* Default Header Size */
-.ui.cards > .card > .content > .header:not(.ui),
-.ui.card > .content > .header:not(.ui) {
- font-weight: @headerFontWeight;
- font-size: @headerFontSize;
- margin-top: @headerLineHeightOffset;
- line-height: @headerLineHeight;
-}
-
-.ui.cards > .card > .content > .meta + .description,
-.ui.cards > .card > .content > .header + .description,
-.ui.card > .content > .meta + .description,
-.ui.card > .content > .header + .description {
- margin-top: @descriptionDistance;
-}
-
-/*----------------
- Floated Content
------------------*/
-
-.ui.cards > .card [class*="left floated"],
-.ui.card [class*="left floated"] {
- float: left;
-}
-.ui.cards > .card [class*="right floated"],
-.ui.card [class*="right floated"] {
- float: right;
-}
-
-/*--------------
- Aligned
----------------*/
-
-.ui.cards > .card [class*="left aligned"],
-.ui.card [class*="left aligned"] {
- text-align: left;
-}
-.ui.cards > .card [class*="center aligned"],
-.ui.card [class*="center aligned"] {
- text-align: center;
-}
-.ui.cards > .card [class*="right aligned"],
-.ui.card [class*="right aligned"] {
- text-align: right;
-}
-
-
-/*--------------
- Content Image
----------------*/
-
-.ui.cards > .card .content img,
-.ui.card .content img {
- display: inline-block;
- vertical-align: @contentImageVerticalAlign;
- width: @contentImageWidth;
-}
-.ui.cards > .card img.avatar,
-.ui.cards > .card .avatar img,
-.ui.card img.avatar,
-.ui.card .avatar img {
- width: @avatarSize;
- height: @avatarSize;
- border-radius: @avatarBorderRadius;
-}
-
-
-/*--------------
- Description
----------------*/
-
-.ui.cards > .card > .content > .description,
-.ui.card > .content > .description {
- clear: both;
- color: @descriptionColor;
-}
-
-/*--------------
- Paragraph
----------------*/
-
-.ui.cards > .card > .content p,
-.ui.card > .content p {
- margin: 0 0 @paragraphDistance;
-}
-.ui.cards > .card > .content p:last-child,
-.ui.card > .content p:last-child {
- margin-bottom: 0;
-}
-
-/*--------------
- Meta
----------------*/
-
-.ui.cards > .card .meta,
-.ui.card .meta {
- font-size: @metaFontSize;
- color: @metaColor;
-}
-.ui.cards > .card .meta *,
-.ui.card .meta * {
- margin-right: @metaSpacing;
-}
-.ui.cards > .card .meta :last-child,
-.ui.card .meta :last-child {
- margin-right: 0;
-}
-
-.ui.cards > .card .meta [class*="right floated"],
-.ui.card .meta [class*="right floated"] {
- margin-right: 0;
- margin-left: @metaSpacing;
-}
-
-/*--------------
- Links
----------------*/
-
-/* Generic */
-.ui.cards > .card > .content a:not(.ui),
-.ui.card > .content a:not(.ui) {
- color: @contentLinkColor;
- transition: @contentLinkTransition;
-}
-.ui.cards > .card > .content a:not(.ui):hover,
-.ui.card > .content a:not(.ui):hover {
- color: @contentLinkHoverColor;
-}
-
-/* Header */
-.ui.cards > .card > .content > a.header,
-.ui.card > .content > a.header {
- color: @headerLinkColor;
-}
-.ui.cards > .card > .content > a.header:hover,
-.ui.card > .content > a.header:hover {
- color: @headerLinkHoverColor;
-}
-
-/* Meta */
-.ui.cards > .card .meta > a:not(.ui),
-.ui.card .meta > a:not(.ui) {
- color: @metaLinkColor;
-}
-.ui.cards > .card .meta > a:not(.ui):hover,
-.ui.card .meta > a:not(.ui):hover {
- color: @metaLinkHoverColor;
-}
-
-/*--------------
- Buttons
----------------*/
-
-.ui.cards > .card > .buttons,
-.ui.card > .buttons,
-.ui.cards > .card > .button,
-.ui.card > .button {
- margin: @buttonMargin;
- width: @buttonWidth;
- &:last-child {
- margin-bottom: -@borderWidth;
- }
-}
-
-/*--------------
- Dimmer
----------------*/
-
-.ui.cards > .card .dimmer,
-.ui.card .dimmer {
- background: @dimmerColor;
- z-index: @dimmerZIndex;
-}
-
-/*--------------
- Labels
----------------*/
-
-/*-----Star----- */
-
-/* Icon */
-.ui.cards > .card > .content .star.icon,
-.ui.card > .content .star.icon {
- cursor: pointer;
- opacity: @actionOpacity;
- transition: @actionTransition;
-}
-.ui.cards > .card > .content .star.icon:hover,
-.ui.card > .content .star.icon:hover {
- opacity: @actionHoverOpacity;
- color: @starColor;
-}
-.ui.cards > .card > .content .active.star.icon,
-.ui.card > .content .active.star.icon {
- color: @starActiveColor;
-}
-
-/*-----Like----- */
-
-/* Icon */
-.ui.cards > .card > .content .like.icon,
-.ui.card > .content .like.icon {
- cursor: pointer;
- opacity: @actionOpacity;
- transition: @actionTransition;
-}
-.ui.cards > .card > .content .like.icon:hover,
-.ui.card > .content .like.icon:hover {
- opacity: @actionHoverOpacity;
- color: @likeColor;
-}
-.ui.cards > .card > .content .active.like.icon,
-.ui.card > .content .active.like.icon {
- color: @likeActiveColor;
-}
-
-/*----------------
- Extra Content
------------------*/
-
-.ui.cards > .card > .extra,
-.ui.card > .extra {
- max-width: 100%;
- min-height: 0 !important;
- flex-grow: 0;
- border-top: @extraDivider !important;
- position: @extraPosition;
- background: @extraBackground;
- width: @extraWidth;
- margin: @extraMargin;
- padding: @extraPadding;
- top: @extraTop;
- left: @extraLeft;
- color: @extraColor;
- box-shadow: @extraBoxShadow;
- transition: @extraTransition;
-}
-.ui.cards > .card > .extra a:not(.ui),
-.ui.card > .extra a:not(.ui) {
- color: @extraLinkColor;
-}
-.ui.cards > .card > .extra a:not(.ui):hover,
-.ui.card > .extra a:not(.ui):hover {
- color: @extraLinkHoverColor;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationCardHorizontal) {
- /*-------------------
- Horizontal
- --------------------*/
-
- .ui.horizontal.cards > .card,
- .ui.card.horizontal {
- flex-direction: row;
- flex-wrap: wrap;
- min-width: @horizontalMinWidth;
- width: @horizontalWidth;
- max-width: 100%;
- }
-
- .ui.horizontal.cards > .card > .image,
- .ui.card.horizontal > .image {
- border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius;
- width: @horizontalImageWidth;
- }
-
- .ui.horizontal.cards > .card > .image > img,
- .ui.card.horizontal > .image > img {
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- justify-content: center;
- align-items: center;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- width: 100%;
- height: 100%;
- border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius;
- }
- .ui.horizontal.cards > .card > .image:last-child > img,
- .ui.card.horizontal > .image:last-child > img {
- border-radius: 0 @defaultBorderRadius @defaultBorderRadius 0;
- }
- .ui.horizontal.cards > .card > .content, .ui.horizontal.card > .content {
- flex-basis: 1px;
- }
- .ui.horizontal.cards > .card > .extra, .ui.horizontal.card > .extra {
- flex-basis: 100%;
- }
-}
-
-& when (@variationCardRaised) {
- /*-------------------
- Raised
- --------------------*/
-
- .ui.raised.cards > .card,
- .ui.raised.card {
- box-shadow: @raisedShadow;
- }
- & when (@variationCardLink) {
- .ui.raised.cards a.card:hover,
- .ui.link.cards .raised.card:hover,
- a.ui.raised.card:hover,
- .ui.link.raised.card:hover {
- box-shadow: @raisedShadowHover;
- }
- }
-}
-
-& when (@variationCardCentered) {
- /*-------------------
- Centered
- --------------------*/
-
- .ui.centered.cards {
- justify-content: center;
- }
- .ui.centered.card {
- margin-left: auto;
- margin-right: auto;
- }
-}
-
-& when (@variationCardFluid) {
- /*-------------------
- Fluid
- --------------------*/
-
- .ui.fluid.card {
- width: 100%;
- max-width: 9999px;
- }
-}
-
-& when (@variationCardLink) {
- /*-------------------
- Link
- --------------------*/
-
- .ui.cards a.card,
- .ui.link.cards .card,
- a.ui.card,
- .ui.link.card {
- transform: none;
- }
-
-
- .ui.cards a.card:hover,
- .ui.link.cards .card:not(.icon):hover,
- a.ui.card:hover,
- .ui.link.card:hover {
- cursor: pointer;
- z-index: @linkHoverZIndex;
- background: @linkHoverBackground;
- border: @linkHoverBorder;
- box-shadow: @linkHoverBoxShadow;
- transform: @linkHoverTransform;
- }
-}
-
-/*-------------------
- Colors
---------------------*/
-
-each(@colors,{
- @color: replace(@key,'@','');
- @c: @colors[@@color][color];
- @h: @colors[@@color][hover];
- @l: @colors[@@color][light];
- @lh: @colors[@@color][lightHover];
-
- .ui.@{color}.cards > .card,
- .ui.cards > .@{color}.card,
- .ui.@{color}.card {
- box-shadow:
- @borderShadow,
- 0 @coloredShadowDistance 0 0 @c,
- @shadowBoxShadow
- ;
- &:hover {
- box-shadow:
- @borderShadow,
- 0 @coloredShadowDistance 0 0 @h,
- @shadowHoverBoxShadow
- ;
- }
- }
- & when (@variationCardInverted) {
- .ui.inverted.@{color}.cards > .card,
- .ui.inverted.cards > .@{color}.card,
- .ui.inverted.@{color}.card {
- box-shadow:
- 0 @shadowDistance 3px 0 @solidWhiteBorderColor,
- 0 @coloredShadowDistance 0 0 @l,
- 0 0 0 @borderWidth @solidWhiteBorderColor
- ;
- &:hover {
- box-shadow:
- 0 @shadowDistance 3px 0 @solidWhiteBorderColor,
- 0 @coloredShadowDistance 0 0 @lh,
- 0 0 0 @borderWidth @solidWhiteBorderColor
- ;
- }
- }
- }
-})
-
-/*--------------
- Card Count
----------------*/
-
-.ui.one.cards {
- margin-left: @oneCardOffset;
- margin-right: @oneCardOffset;
-}
-.ui.one.cards > .card {
- width: @oneCard;
-}
-
-.ui.two.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
-}
-.ui.two.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
-}
-
-.ui.three.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
-}
-.ui.three.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
-}
-
-.ui.four.cards {
- margin-left: @fourCardOffset;
- margin-right: @fourCardOffset;
-}
-.ui.four.cards > .card {
- width: @fourCard;
- margin-left: @fourCardSpacing;
- margin-right: @fourCardSpacing;
-}
-
-.ui.five.cards {
- margin-left: @fiveCardOffset;
- margin-right: @fiveCardOffset;
-}
-.ui.five.cards > .card {
- width: @fiveCard;
- margin-left: @fiveCardSpacing;
- margin-right: @fiveCardSpacing;
-}
-
-.ui.six.cards {
- margin-left: @sixCardOffset;
- margin-right: @sixCardOffset;
-}
-.ui.six.cards > .card {
- width: @sixCard;
- margin-left: @sixCardSpacing;
- margin-right: @sixCardSpacing;
-}
-
-.ui.seven.cards {
- margin-left: @sevenCardOffset;
- margin-right: @sevenCardOffset;
-}
-.ui.seven.cards > .card {
- width: @sevenCard;
- margin-left: @sevenCardSpacing;
- margin-right: @sevenCardSpacing;
-}
-
-.ui.eight.cards {
- margin-left: @eightCardOffset;
- margin-right: @eightCardOffset;
-}
-.ui.eight.cards > .card {
- width: @eightCard;
- margin-left: @eightCardSpacing;
- margin-right: @eightCardSpacing;
- font-size: 11px;
-}
-
-.ui.nine.cards {
- margin-left: @nineCardOffset;
- margin-right: @nineCardOffset;
-}
-.ui.nine.cards > .card {
- width: @nineCard;
- margin-left: @nineCardSpacing;
- margin-right: @nineCardSpacing;
- font-size: 10px;
-}
-
-.ui.ten.cards {
- margin-left: @tenCardOffset;
- margin-right: @tenCardOffset;
-}
-.ui.ten.cards > .card {
- width: @tenCard;
- margin-left: @tenCardSpacing;
- margin-right: @tenCardSpacing;
-}
-
-& when (@variationCardDoubling) {
- /*-------------------
- Doubling
- --------------------*/
-
- /* Mobile Only */
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.two.doubling.cards {
- margin-left: @oneCardOffset;
- margin-right: @oneCardOffset;
- }
- .ui.two.doubling.cards > .card {
- width: @oneCard;
- margin-left: @oneCardSpacing;
- margin-right: @oneCardSpacing;
- }
- .ui.three.doubling.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
- }
- .ui.three.doubling.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
- }
- .ui.four.doubling.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
- }
- .ui.four.doubling.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
- }
- .ui.five.doubling.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
- }
- .ui.five.doubling.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
- }
- .ui.six.doubling.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
- }
- .ui.six.doubling.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
- }
- .ui.seven.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.seven.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- .ui.eight.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.eight.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- .ui.nine.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.nine.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- .ui.ten.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.ten.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- }
-
- /* Tablet Only */
- @media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {
- .ui.two.doubling.cards {
- margin-left: @oneCardOffset;
- margin-right: @oneCardOffset;
- }
- .ui.two.doubling.cards > .card {
- width: @oneCard;
- margin-left: @oneCardSpacing;
- margin-right: @oneCardSpacing;
- }
- .ui.three.doubling.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
- }
- .ui.three.doubling.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
- }
- .ui.four.doubling.cards {
- margin-left: @twoCardOffset;
- margin-right: @twoCardOffset;
- }
- .ui.four.doubling.cards > .card {
- width: @twoCard;
- margin-left: @twoCardSpacing;
- margin-right: @twoCardSpacing;
- }
- .ui.five.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.five.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- .ui.six.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.six.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- .ui.eight.doubling.cards {
- margin-left: @threeCardOffset;
- margin-right: @threeCardOffset;
- }
- .ui.eight.doubling.cards > .card {
- width: @threeCard;
- margin-left: @threeCardSpacing;
- margin-right: @threeCardSpacing;
- }
- .ui.eight.doubling.cards {
- margin-left: @fourCardOffset;
- margin-right: @fourCardOffset;
- }
- .ui.eight.doubling.cards > .card {
- width: @fourCard;
- margin-left: @fourCardSpacing;
- margin-right: @fourCardSpacing;
- }
- .ui.nine.doubling.cards {
- margin-left: @fourCardOffset;
- margin-right: @fourCardOffset;
- }
- .ui.nine.doubling.cards > .card {
- width: @fourCard;
- margin-left: @fourCardSpacing;
- margin-right: @fourCardSpacing;
- }
- .ui.ten.doubling.cards {
- margin-left: @fiveCardOffset;
- margin-right: @fiveCardOffset;
- }
- .ui.ten.doubling.cards > .card {
- width: @fiveCard;
- margin-left: @fiveCardSpacing;
- margin-right: @fiveCardSpacing;
- }
- }
-}
-
-& when (@variationCardStackable) {
- /*-------------------
- Stackable
- --------------------*/
-
- @media only screen and (max-width : @largestMobileScreen) {
- .ui.stackable.cards {
- display: block !important;
- }
- .ui.stackable.cards .card:first-child {
- margin-top: 0 !important;
- }
- .ui.stackable.cards > .card {
- display: block !important;
- height: auto !important;
- margin: @stackableRowSpacing @stackableCardSpacing;
- padding: 0 !important;
- width: @stackableMargin !important;
- }
- }
-}
-
-/*--------------
- Size
----------------*/
-
-.ui.cards > .card {
- font-size: @medium;
-}
-& when not (@variationCardSizes = false) {
- each(@variationCardSizes, {
- @s: @@value;
- .ui.@{value}.cards .card {
- font-size: @s;
- }
- })
-}
-
-& when (@variationCardInverted) {
- /*-----------------
- Inverted
- ------------------*/
-
- .ui.inverted.cards > .card,
- .ui.inverted.card {
- background: @invertedBackground;
- box-shadow: @invertedBoxShadow;
- }
-
- /* Content */
- .ui.inverted.cards > .card > .content,
- .ui.inverted.card > .content {
- border-top: @invertedContentDivider;
- }
-
- /* Header */
- .ui.inverted.cards > .card > .content > .header,
- .ui.inverted.card > .content > .header {
- color: @invertedHeaderColor;
- }
-
- /* Description */
- .ui.inverted.cards > .card > .content > .description,
- .ui.inverted.card > .content > .description {
- color: @invertedDescriptionColor;
- }
-
- /* Meta */
- .ui.inverted.cards > .card .meta,
- .ui.inverted.card .meta {
- color: @invertedMetaColor;
- }
- .ui.inverted.cards > .card .meta > a:not(.ui),
- .ui.inverted.card .meta > a:not(.ui) {
- color: @invertedMetaLinkColor;
- }
- .ui.inverted.cards > .card .meta > a:not(.ui):hover,
- .ui.inverted.card .meta > a:not(.ui):hover {
- color: @invertedMetaLinkHoverColor;
- }
-
- /* Extra */
- .ui.inverted.cards > .card > .extra,
- .ui.inverted.card > .extra {
- border-top: @invertedExtraDivider !important;
- color: @invertedExtraColor;
- }
- .ui.inverted.cards > .card > .extra a:not(.ui),
- .ui.inverted.card > .extra a:not(.ui) {
- color: @invertedExtraLinkColor;
- }
- .ui.inverted.cards > .card > .extra a:not(.ui):hover,
- .ui.inverted.card > .extra a:not(.ui):hover {
- color: @extraLinkHoverColor;
- }
-
- /* Link card(s) */
- .ui.inverted.cards a.card:hover,
- .ui.inverted.link.cards .card:not(.icon):hover,
- a.inverted.ui.card:hover,
- .ui.inverted.link.card:hover {
- background: @invertedLinkHoverBackground;
- }
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/views/comment.less b/semantic/src/definitions/views/comment.less
deleted file mode 100644
index fedf40e..0000000
--- a/semantic/src/definitions/views/comment.less
+++ /dev/null
@@ -1,291 +0,0 @@
-/*!
- * # Fomantic-UI - Comment
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'view';
-@element : 'comment';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Standard
-*******************************/
-
-
-/*--------------
- Comments
----------------*/
-
-.ui.comments {
- margin: @margin;
- max-width: @maxWidth;
-}
-
-.ui.comments:first-child {
- margin-top: 0;
-}
-.ui.comments:last-child {
- margin-bottom: 0;
-}
-
-/*--------------
- Comment
----------------*/
-
-.ui.comments .comment {
- position: relative;
- background: @commentBackground;
- margin: @commentMargin;
- padding: @commentPadding;
- border: @commentBorder;
- border-top: @commentDivider;
- line-height: @commentLineHeight;
-}
-.ui.comments .comment:first-child {
- margin-top: @firstCommentMargin;
- padding-top: @firstCommentPadding;
-}
-
-
-/*--------------------
- Nested Comments
----------------------*/
-
-.ui.comments .comment > .comments {
- margin: @nestedCommentsMargin;
- padding: @nestedCommentsPadding;
-}
-.ui.comments .comment > .comments:before{
- position: absolute;
- top: 0;
- left: 0;
-}
-.ui.comments .comment > .comments .comment {
- border: @nestedCommentBorder;
- border-top: @nestedCommentDivider;
- background: @nestedCommentBackground;
-}
-
-/*--------------
- Avatar
----------------*/
-
-.ui.comments .comment .avatar {
- display: @avatarDisplay;
- width: @avatarWidth;
- height: @avatarHeight;
- float: @avatarFloat;
- margin: @avatarMargin;
-}
-.ui.comments .comment img.avatar,
-.ui.comments .comment .avatar img {
- display: block;
- margin: 0 auto;
- width: 100%;
- height: 100%;
- border-radius: @avatarBorderRadius;
-}
-
-/*--------------
- Content
----------------*/
-
-.ui.comments .comment > .content {
- display: block;
-}
-/* If there is an avatar move content over */
-.ui.comments .comment > .avatar ~ .content {
- margin-left: @contentMargin;
-}
-
-/*--------------
- Author
----------------*/
-
-.ui.comments .comment .author {
- font-size: @authorFontSize;
- color: @authorColor;
- font-weight: @authorFontWeight;
-}
-.ui.comments .comment a.author {
- cursor: pointer;
-}
-.ui.comments .comment a.author:hover {
- color: @authorHoverColor;
-}
-
-/*--------------
- Metadata
----------------*/
-
-.ui.comments .comment .metadata {
- display: @metadataDisplay;
- margin-left: @metadataSpacing;
- color: @metadataColor;
- font-size: @metadataFontSize;
-}
-.ui.comments .comment .metadata > * {
- display: inline-block;
- margin: 0 @metadataContentSpacing 0 0;
-}
-.ui.comments .comment .metadata > :last-child {
- margin-right: 0;
-}
-
-/*--------------------
- Comment Text
----------------------*/
-
-.ui.comments .comment .text {
- margin: @textMargin;
- font-size: @textFontSize;
- word-wrap: @textWordWrap;
- color: @textColor;
- line-height: @textLineHeight;
-}
-
-
-/*--------------------
- User Actions
----------------------*/
-
-.ui.comments .comment .actions {
- font-size: @actionFontSize;
-}
-.ui.comments .comment .actions a {
- cursor: pointer;
- display: inline-block;
- margin: 0 @actionContentDistance 0 0;
- color: @actionLinkColor;
-}
-.ui.comments .comment .actions a:last-child {
- margin-right: 0;
-}
-.ui.comments .comment .actions a.active,
-.ui.comments .comment .actions a:hover {
- color: @actionLinkHoverColor;
-}
-
-/*--------------------
- Reply Form
----------------------*/
-
-.ui.comments > .reply.form {
- margin-top: @replyDistance;
-}
-.ui.comments .comment .reply.form {
- width: 100%;
- margin-top: @commentReplyDistance;
-}
-.ui.comments .reply.form textarea {
- font-size: @replyFontSize;
- height: @replyHeight;
-}
-
-/*******************************
- State
-*******************************/
-
-.ui.collapsed.comments,
-.ui.comments .collapsed.comments,
-.ui.comments .collapsed.comment {
- display: none;
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationCommentThreaded) {
- /*--------------------
- Threaded
- ---------------------*/
-
- .ui.threaded.comments .comment > .comments {
- margin: @threadedCommentMargin;
- padding: @threadedCommentPadding;
- box-shadow: @threadedCommentBoxShadow;
- }
-}
-
-& when (@variationCommentMinimal) {
- /*--------------------
- Minimal
- ---------------------*/
-
- .ui.minimal.comments .comment .actions {
- opacity: 0;
- position: @minimalActionPosition;
- top: @minimalActionTop;
- right: @minimalActionRight;
- left: @minimalActionLeft;
- transition: @minimalTransition;
- transition-delay: @minimalTransitionDelay;
- }
- .ui.minimal.comments .comment > .content:hover > .actions {
- opacity: 1;
- }
-}
-
-
-/*-------------------
- Sizes
---------------------*/
-
-.ui.comments {
- font-size: @medium;
-}
-& when not (@variationCommentSizes = false) {
- each(@variationCommentSizes, {
- @s: @@value;
- .ui.@{value}.comments {
- font-size: @s;
- }
- })
-}
-
-
-& when (@variationCommentInverted) {
- /*-------------------
- Inverted
- --------------------*/
- .ui.inverted.comments .comment {
- background-color: @black;
- }
-
- .ui.inverted.comments .comment .author,
- .ui.inverted.comments .comment .text {
- color: @invertedTextColor;
- }
-
- .ui.inverted.comments .comment .metadata,
- .ui.inverted.comments .comment .actions a {
- color: @invertedLightTextColor;
- }
-
- .ui.inverted.comments .comment a.author:hover,
- .ui.inverted.comments .comment .actions a.active,
- .ui.inverted.comments .comment .actions a:hover {
- color: @invertedHoveredTextColor;
- }
- & when (@variationCommentThreaded) {
- .ui.inverted.threaded.comments .comment > .comments {
- box-shadow: -1px 0 0 @solidWhiteBorderColor;
- }
- }
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/views/feed.less b/semantic/src/definitions/views/feed.less
deleted file mode 100644
index 20efe8f..0000000
--- a/semantic/src/definitions/views/feed.less
+++ /dev/null
@@ -1,304 +0,0 @@
-/*!
- * # Fomantic-UI - Feed
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'view';
-@element : 'feed';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Activity Feed
-*******************************/
-
-.ui.feed {
- margin: @margin;
-}
-.ui.feed:first-child {
- margin-top: 0;
-}
-.ui.feed:last-child {
- margin-bottom: 0;
-}
-
-
-/*******************************
- Content
-*******************************/
-
-/* Event */
-.ui.feed > .event {
- display: flex;
- flex-direction: row;
- width: @eventWidth;
- padding: @eventPadding;
- margin: @eventMargin;
- background: @eventBackground;
- border-top: @eventDivider;
-}
-.ui.feed > .event:first-child {
- border-top: 0;
- padding-top: 0;
-}
-.ui.feed > .event:last-child {
- padding-bottom: 0;
-}
-
-/* Event Label */
-.ui.feed > .event > .label {
- display: block;
- flex: 0 0 auto;
- width: @labelWidth;
- height: @labelHeight;
- align-self: @labelAlignSelf;
- text-align: @labelTextAlign;
-}
-.ui.feed > .event > .label .icon {
- opacity: @iconLabelOpacity;
- font-size: @iconLabelSize;
- width: @iconLabelWidth;
- padding: @iconLabelPadding;
- background: @iconLabelBackground;
- border: @iconLabelBorder;
- border-radius: @iconLabelBorderRadius;
- color: @iconLabelColor;
-}
-.ui.feed > .event > .label img {
- width: @imageLabelWidth;
- height: @imageLabelHeight;
- border-radius: @imageLabelBorderRadius;
-}
-.ui.feed > .event > .label + .content {
- margin: @labeledContentMargin;
-}
-
-/*--------------
- Content
----------------*/
-
-/* Content */
-.ui.feed > .event > .content {
- display: block;
- flex: 1 1 auto;
- align-self: @contentAlignSelf;
- text-align: @contentTextAlign;
- word-wrap: @contentWordWrap;
-}
-.ui.feed > .event:last-child > .content {
- padding-bottom: @lastLabeledContentPadding;
-}
-
-/* Link */
-.ui.feed > .event > .content a {
- cursor: pointer;
-}
-
-/*--------------
- Date
----------------*/
-
-.ui.feed > .event > .content .date {
- margin: @dateMargin;
- padding: @datePadding;
- color: @dateColor;
- font-weight: @dateFontWeight;
- font-size: @dateFontSize;
- font-style: @dateFontStyle;
-}
-
-/*--------------
- Summary
----------------*/
-
-.ui.feed > .event > .content .summary {
- margin: @summaryMargin;
- font-size: @summaryFontSize;
- font-weight: @summaryFontWeight;
- color: @summaryColor;
-}
-
-/* Summary Image */
-.ui.feed > .event > .content .summary img {
- display: inline-block;
- width: @summaryImageWidth;
- height: @summaryImageHeight;
- margin: @summaryImageMargin;
- border-radius: @summaryImageBorderRadius;
- vertical-align: @summaryImageVerticalAlign;
-}
-/*--------------
- User
----------------*/
-
-.ui.feed > .event > .content .user {
- display: inline-block;
- font-weight: @userFontWeight;
- margin-right: @userDistance;
- vertical-align: baseline;
-}
-.ui.feed > .event > .content .user img {
- margin: @userImageMargin;
- width: @userImageWidth;
- height: @userImageHeight;
- vertical-align: @userImageVerticalAlign;
-}
-/*--------------
- Inline Date
----------------*/
-
-/* Date inside Summary */
-.ui.feed > .event > .content .summary > .date {
- display: @summaryDateDisplay;
- float: @summaryDateFloat;
- font-weight: @summaryDateFontWeight;
- font-size: @summaryDateFontSize;
- font-style: @summaryDateFontStyle;
- margin: @summaryDateMargin;
- padding: @summaryDatePadding;
- color: @summaryDateColor;
-}
-
-/*--------------
- Extra Summary
----------------*/
-
-.ui.feed > .event > .content .extra {
- margin: @extraMargin;
- background: @extraBackground;
- padding: @extraPadding;
- color: @extraColor;
-}
-
-/* Images */
-.ui.feed > .event > .content .extra.images img {
- display: inline-block;
- margin: @extraImageMargin;
- width: @extraImageWidth;
-}
-
-/* Text */
-.ui.feed > .event > .content .extra.text {
- padding: @extraTextPadding;
- border-left: @extraTextPointer;
- font-size: @extraTextFontSize;
- max-width: @extraTextMaxWidth;
- line-height: @extraTextLineHeight;
-}
-
-/*--------------
- Meta
----------------*/
-
-.ui.feed > .event > .content .meta {
- display: @metadataDisplay;
- font-size: @metadataFontSize;
- margin: @metadataMargin;
- background: @metadataBackground;
- border: @metadataBorder;
- border-radius: @metadataBorderRadius;
- box-shadow: @metadataBoxShadow;
- padding: @metadataPadding;
- color: @metadataColor;
-}
-
-.ui.feed > .event > .content .meta > * {
- position: relative;
- margin-left: @metadataElementSpacing;
-}
-.ui.feed > .event > .content .meta > *:after {
- content: @metadataDivider;
- color: @metadataDividerColor;
- top: 0;
- left: @metadataDividerOffset;
- opacity: 1;
- position: absolute;
- vertical-align: top;
-}
-
-.ui.feed > .event > .content .meta .like {
- color: @likeColor;
- transition: @likeTransition;
-}
-.ui.feed > .event > .content .meta .like:hover i.icon {
- color: @likeHoverColor;
-}
-.ui.feed > .event > .content .meta .active.like i.icon {
- color: @likeActiveColor;
-}
-
-/* First element */
-.ui.feed > .event > .content .meta > :first-child {
- margin-left: 0;
-}
-.ui.feed > .event > .content .meta > :first-child::after {
- display: none;
-}
-
-/* Action */
-.ui.feed > .event > .content .meta a,
-.ui.feed > .event > .content .meta > i.icon {
- cursor: @metadataActionCursor;
- opacity: @metadataActionOpacity;
- color: @metadataActionColor;
- transition: @metadataActionTransition;
-}
-.ui.feed > .event > .content .meta a:hover,
-.ui.feed > .event > .content .meta a:hover i.icon,
-.ui.feed > .event > .content .meta > i.icon:hover {
- color: @metadataActionHoverColor;
-}
-
-
-
-/*******************************
- Variations
-*******************************/
-
-.ui.feed {
- font-size: @medium;
-}
-& when not (@variationFeedSizes = false) {
- each(@variationFeedSizes, {
- @s: @@value;
- .ui.@{value}.feed {
- font-size: @s;
- }
- })
-}
-
-& when (@variationFeedInverted) {
- /*------------------
- Inverted
- -------------------*/
-
- .ui.inverted.feed > .event {
- background: @black;
- }
-
- .ui.inverted.feed > .event > .content .date,
- .ui.inverted.feed > .event > .content .meta .like {
- color: @invertedLightTextColor;
- }
-
- .ui.inverted.feed > .event > .content .summary,
- .ui.inverted.feed > .event > .content .extra.text {
- color: @invertedTextColor;
- }
-
- .ui.inverted.feed > .event > .content .meta .like:hover {
- color: @invertedSelectedTextColor;
- }
-}
-
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/views/item.less b/semantic/src/definitions/views/item.less
deleted file mode 100644
index 2c9ed2e..0000000
--- a/semantic/src/definitions/views/item.less
+++ /dev/null
@@ -1,559 +0,0 @@
-/*!
- * # Fomantic-UI - Item
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'view';
-@element : 'item';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Standard
-*******************************/
-
-/*--------------
- Item
----------------*/
-
-.ui.items > .item {
- display: @display;
- margin: @itemSpacing 0;
- width: @width;
- min-height: @minHeight;
- background: @background;
- padding: @padding;
-
- border: @border;
- border-radius: @borderRadius;
- box-shadow: @boxShadow;
- transition: @transition;
- z-index: @zIndex;
-}
-.ui.items > .item a {
- cursor: pointer;
-}
-
-/*--------------
- Items
----------------*/
-
-.ui.items {
- margin: @groupMargin;
-}
-
-.ui.items:first-child {
- margin-top: 0 !important;
-}
-.ui.items:last-child {
- margin-bottom: 0 !important;
-}
-
-/*--------------
- Item
----------------*/
-
-.ui.items > .item:after {
- display: block;
- content: ' ';
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-.ui.items > .item:first-child {
- margin-top: 0;
-}
-.ui.items > .item:last-child {
- margin-bottom: 0;
-}
-
-
-
-/*--------------
- Images
----------------*/
-
-.ui.items > .item > .image {
- position: relative;
- flex: 0 0 auto;
- display: @imageDisplay;
- float: @imageFloat;
- margin: @imageMargin;
- padding: @imagePadding;
- max-height: @imageMaxHeight;
- align-self: @imageVerticalAlign;
-}
-.ui.items > .item > .image > img {
- display: block;
- width: 100%;
- height: auto;
- border-radius: @imageBorderRadius;
- border: @imageBorder;
-}
-
-.ui.items > .item > .image:only-child > img {
- border-radius: @borderRadius;
-}
-
-
-/*--------------
- Content
----------------*/
-
-.ui.items > .item > .content {
- display: block;
- flex: 1 1 auto;
- background: @contentBackground;
- color: @contentColor;
- margin: @contentMargin;
- padding: @contentPadding;
- box-shadow: @contentBoxShadow;
- font-size: @contentFontSize;
- border: @contentBorder;
- border-radius: @contentBorderRadius;
-}
-.ui.items > .item > .content:after {
- display: block;
- content: ' ';
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-
-.ui.items > .item > .image + .content {
- min-width: 0;
- width: @contentWidth;
- display: @contentDisplay;
- margin-left: @contentOffset;
- align-self: @contentVerticalAlign;
- padding-left: @contentImageDistance;
-}
-
-.ui.items > .item > .content > .header {
- display: inline-block;
- margin: @headerMargin;
- font-family: @headerFont;
- font-weight: @headerFontWeight;
- color: @headerColor;
-}
-/* Default Header Size */
-.ui.items > .item > .content > .header:not(.ui) {
- font-size: @headerFontSize;
-}
-
-/*--------------
- Floated
----------------*/
-
-.ui.items > .item [class*="left floated"] {
- float: left;
-}
-.ui.items > .item [class*="right floated"] {
- float: right;
-}
-
-
-/*--------------
- Content Image
----------------*/
-
-.ui.items > .item .content img {
- align-self: @contentImageVerticalAlign;
- width: @contentImageWidth;
-}
-.ui.items > .item img.avatar,
-.ui.items > .item .avatar img {
- width: @avatarSize;
- height: @avatarSize;
- border-radius: @avatarBorderRadius;
-}
-
-
-/*--------------
- Description
----------------*/
-
-.ui.items > .item > .content > .description {
- margin-top: @descriptionDistance;
- max-width: @descriptionMaxWidth;
- font-size: @descriptionFontSize;
- line-height: @descriptionLineHeight;
- color: @descriptionColor;
-}
-
-/*--------------
- Paragraph
----------------*/
-
-.ui.items > .item > .content p {
- margin: 0 0 @paragraphDistance;
-}
-.ui.items > .item > .content p:last-child {
- margin-bottom: 0;
-}
-
-/*--------------
- Meta
----------------*/
-
-.ui.items > .item .meta {
- margin: @metaMargin;
- font-size: @metaFontSize;
- line-height: @metaLineHeight;
- color: @metaColor;
-}
-.ui.items > .item .meta * {
- margin-right: @metaSpacing;
-}
-.ui.items > .item .meta :last-child {
- margin-right: 0;
-}
-
-.ui.items > .item .meta [class*="right floated"] {
- margin-right: 0;
- margin-left: @metaSpacing;
-}
-
-/*--------------
- Links
----------------*/
-
-/* Generic */
-.ui.items > .item > .content a:not(.ui) {
- color: @contentLinkColor;
- transition: @contentLinkTransition;
-}
-.ui.items > .item > .content a:not(.ui):hover {
- color: @contentLinkHoverColor;
-}
-
-/* Header */
-.ui.items > .item > .content > a.header {
- color: @headerLinkColor;
-}
-.ui.items > .item > .content > a.header:hover {
- color: @headerLinkHoverColor;
-}
-
-/* Meta */
-.ui.items > .item .meta > a:not(.ui) {
- color: @metaLinkColor;
-}
-.ui.items > .item .meta > a:not(.ui):hover {
- color: @metaLinkHoverColor;
-}
-
-
-
-/*--------------
- Labels
----------------*/
-
-/*-----Star----- */
-
-/* Icon */
-.ui.items > .item > .content .favorite.icon {
- cursor: pointer;
- opacity: @actionOpacity;
- transition: @actionTransition;
-}
-.ui.items > .item > .content .favorite.icon:hover {
- opacity: @actionHoverOpacity;
- color: @favoriteColor;
-}
-.ui.items > .item > .content .active.favorite.icon {
- color: @favoriteActiveColor;
-}
-
-/*-----Like----- */
-
-/* Icon */
-.ui.items > .item > .content .like.icon {
- cursor: pointer;
- opacity: @actionOpacity;
- transition: @actionTransition;
-}
-.ui.items > .item > .content .like.icon:hover {
- opacity: @actionHoverOpacity;
- color: @likeColor;
-}
-.ui.items > .item > .content .active.like.icon {
- color: @likeActiveColor;
-}
-
-/*----------------
- Extra Content
------------------*/
-
-.ui.items > .item .extra {
- display: @extraDisplay;
- position: @extraPosition;
- background: @extraBackground;
- margin: @extraMargin;
- width: @extraWidth;
- padding: @extraPadding;
- top: @extraTop;
- left: @extraLeft;
- color: @extraColor;
- box-shadow: @extraBoxShadow;
- transition: @extraTransition;
- border-top: @extraDivider;
-}
-.ui.items > .item .extra > * {
- margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0;
-}
-.ui.items > .item .extra > [class*="right floated"] {
- margin: (@extraRowSpacing / 2) 0 (@extraRowSpacing / 2) @extraHorizontalSpacing;
-}
-
-.ui.items > .item .extra:after {
- display: block;
- content: ' ';
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-
-
-/*******************************
- Responsive
-*******************************/
-
-/* Default Image Width */
-.ui.items > .item > .image:not(.ui) {
- width: @imageWidth;
-}
-
-
-/* Tablet Only */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
- .ui.items > .item {
- margin: @tabletItemSpacing 0;
- }
- .ui.items > .item > .image:not(.ui) {
- width: @tabletImageWidth;
- }
- .ui.items > .item > .image + .content {
- display: block;
- padding: 0 0 0 @tabletContentImageDistance;
- }
-
-}
-
-/* Mobile Only */
-@media only screen and (max-width: @largestMobileScreen) {
- .ui.items:not(.unstackable) > .item {
- flex-direction: column;
- margin: @mobileItemSpacing 0;
- }
- .ui.items:not(.unstackable) > .item > .image {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .ui.items:not(.unstackable) > .item > .image,
- .ui.items:not(.unstackable) > .item > .image > img {
- max-width: 100% !important;
- width: @mobileImageWidth !important;
- max-height: @mobileImageMaxHeight !important;
- }
- .ui.items:not(.unstackable) > .item > .image + .content {
- display: block;
- padding: @mobileContentImageDistance 0 0;
- }
-}
-
-
-/*******************************
- Variations
-*******************************/
-
-& when (@variationItemAligned) {
- /*-------------------
- Aligned
- --------------------*/
-
- .ui.items > .item > .image + [class*="top aligned"].content {
- align-self: flex-start;
- }
- .ui.items > .item > .image + [class*="middle aligned"].content {
- align-self: center;
- }
- .ui.items > .item > .image + [class*="bottom aligned"].content {
- align-self: flex-end;
- }
-}
-
-& when (@variationItemRelaxed) {
- /*--------------
- Relaxed
- ---------------*/
-
- .ui.relaxed.items > .item {
- margin: @relaxedItemSpacing 0;
- }
- .ui[class*="very relaxed"].items > .item {
- margin: @veryRelaxedItemSpacing 0;
- }
-}
-
-& when (@variationItemDivided) {
- /*-------------------
- Divided
- --------------------*/
-
- .ui.divided.items > .item {
- border-top: @dividedBorder;
- margin: @dividedMargin;
- padding: @dividedPadding;
- }
- .ui.divided.items > .item:first-child {
- border-top: none;
- margin-top: @dividedFirstLastMargin !important;
- padding-top: @dividedFirstLastPadding !important;
- }
- .ui.divided.items > .item:last-child {
- margin-bottom: @dividedFirstLastMargin !important;
- padding-bottom: @dividedFirstLastPadding !important;
- }
- & when (@variationItemRelaxed) {
- /* Relaxed Divided */
- .ui.relaxed.divided.items > .item {
- margin: 0;
- padding: @relaxedItemSpacing 0;
- }
- .ui[class*="very relaxed"].divided.items > .item {
- margin: 0;
- padding: @veryRelaxedItemSpacing 0;
- }
- }
-}
-
-& when (@variationItemLink) {
- /*-------------------
- Link
- --------------------*/
-
- .ui.items a.item:hover,
- .ui.link.items > .item:hover {
- cursor: pointer;
- }
-
- .ui.items a.item:hover .content .header,
- .ui.link.items > .item:hover .content .header {
- color: @headerLinkHoverColor;
- }
-}
-
-
-/*--------------
- Size
----------------*/
-
-.ui.items > .item {
- font-size: @relativeMedium;
-}
-& when not (@variationItemSizes = false) {
- each(@variationItemSizes, {
- @s: @{value}ItemSize;
- .ui.@{value}.items > .item {
- font-size: @@s;
- }
- })
-}
-
-& when (@variationItemUnstackable) {
- /*---------------
- Unstackable
- ----------------*/
-
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.unstackable.items > .item > .image,
- .ui.unstackable.items > .item > .image > img {
- width: @unstackableMobileImageWidth !important;
- }
- }
-}
-
-& when (@variationItemInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.items > .item {
- background: @invertedBackground;
- }
- .ui.inverted.items > .item > .content {
- background: @invertedContentBackground;
- color: @invertedContentColor;
- }
- .ui.inverted.items > .item .extra {
- background: @invertedExtraBackground;
- }
- .ui.inverted.items > .item > .content > .header {
- color: @invertedHeaderColor;
- }
- .ui.inverted.items > .item > .content > .description {
- color: @invertedDescriptionColor;
- }
- .ui.inverted.items > .item .meta {
- color: @invertedMetaColor;
- }
- .ui.inverted.items > .item > .content a:not(.ui) {
- color: @invertedContentLinkColor;
- }
- .ui.inverted.items > .item > .content a:not(.ui):hover {
- color: @invertedContentLinkHoverColor;
- }
- .ui.inverted.items > .item > .content > a.header {
- color: @invertedHeaderLinkColor;
- }
- .ui.inverted.items > .item > .content > a.header:hover {
- color: @invertedHeaderLinkHoverColor;
- }
- .ui.inverted.items > .item .meta > a:not(.ui) {
- color: @invertedMetaLinkColor;
- }
- .ui.inverted.items > .item .meta > a:not(.ui):hover {
- color: @invertedMetaLinkHoverColor;
- }
- .ui.inverted.items > .item > .content .favorite.icon:hover {
- color: @invertedFavoriteColor;
- }
- .ui.inverted.items > .item > .content .active.favorite.icon {
- color: @invertedFavoriteActiveColor;
- }
- .ui.inverted.items > .item > .content .like.icon:hover {
- color: @invertedLikeColor;
- }
- .ui.inverted.items > .item > .content .active.like.icon {
- color: @invertedLikeActiveColor;
- }
- .ui.inverted.items > .item .extra {
- color: @invertedExtraColor;
- }
- .ui.inverted.items a.item:hover .content .header,
- .ui.inverted.link.items > .item:hover .content .header {
- color: @invertedHeaderLinkHoverColor;
- }
- .ui.inverted.divided.items > .item {
- border-top: @invertedDividedBorder;
- }
- .ui.inverted.divided.items > .item:first-child {
- border-top: none;
- }
-}
-
-.loadUIOverrides();
diff --git a/semantic/src/definitions/views/statistic.less b/semantic/src/definitions/views/statistic.less
deleted file mode 100644
index 9145aeb..0000000
--- a/semantic/src/definitions/views/statistic.less
+++ /dev/null
@@ -1,421 +0,0 @@
-/*!
- * # Fomantic-UI - Statistic
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
- Theme
-*******************************/
-
-@type : 'view';
-@element : 'statistic';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
- Statistic
-*******************************/
-
-/* Standalone */
-.ui.statistic {
- display: inline-flex;
- flex-direction: column;
- margin: @margin;
- max-width: @maxWidth;
-}
-
-.ui.statistic + .ui.statistic {
- margin: 0 0 0 @horizontalSpacing;
-}
-
-.ui.statistic:first-child {
- margin-top: 0;
-}
-.ui.statistic:last-child {
- margin-bottom: 0;
-}
-
-
-
-/*******************************
- Group
-*******************************/
-
-/* Grouped */
-.ui.statistics {
- display: flex;
- align-items: flex-start;
- flex-wrap: wrap;
-}
-.ui.statistics > .statistic {
- display: inline-flex;
- flex: 0 1 auto;
- flex-direction: column;
- margin: @elementMargin;
- max-width: @elementMaxWidth;
-}
-.ui.statistics {
- display: flex;
- margin: @groupMargin;
-}
-
-/* Clearing */
-.ui.statistics:after {
- display: block;
- content: ' ';
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-
-.ui.statistics:first-child {
- margin-top: 0;
-}
-
-
-/*******************************
- Content
-*******************************/
-
-
-/*--------------
- Value
----------------*/
-
-.ui.statistics .statistic > .value,
-.ui.statistic > .value {
- font-family: @valueFont;
- font-size: @valueSize;
- font-weight: @valueFontWeight;
- line-height: @valueLineHeight;
- color: @valueColor;
- text-transform: @valueTextTransform;
- text-align: @textAlign;
-}
-
-/*--------------
- Label
----------------*/
-
-.ui.statistics .statistic > .label,
-.ui.statistic > .label {
- font-family: @labelFont;
- font-size: @labelSize;
- font-weight: @labelFontWeight;
- color: @labelColor;
- text-transform: @labelTextTransform;
- text-align: @textAlign;
-}
-
-/* Top Label */
-.ui.statistics .statistic > .label ~ .value,
-.ui.statistic > .label ~ .value {
- margin-top: @topLabelDistance;
-}
-
-/* Bottom Label */
-.ui.statistics .statistic > .value ~ .label,
-.ui.statistic > .value ~ .label {
- margin-top: @bottomLabelDistance;
-}
-
-
-
-/*******************************
- Types
-*******************************/
-
-/*--------------
- Icon Value
----------------*/
-
-.ui.statistics .statistic > .value > i.icon,
-.ui.statistic > .value > i.icon {
- opacity: 1;
- width: auto;
- margin: 0;
-}
-
-/*--------------
- Text Value
----------------*/
-
-.ui.statistics .statistic > .text.value,
-.ui.statistic > .text.value {
- line-height: @textValueLineHeight;
- min-height: @textValueMinHeight;
- font-weight: @textValueFontWeight;
- text-align: center;
-}
-.ui.statistics .statistic > .text.value + .label,
-.ui.statistic > .text.value + .label {
- text-align: center;
-}
-
-/*--------------
- Image Value
----------------*/
-
-.ui.statistics .statistic > .value img,
-.ui.statistic > .value img {
- max-height: @imageHeight;
- vertical-align: @imageVerticalAlign;
-}
-
-
-
-/*******************************
- Variations
-*******************************/
-
-
-/*--------------
- Count
----------------*/
-
-
-.ui.ten.statistics {
- margin: @itemGroupMargin;
-}
-.ui.ten.statistics .statistic {
- min-width: @tenColumn;
- margin: @itemMargin;
-}
-
-.ui.nine.statistics {
- margin: @itemGroupMargin;
-}
-.ui.nine.statistics .statistic {
- min-width: @nineColumn;
- margin: @itemMargin;
-}
-
-.ui.eight.statistics {
- margin: @itemGroupMargin;
-}
-.ui.eight.statistics .statistic {
- min-width: @eightColumn;
- margin: @itemMargin;
-}
-
-.ui.seven.statistics {
- margin: @itemGroupMargin;
-}
-.ui.seven.statistics .statistic {
- min-width: @sevenColumn;
- margin: @itemMargin;
-}
-
-.ui.six.statistics {
- margin: @itemGroupMargin;
-}
-.ui.six.statistics .statistic {
- min-width: @sixColumn;
- margin: @itemMargin;
-}
-
-.ui.five.statistics {
- margin: @itemGroupMargin;
-}
-.ui.five.statistics .statistic {
- min-width: @fiveColumn;
- margin: @itemMargin;
-}
-
-.ui.four.statistics {
- margin: @itemGroupMargin;
-}
-.ui.four.statistics .statistic {
- min-width: @fourColumn;
- margin: @itemMargin;
-}
-
-.ui.three.statistics {
- margin: @itemGroupMargin;
-}
-.ui.three.statistics .statistic {
- min-width: @threeColumn;
- margin: @itemMargin;
-}
-
-.ui.two.statistics {
- margin: @itemGroupMargin;
-}
-.ui.two.statistics .statistic {
- min-width: @twoColumn;
- margin: @itemMargin;
-}
-
-.ui.one.statistics {
- margin: @itemGroupMargin;
-}
-.ui.one.statistics .statistic {
- min-width: @oneColumn;
- margin: @itemMargin;
-}
-
-
-
-& when (@variationStatisticHorizontal) {
- /*--------------
- Horizontal
- ---------------*/
-
- .ui.horizontal.statistic {
- flex-direction: row;
- align-items: center;
- }
- .ui.horizontal.statistics {
- flex-direction: column;
- margin: 0;
- max-width: none;
- }
- .ui.horizontal.statistics .statistic {
- flex-direction: row;
- align-items: center;
- max-width: none;
- margin: @horizontalGroupElementMargin;
- }
-
- .ui.horizontal.statistic > .text.value,
- .ui.horizontal.statistics > .statistic > .text.value {
- min-height: 0 !important;
- }
- .ui.horizontal.statistics .statistic > .value > i.icon,
- .ui.horizontal.statistic > .value > i.icon {
- width: @iconWidth;
- }
-
- .ui.horizontal.statistics .statistic > .value,
- .ui.horizontal.statistic > .value {
- display: inline-block;
- vertical-align: middle;
- }
- .ui.horizontal.statistics .statistic > .label,
- .ui.horizontal.statistic > .label {
- display: inline-block;
- vertical-align: middle;
- margin: 0 0 0 @horizontalLabelDistance;
- }
-}
-
-& when (@variationStatisticInverted) {
- /*--------------
- Inverted
- ---------------*/
-
- .ui.inverted.statistics .statistic > .value,
- .ui.inverted.statistic .value {
- color: @invertedValueColor;
- }
- .ui.inverted.statistics .statistic > .label,
- .ui.inverted.statistic .label {
- color: @invertedLabelColor;
- }
-}
-
-/*--------------
- Colors
----------------*/
-
-each(@colors,{
- @color: replace(@key,'@','');
- @c: @colors[@@color][color];
- @l: @colors[@@color][light];
-
- .ui.@{color}.statistics .statistic > .value,
- .ui.statistics .@{color}.statistic > .value,
- .ui.@{color}.statistic > .value {
- color: @c;
- }
- & when (@variationStatisticInverted) {
- .ui.inverted.@{color}.statistics .statistic > .value,
- .ui.statistics .inverted.@{color}.statistic > .value,
- .ui.inverted.@{color}.statistic > .value {
- color: @l;
- }
- }
-})
-
-& when (@variationStatisticFloated) {
- /*--------------
- Floated
- ---------------*/
-
- .ui[class*="left floated"].statistic {
- float: left;
- margin: @leftFloatedMargin;
- }
- .ui[class*="right floated"].statistic {
- float: right;
- margin: @rightFloatedMargin;
- }
- .ui.floated.statistic:last-child {
- margin-bottom: 0;
- }
-}
-
-& when (@variationStatisticStackable) {
- /*--------------
- Stackable
- ---------------*/
-
- @media only screen and (max-width: @largestMobileScreen) {
- .ui.stackable.statistics {
- width: auto;
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
- .ui.stackable.statistics > .statistic {
- width: 100% !important;
- margin: 0 0 !important;
- padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
- }
- }
-}
-
-/*--------------
- Sizes
----------------*/
-
-
-/* Medium */
-.ui.statistics .statistic > .value,
-.ui.statistic > .value {
- font-size: @valueSize;
-}
-.ui.horizontal.statistics .statistic > .value,
-.ui.horizontal.statistic > .value {
- font-size: @horizontalValueSize;
-}
-.ui.statistics .statistic > .text.value,
-.ui.statistic > .text.value {
- font-size: @textValueSize;
-}
-& when not (@variationStatisticSizes = false) {
- each(@variationStatisticSizes, {
- @s: @{value}ValueSize;
- @hs: @{value}HorizontalValueSize;
- @ts: @{value}TextValueSize;
- .ui.@{value}.statistics .statistic > .value,
- .ui.@{value}.statistic > .value {
- font-size: @@s;
- }
- .ui.@{value}.horizontal.statistics .statistic > .value,
- .ui.@{value}.horizontal.statistic > .value {
- font-size: @@hs;
- }
- .ui.@{value}.statistics .statistic > .text.value,
- .ui.@{value}.statistic > .text.value {
- font-size: @@ts;
- }
- })
-}
-
-.loadUIOverrides();