diff --git a/_site/collections/menu.overrides b/_site/collections/menu.overrides index c172e5f..cba59ef 100644 --- a/_site/collections/menu.overrides +++ b/_site/collections/menu.overrides @@ -1,3 +1,3 @@ /******************************* Site Overrides -*******************************/ \ No newline at end of file +*******************************/ diff --git a/_site/elements/flag.variables b/_site/elements/flag.variables index e3e125d..728296f 100644 --- a/_site/elements/flag.variables +++ b/_site/elements/flag.variables @@ -1,3 +1,3 @@ -/*------------------- +/* ------------------- Flag Variables ---------------------*/ +-------------------- */ diff --git a/_site/globals/site.variables b/_site/globals/site.variables index 3b5dc7d..cd95544 100644 --- a/_site/globals/site.variables +++ b/_site/globals/site.variables @@ -1,3 +1,3 @@ /******************************* User Global Variables -*******************************/ \ No newline at end of file +*******************************/ diff --git a/_site/modules/embed.variables b/_site/modules/embed.variables index e69de29..6f085f9 100644 --- a/_site/modules/embed.variables +++ b/_site/modules/embed.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/definitions/behaviors/api.js b/definitions/behaviors/api.js index 43300db..a2e09b5 100644 --- a/definitions/behaviors/api.js +++ b/definitions/behaviors/api.js @@ -1,1236 +1,1214 @@ /*! * # Fomantic-UI - API - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://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) - ? ([window,document].indexOf(settings.stateContext) < 0 ? $(document).find(settings.stateContext) : $(settings.stateContext)) - : $module, - - // request details - ajaxSettings, - requestSettings, - url, - data, - requestStartTime, - originalData, - - // standard module - element = this, - context = $context[0], - instance = $module.data(moduleNamespace), - module - ; - - module = { - - initialize: function() { - if(!methodInvoked) { - originalData = settings.data; - module.bind.events(); - } - module.instantiate(); - }, +(function ($, window, document) { + 'use strict'; - instantiate: function() { - module.verbose('Storing instance of module', module); - instance = module; - $module - .data(moduleNamespace, instance) - ; - }, + function isWindow(obj) { + return obj !== null && obj === obj.window; + } - destroy: function() { - module.verbose('Destroying previous module for', element); - $module - .removeData(moduleNamespace) - .off(eventNamespace) - ; - }, + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } - 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(); - } - } - }, + window = window !== undefined && window.Math === Math + ? window + : globalThis; - decode: { - json: function(response) { - if(response !== undefined && typeof response == 'string') { - try { - response = JSON.parse(response); - } - catch(e) { - // isn't json string - } - } - return response; - } - }, + $.fn.api = function (parameters) { + var + // use window context if none specified + $allModules = isFunction(this) + ? $(window) + : $(this), + moduleSelector = $allModules.selector || '', + time = Date.now(), + performance = [], - read: { - cachedResponse: function(url) { + query = arguments[0], + methodInvoked = typeof query === 'string', + queryArguments = [].slice.call(arguments, 1), + + returnedValue + ; + + $allModules.each(function () { var - response + 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 + ? ([window, document].indexOf(settings.stateContext) < 0 ? $(document).find(settings.stateContext) : $(settings.stateContext)) + : $module, + + // request details + ajaxSettings, + requestSettings, + url, + data, + requestStartTime, + originalData, + + // standard module + element = this, + context = $context[0], + instance = $module.data(moduleNamespace), + module ; - if(window.Storage === undefined) { - module.error(error.noStorage); - return; - } - response = sessionStorage.getItem(url + module.get.normalizedData()); - module.debug('Using cached response', url, settings.data, 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 + module.get.normalizedData(), response); - module.verbose('Storing cached response for url', url, settings.data, response); - } - }, - query: function() { + module = { - if(module.is.disabled()) { - module.debug('Element is disabled API request aborted'); - return; - } + initialize: function () { + if (!methodInvoked) { + originalData = settings.data; + module.bind.events(); + } + module.instantiate(); + }, + + instantiate: function () { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, - 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(originalData || 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); - } - } + 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) { + // isn't json string + } + } + + return response; + }, + }, + + read: { + cachedResponse: function (url) { + var + response + ; + if (window.Storage === undefined) { + module.error(error.noStorage); + + return; + } + response = sessionStorage.getItem(url + module.get.normalizedData()); + module.debug('Using cached response', url, settings.data, response); + response = module.decode.json(response); + + return response; + }, + }, + write: { + cachedResponse: function (url, response) { + if (window.Storage === undefined) { + module.error(error.noStorage); + + return; + } + if ($.isPlainObject(response)) { + response = JSON.stringify(response); + } + sessionStorage.setItem(url + module.get.normalizedData(), response); + module.verbose('Storing cached response for url', url, settings.data, 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'); - should: { - removeError: function() { - return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) ); - } - }, + return; + } + } - 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; - } - } - }, + // pass element metadata to url (value, text) + if (settings.defaultData) { + $.extend(true, settings.urlData, module.get.defaultData()); + } - was: { - cancelled: function() { - return (module.cancelled || false); - }, - 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 form content + if (settings.serializeForm) { + settings.data = module.add.formData(originalData || settings.data); + } - 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.slice(2, -1) - : templatedString.slice(1, -1), - 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 + // 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; + } + + 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; + } + + 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; + } + + module.debug('Response failed success test', response); + + return false; + }, + }, + + was: { + cancelled: function () { + return module.cancelled || false; + }, + 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.slice(2, -1) + : templatedString.slice(1, -1), + value = $.isPlainObject(urlData) && urlData[variable] !== undefined + ? urlData[variable] + : ($module.data(variable) !== undefined + ? $module.data(variable) + : ($context.data(variable) !== undefined // eslint-disable-line unicorn/no-nested-ternary + ? $context.data(variable) + : urlData[variable])) + ; + // remove value + if (value === undefined) { + module.error(error.requiredParameter, variable, url); + url = false; + + return false; + } + + 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.slice(3, -1) + : templatedString.slice(2, -1), + value = $.isPlainObject(urlData) && urlData[variable] !== undefined + ? urlData[variable] + : ($module.data(variable) !== undefined + ? $module.data(variable) + : ($context.data(variable) !== undefined // eslint-disable-line unicorn/no-nested-ternary + ? $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 + url = url.indexOf('/' + templatedString) !== -1 + ? url.replace('/' + templatedString, '') + : url.replace(templatedString, ''); + } + }); + } + } + + return url; + }, + formData: function (data) { + var + formData = {}, + hasOtherData, + useFormDataApi = settings.serializeForm === 'formdata' + ; + data = data || originalData || settings.data; + hasOtherData = $.isPlainObject(data); + + if (useFormDataApi) { + formData = new FormData($form[0]); + settings.processData = settings.processData !== undefined ? settings.processData : false; + settings.contentType = settings.contentType !== undefined ? settings.contentType : false; + } else { + var + formArray = $form.serializeArray(), + pushes = {}, + pushValues = {}, + build = function (base, key, value) { + base[key] = value; + + return base; + } + ; + // add files + $.each($('input[type="file"]', $form), function (i, tag) { + $.each($(tag)[0].files, function (j, file) { + formArray.push({ name: tag.name, value: file }); + }); + }); + $.each(formArray, function (i, el) { + if (!settings.regExp.validate.test(el.name)) { + return; + } + var + isCheckbox = $('[name="' + el.name + '"]', $form).attr('type') === 'checkbox', + floatValue = parseFloat(el.value), + value = (isCheckbox && el.value === 'on') + || el.value === 'true' + || (String(floatValue) === el.value + ? floatValue + : (el.value === 'false' ? false : el.value)), + nameKeys = el.name.match(settings.regExp.key) || [], + pushKey = el.name.replace(/\[]$/, '') + ; + if (!(pushKey in pushes)) { + pushes[pushKey] = 0; + pushValues[pushKey] = value; + } else if (Array.isArray(pushValues[pushKey])) { + pushValues[pushKey].push(value); + } else { + pushValues[pushKey] = [pushValues[pushKey], value]; + } + if (pushKey.indexOf('[]') === -1) { + value = pushValues[pushKey]; + } + + while (nameKeys.length > 0) { + var k = nameKeys.pop(); + + if (k === '' && !Array.isArray(value)) { // foo[] + value = build([], pushes[pushKey]++, value); + } else if (settings.regExp.fixed.test(k)) { // foo[n] + value = build([], k, value); + } else if (settings.regExp.named.test(k)) { // foo; foo[bar] + value = build({}, k, value); + } + } + formData = $.extend(true, formData, value); + }); + } + + if (hasOtherData) { + module.debug('Extending existing data with form data', data, formData); + if (useFormDataApi) { + $.each(Object.keys(data), function (i, el) { + formData.append(el, data[el]); + }); + data = formData; + } else { + data = $.extend(true, {}, 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 = Date.now() - 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 = Date.now() - 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; + } + 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 = Date.now(); + }, + }, + + 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: { + normalizedData: function () { + return typeof settings.data === 'string' ? settings.data : JSON.stringify(settings.data, Object.keys(settings.data).sort()); + }, + 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()) { + 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; + } + if (settings.on === 'auto') { + if ($module.is('input')) { + return element.oninput !== undefined + ? 'input' + : (element.onpropertychange !== undefined + ? 'propertychange' + : 'keyup'); + } + if ($module.is('form')) { + return 'submit'; + } + + return 'click'; + } + + return settings.on; + }, + templatedURL: function (action) { + action = action || settings.action || $module.data(metadata.action) || false; + url = settings.url || $module.data(metadata.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() ; - 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.slice(3, -1) - : templatedString.slice(2, -1), - 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, ''); + if (xhr && xhr.state() !== 'resolved') { + module.debug('Cancelling API request'); + xhr.abort(); } - else { - url = url.replace(templatedString, ''); + }, + + // 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 = Date.now(); + 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 (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 = context || element; + 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 url; - }, - formData: function(data) { - var - formData = {}, - hasOtherData, - useFormDataApi = settings.serializeForm === 'formdata' - ; - data = data || originalData || settings.data; - hasOtherData = $.isPlainObject(data); - if (useFormDataApi) { - formData = new FormData($form[0]); - settings.processData = typeof settings.processData !== 'undefined' ? settings.processData : false; - settings.contentType = typeof settings.contentType !== 'undefined' ? settings.contentType : false; - } else { - var formArray = $form.serializeArray(), - pushes = {}, - pushValues= {}, - build = function(base, key, value) { - base[key] = value; - return base; - } - ; - // add files - $.each($('input[type="file"]',$form), function(i, tag) { - $.each($(tag)[0].files, function(j, file) { - formArray.push({name:tag.name, value: file}); - }); - }); - $.each(formArray, function(i, el) { - if (!settings.regExp.validate.test(el.name)) return; - var isCheckbox = $('[name="' + el.name + '"]', $form).attr('type') === 'checkbox', - floatValue = parseFloat(el.value), - value = (isCheckbox && el.value === 'on') || el.value === 'true' || (String(floatValue) === el.value ? floatValue : (el.value === 'false' ? false : el.value)), - nameKeys = el.name.match(settings.regExp.key) || [], k, pushKey= el.name.replace(/\[\]$/,'') - ; - if(!(pushKey in pushes)) { - pushes[pushKey] = 0; - pushValues[pushKey] = value; - } else if (Array.isArray(pushValues[pushKey])) { - pushValues[pushKey].push(value); - } else { - pushValues[pushKey] = [pushValues[pushKey] , value]; + return found; + }, + }; + + if (methodInvoked) { + if (instance === undefined) { + module.initialize(); } - value = pushValues[pushKey]; - - while ((k = nameKeys.pop()) !== undefined) { - // foo[] - if (k == '' && !Array.isArray(value)){ - value = build([], pushes[pushKey]++, value); - } - // foo[n] - else if (settings.regExp.fixed.test(k)) { - value = build([], k, value); - } - // foo; foo[bar] - else if (settings.regExp.named.test(k)) { - value = build({}, k, value); - } + module.invoke(query); + } else { + if (instance !== undefined) { + instance.invoke('destroy'); } - formData = $.extend(true, formData, value); - }); + module.initialize(); } + }); - if(hasOtherData) { - module.debug('Extending existing data with form data', data, formData); - if(useFormDataApi) { - $.each(Object.keys(data),function(i, el){ - formData.append(el, data[el]); - }); - data = formData; - } else { - data = $.extend(true, {}, data, formData); - } - } - else { - module.debug('Adding form data', formData); - data = formData; - } - return data; - } - }, + return returnedValue !== undefined + ? returnedValue + : this; + }; + $.api = $.fn.api; - 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); - } - }, + $.api.settings = { - 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); - } - } + name: 'API', + namespace: 'api', - 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); - } - } - }, + debug: false, + verbose: false, + performance: true, - create: { + // object containing all templates endpoints + api: {}, - request: function() { - // api request promise - return $.Deferred() - .always(module.event.request.complete) - .done(module.event.request.done) - .fail(module.event.request.fail) - ; - }, + // whether to cache responses + cache: true, - 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 - ; + // whether new requests should abort previous requests + interruptRequests: true, - mockedXHR = $.Deferred() - .always(module.event.xhr.complete) - .done(module.event.xhr.done) - .fail(module.event.xhr.fail) - ; + // event binding + on: 'auto', - 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); + // context for applying state classes + stateContext: false, - 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; - }, + // duration for loading state + loadingDuration: 0, - 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; - } - }, + // whether to hide errors after a period of time + hideError: 'auto', - 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(); - } - }, + // duration for error state + errorDuration: 2000, - 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); - } - }, + // whether parameters should be encoded with encodeURIComponent + encodeParameters: true, - get: { - normalizedData: function(){ - return typeof settings.data === "string" ? settings.data : JSON.stringify(settings.data, Object.keys(settings.data).sort()); - }, - 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; - } - }, + // API action to use + action: false, - abort: function() { - var - xhr = module.get.xhr() - ; - if( xhr && xhr.state() !== 'resolved') { - module.debug('Cancelling API request'); - xhr.abort(); - } - }, + // templated URL to use + url: false, - // reset state - reset: function() { - module.remove.error(); - module.remove.loading(); - }, + // base URL to apply to all endpoints + base: '', - 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 = context || element; - 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 - // use true to convert complex named keys like a[b][1][c][] into a nested object - // use 'formdata' for formdata web api - 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 : true, - - // callbacks before request - beforeSend : function(settings) { return settings; }, - beforeXHR : function(xhr) {}, - onRequest : function(promise, xhr) {}, - - // after request - onResponse : false, // function(response) { }, + // data that will + urlData: {}, - // response was successful, if JSON passed validation - onSuccess : function(response, $module) {}, + // whether to add default data to url data + defaultData: true, - // request finished without aborting - onComplete : function(response, $module) {}, + // whether to serialize closest form + // use true to convert complex named keys like a[b][1][c][] into a nested object + // use 'formdata' for formdata web api + serializeForm: false, - // failed JSON success test - onFailure : function(response, $module) {}, + // how long to wait before request should occur + throttle: 0, - // server error - onError : function(errorMessage, $module) {}, + // whether to throttle first request or only repeated + throttleFirstRequest: true, - // request aborted - onAbort : function(errorMessage, $module) {}, + // standard ajax settings + method: 'get', + data: {}, + dataType: 'json', - successTest : false, + // mock response + mockResponse: false, + mockResponseAsync: 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', - 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' - }, + // aliases for mock + response: false, + responseAsync: false, - regExp : { - required : /\{\$*[a-z0-9]+\}/gi, - optional : /\{\/\$*[a-z0-9]+\}/gi, - validate: /^[a-z_][a-z0-9_-]*(?:\[[a-z0-9_-]*\])*$/i, - key: /[a-z0-9_-]+|(?=\[\])/gi, - push: /^$/, - fixed: /^\d+$/, - named: /^[a-z0-9_-]+$/i - }, - - className: { - loading : 'loading', - error : 'error' - }, + // whether onResponse should work with response value without force converting into an object + rawResponse: true, - selector: { - disabled : '.disabled', - form : 'form' - }, - - metadata: { - action : 'action', - url : 'url' - } -}; - - - -})( jQuery, window, document ); + // 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', + 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: /{\$*[\da-z]+}/gi, + optional: /{\/\$*[\da-z]+}/gi, + validate: /^[_a-z][\w-]*(?:\[[\w-]*])*$/i, + key: /[\w-]+|(?=\[])/gi, + push: /^$/, + fixed: /^\d+$/, + named: /^[\w-]+$/i, + }, + + className: { + loading: 'loading', + error: 'error', + }, + + selector: { + disabled: '.disabled', + form: 'form', + }, + + metadata: { + action: 'action', + url: 'url', + }, + }; +})(jQuery, window, document); diff --git a/definitions/behaviors/form.js b/definitions/behaviors/form.js index 3d2ff00..d459681 100644 --- a/definitions/behaviors/form.js +++ b/definitions/behaviors/form.js @@ -1,2077 +1,2095 @@ /*! * # Fomantic-UI - Form Validation - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://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.refresh(); - } - module.verbose('Initializing form validation', $module, settings); - module.bindEvents(); - module.set.defaults(); - if (settings.autoCheckRequired) { - module.set.autoCheck(); - } - module.instantiate(); - } - }, +(function ($, window, document) { + 'use strict'; - instantiate: function() { - module.verbose('Storing instance of module', module); - instance = module; - $module - .data(moduleNamespace, module) - ; - }, + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } - destroy: function() { - module.verbose('Destroying previous module', instance); - module.removeEvents(); - $module - .removeData(moduleNamespace) - ; - }, + window = window !== undefined && window.Math === Math + ? window + : globalThis; - 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); + $.fn.form = function (parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', - $submit = $module.find(selector.submit); - $clear = $module.find(selector.clear); - $reset = $module.find(selector.reset); - }, + time = Date.now(), + performance = [], - refreshEvents: function() { - module.removeEvents(); - module.bindEvents(); - }, + query = arguments[0], + 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 + ; - submit: function() { - module.verbose('Submitting form', $module); - submitting = true; - $module.submit(); - }, + module = { - attachEvents: function(selector, action) { - action = action || 'submit'; - $(selector).on('click' + eventNamespace, function(event) { - module[action](); - event.preventDefault(); - }); - }, + 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.refresh(); + } + 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); + }, + + refreshEvents: function () { + module.removeEvents(); + module.bindEvents(); + }, + + submit: function () { + module.verbose('Submitting form', $module); + submitting = true; + $module.trigger('submit'); + }, + + attachEvents: function (selector, action) { + if (!action) { + action = 'submit'; + } - 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); - }); + $(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) { + 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 + ; + + isDirty = isCheckbox + ? module.is.checkboxDirty($el) + : module.is.fieldDirty($el); + + $el.data(settings.metadata.isDirty, isDirty); + + formIsDirty = formIsDirty || isDirty; + }); + + if (formIsDirty) { + module.set.dirty(); + } else { + module.set.clean(); + } + }, + }, + + is: { + bracketedRule: function (rule) { + return rule.type && rule.type.match(settings.regExp.bracket); + }, + // duck type rule test + shorthandRules: function (rules) { + return typeof rules === 'string' || Array.isArray(rules); + }, + empty: function ($field) { + if (!$field || $field.length === 0) { + return true; + } + if ($field.is(selector.checkbox)) { + return !$field.is(':checked'); + } + + 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); + } + + 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 undefined/null here as value may be `false`, so ($el.data(dataInitialValue) || '') would not work + if (initialValue === undefined || initialValue === null) { + initialValue = ''; + } else if (Array.isArray(initialValue)) { + initialValue = initialValue.toString(); + } + var currentValue = $el.val(); + if (currentValue === undefined || currentValue === null) { + currentValue = ''; + } else if (Array.isArray(currentValue)) { + // multiple select values are returned as arrays which are never equal, so do string conversion first + 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); + }, + + 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[0] + .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'); + event.preventDefault(); + } + keyHeldDown = true; + } + }, + keyup: function () { + keyHeldDown = false; + }, + blur: function (event) { + var + $field = $(this), + $fieldGroup = $field.closest($group), + validationRules = module.get.validation($field) + ; + if (validationRules && (settings.on === 'blur' || ($fieldGroup.hasClass(className.error) && settings.revalidate))) { + module.debug('Revalidating field', $field, validationRules); + module.validate.field(validationRules); + if (!settings.inline) { + module.validate.form(false, true); + } + } + }, + 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, validationRules); + module.validate.field(validationRules); + if (!settings.inline) { + module.validate.form(false, true); + } + }, settings.delay); + } + }, + }, + beforeUnload: function (event) { + if (module.is.dirty() && !submitting) { + 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'; + } + + 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 (!Array.isArray(rules) && typeof rules === 'object') { + fullFields[name] = rules; + } else { + 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, + parts, + suffixPrompt + ; + if (ancillary && ['integer', 'decimal', 'number'].indexOf(ruleName) >= 0 && ancillary.indexOf('..') >= 0) { + parts = ancillary.split('..', 2); + if (!rule.prompt) { + suffixPrompt = parts[0] === '' + ? settings.prompt.maxValue.replace(/{ruleValue}/g, '{max}') + : (parts[1] === '' + ? settings.prompt.minValue.replace(/{ruleValue}/g, '{min}') + : settings.prompt.range); + prompt += suffixPrompt.replace(/{name}/g, ' ' + settings.text.and); + } + prompt = prompt.replace(/{min}/g, parts[0]); + prompt = prompt.replace(/{max}/g, parts[1]); + } + 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)) { + if (parameters.fields) { + parameters.fields = module.get.fieldsFromShorthand(parameters.fields); + } + settings = $.extend(true, {}, $.fn.form.settings, parameters); + validation = $.extend(true, {}, $.fn.form.settings.defaults, settings.fields); + module.verbose('Extending settings', validation, settings); + } else { + settings = $.extend(true, {}, $.fn.form.settings); + validation = $.extend(true, {}, $.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 + (instance || module).refresh(); + }, + field: function (identifier) { + module.verbose('Finding field with identifier', identifier); + identifier = module.escape.string(identifier); + var t; + t = $field.filter('#' + identifier); + if (t.length > 0) { + return t; + } + t = $field.filter('[name="' + identifier + '"]'); + if (t.length > 0) { + return t; + } + t = $field.filter('[name="' + identifier + '[]"]'); + if (t.length > 0) { + return t; + } + t = $field.filter('[data-' + metadata.validate + '="' + identifier + '"]'); + if (t.length > 0) { + return t; + } + module.error(error.noField.replace('{identifier}', identifier)); + + return $(''); + }, + 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) { + values[name] = isChecked ? value || true : false; + } else if (isCalendar) { + var date = $calendar.calendar('get date'); + + if (date !== null) { + switch (settings.dateHandling) { + case 'date': { + values[name] = date; + + break; + } + case 'input': { + values[name] = $calendar.calendar('get input date'); + + break; + } + case '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] = ''; + } + } + + break; + } + } + } 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); + } + + return ( + $field.filter('#' + identifier).length > 0 + || $field.filter('[name="' + identifier + '"]').length > 0 + || $field.filter('[data-' + metadata.validate + '="' + identifier + '"]').length > 0 + ); + }, + + }, + + 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); + module.refreshEvents(); + }, + fields: function (fields) { + validation = $.extend(true, {}, validation, module.get.fieldsFromShorthand(fields)); + module.refreshEvents(); + }, + 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 = $('
').addClass(className.label); + $prompt + .appendTo($fieldGroup) + ; + } + $prompt + .html(settings.templates.prompt(errors)) + ; + 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'); + if (module.has.field(field)) { + validation[field].rules = []; + } else { + delete validation[field]; + } + + 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); + }); + module.refreshEvents(); + }, + // 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 || value === 'on') { + $element.checkbox('check'); + } else { + $element.checkbox('uncheck'); + } + if (typeof value === 'string') { + $field.val(value); + } + } 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'); + if (validation) { + $.each(validation, function (fieldName) { + if (!module.has.field(fieldName)) { + module.verbose('Field not found, removing from validation', fieldName); + module.remove.field(fieldName); + } + }); + } + $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'); + } + } + }); + }, + optional: function (identifier, bool) { + bool = bool !== false; + $.each(validation, function (fieldName, field) { + if (identifier === fieldName || identifier === field.identifier) { + field.optional = bool; + } + }); + }, + }, + + validate: { + + form: function (event, ignoreCallbacks) { + var values = module.get.values(); + + // input keydown event will fire submit repeatedly by browser default + if (keyHeldDown) { + return false; + } - // Dirty events - if (settings.preventLeaving) { - $(window).on('beforeunload' + eventNamespace, module.event.beforeUnload); - } + // 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 (settings.errorFocus && ignoreCallbacks !== true) { + var + $focusElement, + hasTabIndex = true + ; + if (typeof settings.errorFocus === 'string') { + $focusElement = $(document).find(settings.errorFocus); + hasTabIndex = $focusElement.is('[tabindex]'); + // to be able to focus/scroll into non input elements we need a tabindex + if (!hasTabIndex) { + $focusElement.attr('tabindex', -1); + } + } else { + $focusElement = $group.filter('.' + className.error).first().find(selector.field); + } + $focusElement.trigger('focus'); + // only remove tabindex if it was dynamically created above + if (!hasTabIndex) { + $focusElement.removeAttr('tabindex'); + } + } + 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]; + } + if (!field) { + module.debug('Unable to find field validation. Skipping', fieldName); + + return true; + } + 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 === 0; + 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 && rule.shouldTrim !== false) || rule.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 = Date.now(); + 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 (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 = context || element; + 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.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, - $field.on('change click keyup keydown blur', function(e) { - module.determine.isDirty(); - }); + autoCheckRequired: false, + preventLeaving: false, + errorFocus: true, + dateHandling: 'date', // 'date', 'input', 'formatter' - $module.on('dirty' + eventNamespace, function(e) { - settings.onDirty.call(); - }); + onValid: function () {}, + onInvalid: function () {}, + onSuccess: function () { + return true; + }, + onFailure: function () { + return false; + }, + onDirty: function () {}, + onClean: function () {}, - $module.on('clean' + eventNamespace, function(e) { - settings.onClean.call(); - }) + metadata: { + defaultValue: 'default', + validate: 'validate', + isDirty: 'isDirty', }, - 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(); + regExp: { + htmlID: /^[A-Za-z][\w.:-]*$/g, + bracket: /\[(.*)]/i, + decimal: /^\d+\.?\d*$/, + email: /^[\w!#$%&'*+./=?^`{|}~-]+@[\da-z]([\da-z-]*[\da-z])?(\.[\da-z]([\da-z-]*[\da-z])?)*$/i, + escape: /[$()*+,./:=?@[\\\]^{|}-]/g, + flags: /^\/(.*)\/(.*)?/, + integer: /^-?\d+$/, + number: /^-?\d*(\.\d+)?$/, + url: /(https?:\/\/(?:www\.|(?!www))[^\s.]+\.\S{2,}|www\.\S+\.\S{2,})/i, }, - 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(); + text: { + and: 'and', + unspecifiedRule: 'Please enter a valid value', + unspecifiedField: 'This field', + leavingMessage: 'There are unsaved changes on this page which will be discarded if you continue.', }, - 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(); - } - - } + prompt: { + range: '{name} must be in a range from {min} to {max}', + maxValue: '{name} must have a maximum value of {ruleValue}', + minValue: '{name} must have a minimum value of {ruleValue}', + 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', + 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', }, - is: { - bracketedRule: function(rule) { - return (rule.type && rule.type.match(settings.regExp.bracket)); - }, - // 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'); - } + selector: { + checkbox: 'input[type="checkbox"], input[type="radio"]', + clear: '.clear', + field: 'input:not(.search):not([type="file"]):not([type="reset"]):not([type="button"]):not([type="submit"]), textarea, select', + group: '.field', + input: 'input:not([type="file"])', + 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', }, - removeEvents: function() { - $module.off(eventNamespace); - $field.off(eventNamespace); - $submit.off(eventNamespace); + className: { + error: 'error', + label: 'ui basic red pointing prompt label', + pressed: 'down', + success: 'success', + required: 'required', + disabled: 'disabled', }, - 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[0] - .blur() + 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', + noField: 'Field identifier {identifier} not found', + noElement: 'This module requires ui {element}', + }, + + templates: { + + // template that produces error message + error: function (errors) { + var + html = ''; + + return html; }, - blur: function(event) { - var - $field = $(this), - $fieldGroup = $field.closest($group), - validationRules = module.get.validation($field) - ; - if(validationRules && (settings.on == 'blur' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) { - module.debug('Revalidating field', $field, validationRules); - module.validate.field( validationRules ); - if(!settings.inline) { - module.validate.form(false,true); + + // template that produces label content + prompt: function (errors) { + if (errors.length === 1) { + return errors[0]; } - } + var + html = ''; + + return html; }, - 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, validationRules); - module.validate.field( validationRules ); - if(!settings.inline) { - module.validate.form(false,true); - } - }, settings.delay); - } - } - }, - beforeUnload: function(event) { - if (module.is.dirty() && !submitting) { - event = event || window.event; - - // For modern browsers - if (event) { - event.returnValue = settings.text.leavingMessage; - } - - // For olders... - return settings.text.leavingMessage; - } - } + }, + 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); + }, }, - 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 (!Array.isArray(rules) && typeof rules === 'object') { - fullFields[name] = rules; - } else { - if (typeof rules == 'string') { - rules = [rules]; + 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); } - 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, - parts, - suffixPrompt - ; - if(ancillary && ['integer', 'decimal', 'number'].indexOf(ruleName) >= 0 && ancillary.indexOf('..') >= 0) { - parts = ancillary.split('..', 2); - if(!rule.prompt) { - suffixPrompt = ( - parts[0] === '' ? settings.prompt.maxValue.replace(/\{ruleValue\}/g,'{max}') : - parts[1] === '' ? settings.prompt.minValue.replace(/\{ruleValue\}/g,'{min}') : - settings.prompt.range - ); - prompt += suffixPrompt.replace(/\{name\}/g, ' ' + settings.text.and); - } - prompt = prompt.replace(/\{min\}/g, parts[0]); - prompt = prompt.replace(/\{max\}/g, parts[1]); - } - 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(true, {}, $.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) { - parameters.fields = module.get.fieldsFromShorthand(parameters.fields); + 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] + : ''; } - settings = $.extend(true, {}, $.fn.form.settings, parameters); - validation = $.extend(true, {}, $.fn.form.settings.defaults, settings.fields); - module.verbose('Extending settings', validation, settings); - } - } - else { - settings = $.extend(true, {}, $.fn.form.settings); - validation = $.extend(true, {}, $.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 - (instance || 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; - } - module.error(error.noField.replace('{identifier}',identifier)); - return $(''); - }, - 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 value.match(new RegExp(regExp, flags)); + }, + minValue: function (value, range) { + return $.fn.form.settings.rules.range(value, range + '..', 'number'); + }, + maxValue: function (value, range) { + return $.fn.form.settings.rules.range(value, '..' + range, 'number'); + }, + // is valid integer or matches range + integer: function (value, range) { + return $.fn.form.settings.rules.range(value, range, 'integer'); + }, + range: function (value, range, regExp) { + if (typeof regExp === 'string') { + regExp = $.fn.form.settings.regExp[regExp]; } - }); - }); - 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); - } + if (!(regExp instanceof RegExp)) { + regExp = $.fn.form.settings.regExp.integer; } - else { - if(isRadio) { - if(values[name] === undefined || values[name] === false) { - values[name] = (isChecked) - ? value || true - : false - ; + var + min, + max, + parts + ; + if (!range || ['', '..'].indexOf(range) !== -1) { + + // do nothing + } else if (range.indexOf('..') === -1) { + if (regExp.test(range)) { + min = range - 0; + max = min; } - } - else if(isCheckbox) { - if(isChecked) { - values[name] = value || true; + } else { + parts = range.split('..', 2); + if (regExp.test(parts[0])) { + min = parts[0] - 0; } - else { - values[name] = false; + if (regExp.test(parts[1])) { + max = parts[1] - 0; } - } - 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); - } - return ( - $field.filter('#' + identifier).length > 0 || - $field.filter('[name="' + identifier +'"]').length > 0 || - $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 - ); - } + return ( + regExp.test(value) + && (min === undefined || value >= min) + && (max === undefined || value <= max) + ); + }, - }, + // is valid number (with decimal) + decimal: function (value, range) { + return $.fn.form.settings.rules.range(value, range, 'decimal'); + }, - can: { - useElement: function(element){ - if ($.fn[element] !== undefined) { - return true; - } - module.error(error.noElement.replace('{element}',element)); - return false; - } - }, + // is valid number + number: function (value, range) { + return $.fn.form.settings.rules.range(value, range, 'number'); + }, - escape: { - string: function(text) { - text = String(text); - return text.replace(regExp.escape, '\\$&'); - } - }, + // is value (case insensitive) + is: function (value, text) { + text = typeof text === 'string' + ? text.toLowerCase() + : text; + value = typeof value === 'string' + ? value.toLowerCase() + : value; - 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); - module.refreshEvents(); - }, - fields: function(fields) { - validation = $.extend(true, {}, validation, module.get.fieldsFromShorthand(fields)); - module.refreshEvents(); - }, - 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 = $('
').addClass(className.label); - $prompt - .appendTo($fieldGroup) + 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; + }, + + // is exactly length + exactLength: function (value, requiredLength) { + return value !== undefined + ? value.length === Number(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 ; - } - $prompt - .html(settings.templates.prompt(errors)) - ; - 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) - ; + matchingElement = $module.find('[data-validate="' + identifier + '"]'); + if (matchingElement.length > 0) { + matchingValue = matchingElement.val(); + } else { + matchingElement = $module.find('#' + identifier); + if (matchingElement.length > 0) { + matchingValue = matchingElement.val(); + } else { + matchingElement = $module.find('[name="' + identifier + '"]'); + if (matchingElement.length > 0) { + matchingValue = matchingElement.val(); + } else { + matchingElement = $module.find('[name="' + identifier + '[]"]'); + if (matchingElement.length > 0) { + matchingValue = matchingElement; + } + } + } } - } - 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); - }); - module.refreshEvents(); - }, - // 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(); - }) - ; - } - } - } - }, + return matchingValue !== undefined + ? value.toString() === matchingValue.toString() + : false; + }, - 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'); + // different than another field + different: function (value, identifier, $module) { + // use either id or name of field + var + matchingValue, + matchingElement + ; + matchingElement = $module.find('[data-validate="' + identifier + '"]'); + if (matchingElement.length > 0) { + matchingValue = matchingElement.val(); + } else { + matchingElement = $module.find('#' + identifier); + if (matchingElement.length > 0) { + matchingValue = matchingElement.val(); + } else { + matchingElement = $module.find('[name="' + identifier + '"]'); + if (matchingElement.length > 0) { + matchingValue = matchingElement.val(); + } else { + matchingElement = $module.find('[name="' + identifier + '[]"]'); + if (matchingElement.length > 0) { + matchingValue = matchingElement; + } + } } - }); } - else if(isRadio) { - module.verbose('Selecting radio value', value, $field); - $field.filter('[value="' + value + '"]') - .parent(selector.uiCheckbox) - .checkbox('check') - ; + + 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]\d|[2-8]\d{2}|9[01]\d|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]\d)/, + 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; } - else if(isCheckbox) { - module.verbose('Setting checkbox value', value, $element); - if(value === true || value === 1 || value === 'on') { - $element.checkbox('check'); - } - else { - $element.checkbox('uncheck'); - } - if(typeof value === 'string') { - $field.val(value); - } + + // allow dashes and spaces in card + cardNumber = cardNumber.replace(/[\s-]/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 > 0 && valid.pattern) { + validCard = true; + } + } + }); + + if (!validCard) { + return false; + } } - else if(isDropdown) { - module.verbose('Setting dropdown value', value, $element); - $element.dropdown('set selected', value); + + // 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; } - else if (isCalendar) { - $calendar.calendar('set date',value); + + // verify luhn, adapted from + 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; // eslint-disable-line no-bitwise } - else { - module.verbose('Setting field value', value, $field); - $field.val(value); + + return sum % 10 === 0 && sum > 0; + }, + + minCount: function (value, minCount) { + minCount = Number(minCount); + + if (minCount === 0) { + return true; } - } - }); - }, - 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"); + if (minCount === 1) { + return value !== ''; } - } - }); - }, - optional: function(identifier, bool) { - bool = (bool !== false); - $.each(validation, function(fieldName, field) { - if (identifier == fieldName || identifier == field.identifier) { - field.optional = bool; - } - }); - } - }, - 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(settings.errorFocus && ignoreCallbacks !== true) { - var focusElement, hasTabIndex = true; - if (typeof settings.errorFocus === 'string') { - focusElement = $(document).find(settings.errorFocus); - hasTabIndex = focusElement.is('[tabindex]'); - // to be able to focus/scroll into non input elements we need a tabindex - if (!hasTabIndex) { - focusElement.attr('tabindex',-1); - } - } else { - focusElement = $group.filter('.' + className.error).first().find(selector.field); - } - focusElement.focus(); - // only remove tabindex if it was dynamically created above - if (!hasTabIndex){ - focusElement.removeAttr('tabindex'); + return value.split(',').length >= minCount; + }, + + exactCount: function (value, exactCount) { + exactCount = Number(exactCount); + + if (exactCount === 0) { + return value === ''; } - } - 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 (exactCount === 1) { + return value !== '' && value.search(',') === -1; } - }); - } - 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 && rule.shouldTrim !== false) || rule.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); - } - }, + return value.split(',').length === exactCount; + }, - 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 = context || element; - 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, - errorFocus : true, - 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: { - and : 'and', - 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: { - range : '{name} must be in a range from {min} to {max}', - maxValue : '{name} must have a maximum value of {ruleValue}', - minValue : '{name} must have a minimum value of {ruleValue}', - 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', - 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):not([type="file"]):not([type="reset"]):not([type="button"]):not([type="submit"]), textarea, select', - group : '.field', - input : 'input:not([type="file"])', - 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.', - noField : 'Field identifier {identifier} not found', - noElement : 'This module requires ui {element}' - }, - - templates: { - - // template that produces error message - error: function(errors) { - var - html = '
    ' - ; - $.each(errors, function(index, value) { - html += '
  • ' + value + '
    • '; - }); - html += '
'; - return html; - }, - - // template that produces label content - prompt: function(errors) { - if(errors.length === 1){ - return errors[0]; - } - var - html = '
    ' - ; - $.each(errors, function(index, value) { - html += '
  • ' + value + '
    • '; - }); - html += '
'; - return html; - } - }, - - 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) ); - }, - minValue: function(value, range) { - return $.fn.form.settings.rules.range(value, range+'..', 'number'); - }, - maxValue: function(value, range) { - return $.fn.form.settings.rules.range(value, '..'+range, 'number'); - }, - // is valid integer or matches range - integer: function(value, range) { - return $.fn.form.settings.rules.range(value, range, 'integer'); - }, - range: function(value, range, regExp) { - if(typeof regExp == "string") { - regExp = $.fn.form.settings.regExp[regExp]; - } - if(!(regExp instanceof RegExp)) { - regExp = $.fn.form.settings.regExp.integer; - } - var - min, - max, - parts - ; - if( !range || ['', '..'].indexOf(range) !== -1) { - // do nothing - } - else if(range.indexOf('..') == -1) { - if(regExp.test(range)) { - min = max = range - 0; - } - } - else { - parts = range.split('..', 2); - if(regExp.test(parts[0])) { - min = parts[0] - 0; - } - if(regExp.test(parts[1])) { - max = parts[1] - 0; - } - } - return ( - regExp.test(value) && - (min === undefined || value >= min) && - (max === undefined || value <= max) - ); - }, - - // is valid number (with decimal) - decimal: function(value, range) { - return $.fn.form.settings.rules.range(value, range, 'decimal'); - }, - - // is valid number - number: function(value, range) { - return $.fn.form.settings.rules.range(value, range, 'number'); - }, - - // 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 - ; - }, - - // 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 and spaces in card - cardNumber = cardNumber.replace(/[\s\-]/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; - } - } - }); + maxCount: function (value, maxCount) { + maxCount = Number(maxCount); - 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 - 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); - } - } + if (maxCount === 0) { + return false; + } + if (maxCount === 1) { + return value.search(',') === -1; + } -}; + return value.split(',').length <= maxCount; + }, + }, -})( jQuery, window, document ); + }; +})(jQuery, window, document); diff --git a/definitions/behaviors/state.js b/definitions/behaviors/state.js index 84cf48a..58d3a88 100644 --- a/definitions/behaviors/state.js +++ b/definitions/behaviors/state.js @@ -1,711 +1,692 @@ /*! * # Fomantic-UI - State - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ -;(function ($, window, document, undefined) { +(function ($, window, document) { + 'use strict'; -"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 || '', + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } - time = new Date().getTime(), - performance = [], + window = window !== undefined && window.Math === Math + ? window + : globalThis; - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + $.fn.state = function (parameters) { + var + $allModules = $(this), - returnedValue - ; - $allModules - .each(function() { - var - settings = ( $.isPlainObject(parameters) ) - ? $.extend(true, {}, $.fn.state.settings, parameters) - : $.extend({}, $.fn.state.settings), + moduleSelector = $allModules.selector || '', - error = settings.error, - metadata = settings.metadata, - className = settings.className, - namespace = settings.namespace, - states = settings.states, - text = settings.text, + time = Date.now(), + performance = [], - eventNamespace = '.' + namespace, - moduleNamespace = namespace + '-module', + query = arguments[0], + methodInvoked = typeof query === 'string', + queryArguments = [].slice.call(arguments, 1), - $module = $(this), + returnedValue + ; + $allModules.each(function () { + var + settings = $.isPlainObject(parameters) + ? $.extend(true, {}, $.fn.state.settings, parameters) + : $.extend({}, $.fn.state.settings), - element = this, - instance = $module.data(moduleNamespace), + error = settings.error, + metadata = settings.metadata, + className = settings.className, + namespace = settings.namespace, + states = settings.states, + text = settings.text, - module - ; - module = { + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', - initialize: function() { - module.verbose('Initializing module'); + $module = $(this), - // allow module to guess desired state based on element - if(settings.automatic) { - module.add.defaults(); - } + element = this, + instance = $module.data(moduleNamespace), - // bind events with delegated events - if(settings.context && moduleSelector !== '') { - ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context)) - .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text) - .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text) - .on(moduleSelector, 'click' + eventNamespace, module.toggle.state) + module ; - } - 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) - ; - }, + 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 !== '') { + ([window, document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(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 = Date.now(); + 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 (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 = context || element; + 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(); + } + }); - refresh: function() { - module.verbose('Refreshing selector cache'); - $module = $(element); - }, + return returnedValue !== undefined + ? returnedValue + : this; + }; - 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); - } - }); - } - }, + $.fn.state.settings = { - 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'); - } - }, + // module info + name: 'State', - allow: function(state) { - module.debug('Now allowing state', state); - states[state] = true; - }, - disallow: function(state) { - module.debug('No longer allowing', state); - states[state] = false; - }, + // debug output + debug: false, - allows: function(state) { - return states[state] || false; - }, + // verbose debug output + verbose: false, - enable: function() { - $module.removeClass(className.disabled); - }, + // namespace for events + namespace: 'state', - disable: function() { - $module.addClass(className.disabled); - }, + // debug data includes performance + performance: true, - setState: function(state) { - if(module.allows(state)) { - $module.addClass( className[state] ); - } - }, + // callback occurs on state change + onActivate: function () {}, + onDeactivate: function () {}, + onChange: function () {}, - removeState: function(state) { - if(module.allows(state)) { - $module.removeClass( className[state] ); - } + // state test functions + activateTest: function () { + return true; }, - - 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(); - } - } + deactivateTest: function () { + return true; }, - 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(); - }) - ; - } - }, + // whether to automatically map default states + automatic: true, - // checks whether active/inactive state can be given - change: { + // activate / deactivate changes all elements instantiated at same time + sync: false, - 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); - } - } - } - } + // default flash text duration, used for temporarily changing text of an element + flashDuration: 1000, + // selector filter + filter: { + text: '.loading, .disabled', + active: '.disabled', }, - 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); - } - }, + context: false, - 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); - } + // error + error: { + method: 'The method you called is not defined.', }, - 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') - ; - } + // metadata + metadata: { + promise: 'promise', + storedText: 'stored-text', }, - get: { - text: function() { - return (settings.selector.text) - ? $module.find(settings.selector.text).text() - : $module.html() - ; - }, - textFor: function(state) { - return text[state] || false; - } + // change class on state + className: { + active: 'active', + disabled: 'disabled', + error: 'error', + loading: 'loading', + success: 'success', + warning: 'warning', }, - 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); - } + selector: { + // selector for text node + text: false, }, - 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); - } - } - } + defaults: { + input: { + disabled: true, + loading: true, + active: true, + }, + button: { + disabled: true, + loading: true, + active: true, + }, + progress: { + active: true, + success: true, + warning: true, + error: true, + }, }, - 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); - } - } + states: { + active: true, + disabled: true, + error: true, + loading: true, + success: true, + warning: 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]; - } + text: { + disabled: false, + flash: false, + hover: false, + active: false, + inactive: false, + activate: false, + deactivate: false, }, - 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 = context || element; - 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 ); + }; +})(jQuery, window, document); diff --git a/definitions/behaviors/visibility.js b/definitions/behaviors/visibility.js index 32defce..ec67324 100644 --- a/definitions/behaviors/visibility.js +++ b/definitions/behaviors/visibility.js @@ -1,1313 +1,1281 @@ /*! * # Fomantic-UI - Visibility - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ -;(function ($, window, document, undefined) { +(function ($, window, document) { + 'use strict'; -'use strict'; + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } -$.isFunction = $.isFunction || function(obj) { - return typeof obj === "function" && typeof obj.nodeType !== "number"; -}; + window = window !== undefined && window.Math === Math + ? window + : globalThis; -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 || '', -$.fn.visibility = function(parameters) { - var - $allModules = $(this), - moduleSelector = $allModules.selector || '', + time = Date.now(), + performance = [], - time = new Date().getTime(), - performance = [], + query = arguments[0], + methodInvoked = typeof query === 'string', + queryArguments = [].slice.call(arguments, 1), + returnedValue, - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), - returnedValue, + moduleCount = $allModules.length, + loadedCount = 0 + ; - 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 = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context), - - $placeholder, - - instance = $module.data(moduleNamespace), - - requestAnimationFrame = window.requestAnimationFrame - || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback) { setTimeout(callback, 0); }, + $allModules.each(function () { + var + settings = $.isPlainObject(parameters) + ? $.extend(true, {}, $.fn.visibility.settings, parameters) + : $.extend({}, $.fn.visibility.settings), - element = this, - disabled = false, + className = settings.className, + namespace = settings.namespace, + error = settings.error, + metadata = settings.metadata, - contextObserver, - observer, - module - ; + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, - module = { + $window = $(window), - initialize: function() { - module.debug('Initializing', settings); + $module = $(this), + $context = [window, document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context), - module.setup.cache(); + $placeholder, - if( module.should.trackChanges() ) { + instance = $module.data(moduleNamespace), - 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(); - }, + element = this, + disabled = false, - 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) + contextObserver, + observer, + module ; - // 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); - }, - }, + module = { - 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); - } - }, + initialize: function () { + module.debug('Initializing', settings); - enableCallbacks: function() { - module.debug('Allowing callbacks to occur'); - disabled = false; - }, + module.setup.cache(); - disableCallbacks: function() { - module.debug('Disabling all callbacks temporarily'); - disabled = true; - }, + if (module.should.trackChanges()) { + if (settings.type === 'image') { + module.setup.image(); + } + if (settings.type === 'fixed') { + module.setup.fixed(); + } - should: { - trackChanges: function() { - if(methodInvoked) { - module.debug('One time query, no need to bind events'); - return false; - } - module.debug('Callbacks being attached'); - return true; - } - }, + if (settings.observeChanges) { + module.observeChanges(); + } + module.bind.events(); + } - 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); + module.save.position(); + if (!module.is.visible()) { + module.error(error.visible, $module); } - 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) - ; - } - }, + 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 (!Array.isArray(images)) { + 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.addEventListener('load', handleLoad); + cacheImage.addEventListener('error', 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[0] !== window + ? $context.css('overflow-y') + : false + ; + + return overflowY === 'auto' || overflowY === 'scroll'; + }, + horizontallyScrollableContext: function () { + var + overflowX = $context[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 = Date.now(); + 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 (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 = context || element; + 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; + } - 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', '') - ; - } - }, + return found; + }, + }; - 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; + if (methodInvoked) { + if (instance === undefined) { + module.initialize(); } - $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); + instance.save.scroll(); + instance.save.calculations(); + module.invoke(query); + } else { + if (instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); } - return false; - }, - verticallyScrollableContext: function() { - var - overflowY = ($context[0] !== window) - ? $context.css('overflow-y') - : false - ; - return (overflowY == 'auto' || overflowY == 'scroll'); - }, - horizontallyScrollableContext: function() { - var - overflowX = ($context[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() ) { + return returnedValue !== undefined + ? returnedValue + : this; + }; - // save scroll position - module.save.scroll(scroll); + $.fn.visibility.settings = { - // update calculations derived from scroll - module.save.calculations(); + name: 'Visibility', + namespace: 'visibility', - // percentage - module.passed(); + debug: false, + verbose: false, + performance: true, - // reverse (must be first) - module.passingReverse(); - module.topVisibleReverse(); - module.bottomVisibleReverse(); - module.topPassedReverse(); - module.bottomPassedReverse(); + // whether to use mutation observers to follow changes + observeChanges: true, - // one time - module.onScreen(); - module.offScreen(); - module.passing(); - module.topVisible(); - module.bottomVisible(); - module.topPassed(); - module.bottomPassed(); + // check position immediately on init + initialCheck: true, - // on update callback - if(settings.onUpdate) { - settings.onUpdate.call(element, module.get.elementCalculations()); - } - } - }, + // whether to refresh calculations after all page images load + refreshOnLoad: true, - 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); - } - }); - } - }, + // whether to refresh calculations after page resize event + refreshOnResize: true, - 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; - } - }, + // should call callbacks on refresh event (resize, etc) + checkOnRefresh: true, - 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; - } - }, + // callback should only occur one time + once: true, - 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; - } - }, + // callback should fire continuously when evaluates to true + continuous: false, + // offset to use with scroll top + offset: 0, - 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; - } - }, + // whether to include margin in elements position + includeMargin: false, - 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; - } - }, + // scroll context for visibility checks + context: window, - 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; - } - }, + // visibility check delay in ms (defaults to animationFrame) + throttle: false, - 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; - } - }, + // special visibility type (image, fixed) + type: false, + // z-index to use with visibility 'fixed' + zIndex: '10', - 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; - } - }, + // image only animation settings + transition: 'fade in', + duration: 1000, - 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; - } - }, + // array of callbacks for percentage + onPassed: {}, - 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; - } - }, + // standard callbacks + onOnScreen: false, + onOffScreen: false, + onPassing: false, + onTopVisible: false, + onBottomVisible: false, + onTopPassed: false, + onBottomPassed: false, - 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; - } - }, + // reverse callbacks + onPassingReverse: false, + onTopVisibleReverse: false, + onBottomVisibleReverse: false, + onTopPassedReverse: false, + onBottomPassedReverse: false, - 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); - }, + // special callbacks for image + onLoad: function () {}, + onAllLoaded: function () {}, - 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 = {}; - } - } - }, + // special callbacks for fixed position + onFixed: function () {}, + onUnfixed: function () {}, - 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; - } + // utility callbacks + onUpdate: false, // disabled by default for performance + onRefresh: function () {}, - // 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(); - } + metadata: { + src: 'src', }, - 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; - } + className: { + fixed: 'fixed', + placeholder: 'constraint', + visible: 'visible', }, - 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: { + method: 'The method you called is not defined.', + visible: 'Element is hidden, you must call refresh after element becomes visible', }, - 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 = context || element; - 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 when 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 ); + }; +})(jQuery, window, document); diff --git a/definitions/collections/breadcrumb.less b/definitions/collections/breadcrumb.less index df6f979..face26f 100644 --- a/definitions/collections/breadcrumb.less +++ b/definitions/collections/breadcrumb.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Breadcrumb - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,27 +12,26 @@ Theme *******************************/ -@type : 'collection'; -@element : 'breadcrumb'; - -@import (multiple) '../../theme.config'; +@type: "collection"; +@element: "breadcrumb"; +@import (multiple) "../../theme.config"; /******************************* Breadcrumb *******************************/ .ui.breadcrumb { - line-height: @lineHeight; - display: @display; - margin: @verticalMargin 0; - vertical-align: @verticalAlign; + line-height: @lineHeight; + display: @display; + margin: @verticalMargin 0; + vertical-align: @verticalAlign; } .ui.breadcrumb:first-child { - margin-top: 0; + margin-top: 0; } .ui.breadcrumb:last-child { - margin-bottom: 0; + margin-bottom: 0; } /******************************* @@ -41,57 +40,55 @@ /* Divider */ .ui.breadcrumb .divider { - display: inline-block; - opacity: @dividerOpacity; - margin: 0 @dividerSpacing 0; - - font-size: @dividerSize; - color: @dividerColor; - vertical-align: @dividerVerticalAlign; + display: inline-block; + opacity: @dividerOpacity; + margin: 0 @dividerSpacing; + font-size: @dividerSize; + color: @dividerColor; + vertical-align: @dividerVerticalAlign; } /* Link */ .ui.breadcrumb a { - color: @linkColor; + color: @linkColor; } .ui.breadcrumb a:hover { - color: @linkHoverColor; + color: @linkHoverColor; } - /* Icon Divider */ .ui.breadcrumb .icon.divider { - font-size: @iconDividerSize; - vertical-align: @iconDividerVerticalAlign; + font-size: @iconDividerSize; + vertical-align: @iconDividerVerticalAlign; } /* Section */ .ui.breadcrumb a.section { - cursor: pointer; + cursor: pointer; } .ui.breadcrumb .section { - display: inline-block; - margin: @sectionMargin; - padding: @sectionPadding; + display: inline-block; + margin: @sectionMargin; + padding: @sectionPadding; } /* Loose Coupling */ .ui.breadcrumb.segment { - display: inline-block; - padding: @segmentPadding; + 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; - } + /* Inverted */ + .ui.inverted.breadcrumb { + color: @invertedColor; + } + .ui.inverted.breadcrumb > .active.section { + color: @invertedActiveColor; + } + .ui.inverted.breadcrumb > .divider { + color: @invertedDividerColor; + } } /******************************* @@ -99,24 +96,23 @@ *******************************/ .ui.breadcrumb .active.section { - font-weight: @activeFontWeight; + font-weight: @activeFontWeight; } - /******************************* Variations *******************************/ .ui.breadcrumb { - font-size: @medium; + font-size: @medium; } & when not (@variationBreadcrumbSizes = false) { - each(@variationBreadcrumbSizes, { - @s: @@value; - .ui.@{value}.breadcrumb { - font-size: @s; - } - }) + each(@variationBreadcrumbSizes, { + @s: @@value; + .ui.@{value}.breadcrumb { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/collections/form.less b/definitions/collections/form.less index 06c5f34..264054f 100644 --- a/definitions/collections/form.less +++ b/definitions/collections/form.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Form - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,71 +12,70 @@ Theme *******************************/ -@type : 'collection'; -@element : 'form'; +@type: "collection"; +@element: "form"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Elements *******************************/ -/*-------------------- +/* -------------------- Form ----------------------*/ +--------------------- */ .ui.form { - position: relative; - max-width: 100%; + position: relative; + max-width: 100%; } -/*-------------------- +/* -------------------- Content ----------------------*/ +--------------------- */ .ui.form > p { - margin: @paragraphMargin; + margin: @paragraphMargin; } -/*-------------------- +/* -------------------- Field ----------------------*/ +--------------------- */ .ui.form .field { - clear: both; - margin: @fieldMargin; + clear: both; + margin: @fieldMargin; } .ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field { - margin-bottom: 0; + margin-bottom: 0; } .ui.form .fields .field { - clear: both; - margin: 0; + clear: both; + margin: 0; } - -/*-------------------- +/* -------------------- Labels ----------------------*/ +--------------------- */ .ui.form .field > label { - display: block; - margin: @labelMargin; - font-size: @labelFontSize; - font-weight: @labelFontWeight; - text-transform: @labelTextTransform; + display: block; + margin: @labelMargin; + font-size: @labelFontSize; + font-weight: @labelFontWeight; + text-transform: @labelTextTransform; } .ui.form:not(.inverted) .field > label:not(.button) { - color: @labelColor; + color: @labelColor; } -/*-------------------- - Standard Inputs ----------------------*/ +/* -------------------- + Standard Inputs +--------------------- */ .ui.form textarea, .ui.form input:not([type]), @@ -94,14 +93,14 @@ .ui.form input[type="file"], .ui.form input[type="url"], .ui.form input[type="week"] { - width: @inputWidth; - vertical-align: top; + width: @inputWidth; + vertical-align: top; } /* Set max height on unusual input */ .ui.form ::-webkit-datetime-edit, .ui.form ::-webkit-inner-spin-button { - height: @inputLineHeight; + height: @inputLineHeight; } .ui.form input:not([type]), @@ -119,304 +118,295 @@ .ui.form input[type="file"], .ui.form input[type="url"], .ui.form input[type="week"] { - 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; + 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; } .ui.form input[type="color"] { - padding: initial; + padding: initial; } .ui.form input::-webkit-calendar-picker-indicator { - padding: 0; - opacity: @iconOpacity; - transition: @iconTransition; - cursor: pointer; + padding: 0; + opacity: @iconOpacity; + transition: @iconTransition; + cursor: pointer; } /* 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; + 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; + height: @textAreaHeight; + min-height: @textAreaMinHeight; + max-height: @textAreaMaxHeight; } .ui.form textarea, .ui.form input[type="checkbox"] { - vertical-align: @checkboxVerticalAlign; + vertical-align: @checkboxVerticalAlign; } -/*-------------------- +/* -------------------- Checkbox margin ----------------------*/ +--------------------- */ .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { - margin-top: @checkboxLabelFieldTopMargin; + margin-top: @checkboxLabelFieldTopMargin; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { - margin-top: @inputLineHeight + @checkboxFieldTopMargin; + margin-top: @inputLineHeight + @checkboxFieldTopMargin; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { - margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin; + margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin; } .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { - margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin; + margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin; } .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { - margin-top: (@checkboxFieldTopMargin / 2); + margin-top: (@checkboxFieldTopMargin / 2); } .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { - margin-top: (@checkboxToggleFieldTopMargin / 2); + margin-top: (@checkboxToggleFieldTopMargin / 2); } .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { - margin-top: (@checkboxSliderFieldTopMargin / 2); + 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; - } -} -/*-------------------------- + /* -------------------- + 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; + 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; -} - -/*-------------------- + 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:not(.compact) { - min-width: auto; - width: 100%; + min-width: auto; + width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon { - float: right; + 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; - } + /* 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%; + 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; - } + /* 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; + width: auto; } & when (@variationFormEqualWidth) or (@variationFormWide) { - /* 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; - } -} - - -/*-------------------- + /* 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 not (@variationFormStates = false) { - each(@variationFormStates, { - @state: @value; - .ui.form .@{state}.message, - .ui.form .@{state}.message:empty { - display: none; - } - }) + each(@variationFormStates, { + @state: @value; + .ui.form .@{state}.message, + .ui.form .@{state}.message:empty { + display: none; + } + }); } /* Assumptions */ .ui.form .message:first-child { - margin-top: 0; + margin-top: 0; } -/*-------------------- +/* -------------------- Validation Prompt ----------------------*/ +--------------------- */ .ui.form .field .prompt.label { - white-space: normal; - background: @promptBackground !important; - border: @promptBorder !important; - color: @promptTextColor !important; - & li::before { - color: @promptTextColor; - } + white-space: normal; + background: @promptBackground !important; + border: @promptBorder !important; + color: @promptTextColor !important; + & li::before { + color: @promptTextColor; + } } & 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; - } + .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; + 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; + 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; + color: @inputPlaceholderColor; } .ui.form :-ms-input-placeholder when (@supportIE) { - color: @inputPlaceholderColor !important; + color: @inputPlaceholderColor !important; } .ui.form ::-moz-placeholder { - color: @inputPlaceholderColor; - opacity: 1; + color: @inputPlaceholderColor; + opacity: 1; } .ui.form :focus::-webkit-input-placeholder { - color: @inputPlaceholderFocusColor; + color: @inputPlaceholderFocusColor; } .ui.form :focus:-ms-input-placeholder when (@supportIE) { - color: @inputPlaceholderFocusColor !important; + color: @inputPlaceholderFocusColor !important; } .ui.form :focus::-moz-placeholder { - color: @inputPlaceholderFocusColor; + color: @inputPlaceholderFocusColor; } - - -/*-------------------- +/* -------------------- Focus ----------------------*/ +--------------------- */ .ui.form input:not([type]):focus, .ui.form input[type="color"]:focus, @@ -433,388 +423,386 @@ .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus, .ui.form input[type="week"]:focus { - color: @inputFocusColor; - border-color: @inputFocusBorderColor; - border-radius: @inputFocusBorderRadius; - background: @inputFocusBackground; - box-shadow: @inputFocusBoxShadow; + 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="color"]:focus, - input[type="date"]:focus, - input[type="datetime-local"]:focus, - input[type="email"]:focus, - input[type="month"]: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, - input[type="week"]:focus { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - .ui.form .ui[class*="left action"].input { - & input:not([type]), - input[type="color"], - input[type="date"], - input[type="datetime-local"], - input[type="email"], - input[type="month"], - input[type="number"], - input[type="password"], - input[type="search"], - input[type="tel"], - input[type="time"], - input[type="text"], - input[type="file"], - input[type="url"], - input[type="week"] { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } + .ui.form .ui.action.input:not([class*="left action"]) { + & input:not([type]):focus, + input[type="color"]:focus, + input[type="date"]:focus, + input[type="datetime-local"]:focus, + input[type="email"]:focus, + input[type="month"]: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, + input[type="week"]:focus { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + .ui.form .ui[class*="left action"].input { + & input:not([type]), + input[type="color"], + input[type="date"], + input[type="datetime-local"], + input[type="email"], + input[type="month"], + input[type="number"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="text"], + input[type="file"], + input[type="url"], + input[type="week"] { + 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; + color: @textAreaFocusColor; + border-color: @textAreaFocusBorderColor; + border-radius: @textAreaFocusBorderRadius; + background: @textAreaFocusBackground; + box-shadow: @textAreaFocusBoxShadow; + -webkit-appearance: none; } + /* Focus */ .ui.form input:focus::-webkit-calendar-picker-indicator { - opacity: @iconFocusOpacity; + opacity: @iconFocusOpacity; } & when not (@variationFormStates = false) { - /*-------------------- - States - ---------------------*/ - each(@variationFormStates, { - @state: @value; - @c: @formStates[@@state][color]; - @bg: @formStates[@@state][background]; - @bdc: @formStates[@@state][borderColor]; - @lbg: @formStates[@@state][labelBackground]; - - /* 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 .fields.@{state} .field .ui.label:not(.corner), - .ui.ui.form .field.@{state} label, - .ui.ui.form .field.@{state} .ui.label:not(.corner), - .ui.ui.form .fields.@{state} .field .input, - .ui.ui.form .field.@{state} .input { - color: @c; - } - - .ui.form .fields.@{state} .field .ui.label, - .ui.form .field.@{state} .ui.label { - background-color: @lbg; - } - - .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="color"], - .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="month"], - .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 .fields.@{state} .field input[type="week"], - .ui.form .field.@{state} textarea, - .ui.form .field.@{state} select, - .ui.form .field.@{state} input:not([type]), - .ui.form .field.@{state} input[type="color"], - .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="month"], - .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"], - .ui.form .field.@{state} input[type="week"] { - color: @c; - background: @bg; - border-color: @formStates[@@state][borderColor]; - border-radius: @formStates[@@state][borderRadius]; - box-shadow: @formStates[@@state][boxShadow]; - } - & when (@state=error) { - .ui.form .field input:not(:placeholder-shown):invalid { - color: @c; - background: @bg; - border-color: @formStates[@@state][borderColor]; - border-radius: @formStates[@@state][borderRadius]; - box-shadow: @formStates[@@state][boxShadow]; - } - .ui.form .field input:not(:-ms-input-placeholder):invalid when (@supportIE) { - 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="color"]: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="month"]: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, - .ui.form .field.@{state} input[type="week"]: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 - --------------------*/ - & when (@variationFormTransparent) { - /* 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 when (@supportIE) { - 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 when (@supportIE) { - 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]; - } + /* -------------------- + States + --------------------- */ + each(@variationFormStates, { + @state: @value; + @c: @formStates[@@state][color]; + @bg: @formStates[@@state][background]; + @bdc: @formStates[@@state][borderColor]; + @lbg: @formStates[@@state][labelBackground]; + + /* 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 .fields.@{state} .field .ui.label:not(.corner), + .ui.ui.form .field.@{state} label, + .ui.ui.form .field.@{state} .ui.label:not(.corner), + .ui.ui.form .fields.@{state} .field .input, + .ui.ui.form .field.@{state} .input { + color: @c; + } + + .ui.form .fields.@{state} .field .ui.label, + .ui.form .field.@{state} .ui.label { + background-color: @lbg; + } + + .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="color"], + .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="month"], + .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 .fields.@{state} .field input[type="week"], + .ui.form .field.@{state} textarea, + .ui.form .field.@{state} select, + .ui.form .field.@{state} input:not([type]), + .ui.form .field.@{state} input[type="color"], + .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="month"], + .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"], + .ui.form .field.@{state} input[type="week"] { + color: @c; + background: @bg; + border-color: @formStates[@@state][borderColor]; + border-radius: @formStates[@@state][borderRadius]; + box-shadow: @formStates[@@state][boxShadow]; + } + & when (@state=error) and (@variationFormInvalid) { + .ui.form .field input:not(:placeholder-shown):invalid { + color: @c; + background: @bg; + border-color: @formStates[@@state][borderColor]; + border-radius: @formStates[@@state][borderRadius]; + box-shadow: @formStates[@@state][boxShadow]; + } + .ui.form .field input:not(:-ms-input-placeholder):invalid when (@supportIE) { + 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="color"]: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="month"]: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, + .ui.form .field.@{state} input[type="week"]: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 + --------------------*/ + & when (@variationFormTransparent) { + /* 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 when (@supportIE) { + 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 when (@supportIE) { + 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 { + 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 { + background: @bg; + border-color: @bdc; + } + .ui.form .fields.@{state} .field .checkbox label::after, + .ui.form .field.@{state} .checkbox label::after { + color: @c; + } + + & when (@variationFormInverted) { + .ui.inverted.form .fields.@{state} .field label, + .ui.inverted.form .@{state}.field label { + color: @lbg; + } + } + }); +} - /* 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]; +& when (@variationFormDisabled) { + /* -------------------- + Disabled + --------------------- */ + + .ui.form .disabled.fields .field, + .ui.form .disabled.field, + .ui.form .field :disabled { + pointer-events: @disabledPointerEvents; + opacity: @disabledOpacity; } - - /* 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]; + .ui.form .field.disabled > label, + .ui.form .fields.disabled > label { + opacity: @disabledLabelOpacity; } - - /* 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; + .ui.form .field.disabled :disabled { + opacity: 1; } +} - /*-------------------- - Checkbox State - ---------------------*/ - .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label, - .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label { - 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 { - background: @bg; - border-color: @bdc; +& when (@variationFormLoading) { + /* -------------- + Loading + --------------- */ + + .ui.loading.form { + position: relative; + cursor: default; + pointer-events: none; } - .ui.form .fields.@{state} .field .checkbox label::after, - .ui.form .field.@{state} .checkbox label::after { - color: @c; + .ui.loading.form::before { + position: absolute; + content: ""; + top: 0; + left: 0; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + z-index: @loaderDimmerZIndex; } - & when (@variationFormInverted) { - .ui.inverted.form .fields.@{state} .field label, - .ui.inverted.form .@{state}.field label { - color: @lbg; - } + .ui.loading.form.segments::before { + border-radius: @defaultBorderRadius; } - }) -} - -& 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; - } + .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; + } } /******************************* @@ -822,370 +810,364 @@ *******************************/ & 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; - } + /* -------------------- + 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 > .checkbox::after, - .ui.form .required.field > .checkbox::after { - position: absolute; - top: 0; - left: 100%; - } -} + .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.inverted.form .ui.checkbox label, - .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="color"], - .ui.inverted.form input[type="date"], - .ui.inverted.form input[type="datetime-local"], - .ui.inverted.form input[type="email"], - .ui.inverted.form input[type="month"], - .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"], - .ui.inverted.form input[type="week"] { - background: @invertedInputBackground; - border-color: @invertedInputBorderColor; - color: @invertedInputColor; - box-shadow: @invertedInputBoxShadow; - } + /* -------------------- + Inverted Colors + --------------------- */ + + .ui.inverted.form label, + .ui.form .inverted.segment label, + .ui.form .inverted.segment .ui.checkbox label, + .ui.inverted.form .ui.checkbox label, + .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="color"], + .ui.inverted.form input[type="date"], + .ui.inverted.form input[type="datetime-local"], + .ui.inverted.form input[type="email"], + .ui.inverted.form input[type="month"], + .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"], + .ui.inverted.form input[type="week"] { + background: @invertedInputBackground; + border-color: @invertedInputBorderColor; + color: @invertedInputColor; + box-shadow: @invertedInputBoxShadow; + } } & when (@variationFormGrouped) { - /*-------------------- - Field Groups - ---------------------*/ + /* -------------------- + Field Groups + --------------------- */ - /* Grouped Vertically */ + /* Grouped Vertically */ - .ui.form .grouped.fields { - display: block; - margin: @groupedMargin; - } + .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; - } + .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; + display: flex; + flex-direction: row; + margin: @fieldsMargin; } .ui.form .fields > .field { - flex: 0 1 auto; - padding-left: (@gutterWidth / 2); - padding-right: (@gutterWidth / 2); + flex: 0 1 auto; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); } .ui.form .fields > .field:first-child { - border-left: none; - box-shadow: none; + border-left: none; + box-shadow: none; } & when (@variationFormEqualWidth) { - /* 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; - } + /* 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; - } +@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; - } + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .field { + width: @oneColumn; + margin: 0 0 @rowDistance; + } } & when (@variationFormWide) { + /* Sizing Combinations */ + .ui.form .fields .wide.field { + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); + } - /* 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; - } -} - - -/*-------------------- + .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 ----------------------*/ +--------------------- */ & when (@variationFormEqualWidth) { - .ui[class*="equal width"].form .fields > .field, - .ui.form [class*="equal width"].fields > .field { - width: 100%; - flex: 1 1 auto; - } + .ui[class*="equal width"].form .fields > .field, + .ui.form [class*="equal width"].fields > .field { + width: 100%; + flex: 1 1 auto; + } } & when (@variationFormInline) { - /*-------------------- - Inline Fields - ---------------------*/ + /* -------------------- + 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; + .ui.form .inline.fields { + margin: @fieldMargin; + align-items: center; + } + .ui.form .inline.fields .field { + margin: 0; + padding: @inlineFieldsMargin; + } - margin-top: 0; - margin-bottom: 0; + /* 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; + } - 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; - } + /* Grouped Inline Label */ + .ui.form .inline.fields > label { + margin: @groupedInlineLabelMargin; + } - /* 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%; - } -} + /* 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; + 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; - } - }) + 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/definitions/collections/grid.less b/definitions/collections/grid.less index 3a0cf93..de108e1 100644 --- a/definitions/collections/grid.less +++ b/definitions/collections/grid.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Grid - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,144 +12,137 @@ Theme *******************************/ -@type : 'collection'; -@element : 'grid'; +@type: "collection"; +@element: "grid"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Standard *******************************/ .ui.grid { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; - padding: 0; + display: flex; + flex-flow: row 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); + margin: -(@rowSpacing / 2) -(@gutterWidth / 2); } & when (@variationGridRelaxed) { - .ui.relaxed.grid { - margin-left: -(@relaxedGutterWidth / 2); - margin-right: -(@relaxedGutterWidth / 2); - } - & when (@variationGridVeryRelaxed) { - .ui[class*="very relaxed"].grid { - margin-left: -(@veryRelaxedGutterWidth / 2); - margin-right: -(@veryRelaxedGutterWidth / 2); + .ui.relaxed.grid { + margin-left: -(@relaxedGutterWidth / 2); + margin-right: -(@relaxedGutterWidth / 2); + } + & when (@variationGridVeryRelaxed) { + .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; + 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; + 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); + 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); -} - -/*------------------- + position: relative; + display: flex; + flex-flow: row 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); + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); } .ui.grid > .row > .column { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } -/*------------------- +/* ------------------- Content ---------------------*/ +-------------------- */ .ui.grid > .row > img, .ui.grid > .row > .column > img { - max-width: @columnMaxImageWidth; + max-width: @columnMaxImageWidth; } -/*------------------- +/* ------------------- Loose Coupling ---------------------*/ +-------------------- */ /* Collapse Margin on Consecutive Grid */ .ui.grid > .ui.grid:first-child { - margin-top: 0; + margin-top: 0; } .ui.grid > .ui.grid:last-child { - margin-bottom: 0; + 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%; + width: 100%; } /* Align Dividers with Gutter */ .ui.grid .row + .ui.divider { - flex-grow: 1; - margin: (@rowSpacing / 2) (@gutterWidth / 2); + flex-grow: 1; + margin: (@rowSpacing / 2) (@gutterWidth / 2); } .ui.grid .column + .ui.vertical.divider { - height: e(%("calc(50%% - %d)", (@rowSpacing / 2))); + 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; + box-shadow: none; } /******************************* @@ -157,1837 +150,1826 @@ *******************************/ & 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; - } - } -} - - -/*------------------- + /* ----------------------- + 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; + width: @oneColumn; } /* Grid Based */ .ui[class*="one column"].grid > .row > .column, .ui[class*="one column"].grid > .column:not(.row) { - width: @oneColumn; + width: @oneColumn; } .ui[class*="two column"].grid > .row > .column, .ui[class*="two column"].grid > .column:not(.row) { - width: @twoColumn; + width: @twoColumn; } .ui[class*="three column"].grid > .row > .column, .ui[class*="three column"].grid > .column:not(.row) { - width: @threeColumn; + width: @threeColumn; } .ui[class*="four column"].grid > .row > .column, .ui[class*="four column"].grid > .column:not(.row) { - width: @fourColumn; + width: @fourColumn; } .ui[class*="five column"].grid > .row > .column, .ui[class*="five column"].grid > .column:not(.row) { - width: @fiveColumn; + width: @fiveColumn; } .ui[class*="six column"].grid > .row > .column, .ui[class*="six column"].grid > .column:not(.row) { - width: @sixColumn; + width: @sixColumn; } .ui[class*="seven column"].grid > .row > .column, .ui[class*="seven column"].grid > .column:not(.row) { - width: @sevenColumn; + width: @sevenColumn; } .ui[class*="eight column"].grid > .row > .column, .ui[class*="eight column"].grid > .column:not(.row) { - width: @eightColumn; + width: @eightColumn; } .ui[class*="nine column"].grid > .row > .column, .ui[class*="nine column"].grid > .column:not(.row) { - width: @nineColumn; + width: @nineColumn; } .ui[class*="ten column"].grid > .row > .column, .ui[class*="ten column"].grid > .column:not(.row) { - width: @tenColumn; + width: @tenColumn; } .ui[class*="eleven column"].grid > .row > .column, .ui[class*="eleven column"].grid > .column:not(.row) { - width: @elevenColumn; + width: @elevenColumn; } .ui[class*="twelve column"].grid > .row > .column, .ui[class*="twelve column"].grid > .column:not(.row) { - width: @twelveColumn; + width: @twelveColumn; } .ui[class*="thirteen column"].grid > .row > .column, .ui[class*="thirteen column"].grid > .column:not(.row) { - width: @thirteenColumn; + width: @thirteenColumn; } .ui[class*="fourteen column"].grid > .row > .column, .ui[class*="fourteen column"].grid > .column:not(.row) { - width: @fourteenColumn; + width: @fourteenColumn; } .ui[class*="fifteen column"].grid > .row > .column, .ui[class*="fifteen column"].grid > .column:not(.row) { - width: @fifteenColumn; + width: @fifteenColumn; } .ui[class*="sixteen column"].grid > .row > .column, .ui[class*="sixteen column"].grid > .column:not(.row) { - width: @sixteenColumn; + width: @sixteenColumn; } /* Row Based Overrides */ .ui.grid > [class*="one column"].row > .column { - width: @oneColumn !important; + width: @oneColumn !important; } .ui.grid > [class*="two column"].row > .column { - width: @twoColumn !important; + width: @twoColumn !important; } .ui.grid > [class*="three column"].row > .column { - width: @threeColumn !important; + width: @threeColumn !important; } .ui.grid > [class*="four column"].row > .column { - width: @fourColumn !important; + width: @fourColumn !important; } .ui.grid > [class*="five column"].row > .column { - width: @fiveColumn !important; + width: @fiveColumn !important; } .ui.grid > [class*="six column"].row > .column { - width: @sixColumn !important; + width: @sixColumn !important; } .ui.grid > [class*="seven column"].row > .column { - width: @sevenColumn !important; + width: @sevenColumn !important; } .ui.grid > [class*="eight column"].row > .column { - width: @eightColumn !important; + width: @eightColumn !important; } .ui.grid > [class*="nine column"].row > .column { - width: @nineColumn !important; + width: @nineColumn !important; } .ui.grid > [class*="ten column"].row > .column { - width: @tenColumn !important; + width: @tenColumn !important; } .ui.grid > [class*="eleven column"].row > .column { - width: @elevenColumn !important; + width: @elevenColumn !important; } .ui.grid > [class*="twelve column"].row > .column { - width: @twelveColumn !important; + width: @twelveColumn !important; } .ui.grid > [class*="thirteen column"].row > .column { - width: @thirteenColumn !important; + width: @thirteenColumn !important; } .ui.grid > [class*="fourteen column"].row > .column { - width: @fourteenColumn !important; + width: @fourteenColumn !important; } .ui.grid > [class*="fifteen column"].row > .column { - width: @fifteenColumn !important; + width: @fifteenColumn !important; } .ui.grid > [class*="sixteen column"].row > .column { - width: @sixteenColumn !important; + width: @sixteenColumn !important; } -& when (@variationGridCelled) and (@variationGridPage){ - /* Celled Page */ - .ui.celled.page.grid { - box-shadow: none; - } +& when (@variationGridCelled) and (@variationGridPage) { + /* Celled Page */ + .ui.celled.page.grid { + box-shadow: none; + } } & when (@variationGridWide) { - /*------------------- - 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; - } - } + /* ------------------- + 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; - } + /* ---------------------- + 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); - } - - & when (@variationGridVeryRelaxed) { - .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); - } - & when (@variationGridVeryRelaxed) { - .ui[class*="very relaxed"].grid .row + .ui.divider, - .ui.grid [class*="very relaxed"].row + .ui.divider { - margin-left: (@veryRelaxedGutterWidth / 2); - margin-right: (@veryRelaxedGutterWidth / 2); - } - } + /* ---------------------- + 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); + } + + & when (@variationGridVeryRelaxed) { + .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); + } + & when (@variationGridVeryRelaxed) { + .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; - } + /* ---------------------- + Padded + ----------------------- */ + + .ui.padded.grid:not(.vertically):not(.horizontally) { + margin: 0; + } + [class*="horizontally padded"].ui.grid { + margin-left: 0; + margin-right: 0; + } + [class*="vertically padded"].ui.grid { + margin-top: 0; + margin-bottom: 0; + } } & when (@variationGridFloated) { - /*---------------------- - "Floated" - -----------------------*/ + /* ---------------------- + "Floated" + ----------------------- */ - .ui.grid [class*="left floated"].column { - margin-right: auto; - } - .ui.grid [class*="right floated"].column { - margin-left: auto; - } + .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; - } + /* ---------------------- + Divided + ----------------------- */ - & when (@variationGridVertical) { - /* 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; + .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), + .ui.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedBorder; } - } + & when (@variationGridVertical) { + /* 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 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; - } + & when (@variationGridVertical) { + /* No space on top of first row */ + .ui[class*="vertically divided"].grid > .row:first-child > .column { + margin-top: 0; + } + } - & when (@variationGridVertical) { - /* 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; } - } + & when (@variationGridVertical) { + /* 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; + } + } - /* Divided Row */ - .ui.grid > .divided.row > .column { - box-shadow: @dividedBorder; - } - .ui.grid > .divided.row > .column:first-child { - box-shadow: none; - } - - & when (@variationGridVertical) { - /* 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%; - } - } - & when (@variationGridVertical) { - /* 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; + & when (@variationGridPadded) { + /* Padded Horizontally Divided */ + [class*="horizontally padded"].ui.divided.grid, + .ui.padded.divided.grid:not(.vertically):not(.horizontally) { + width: 100%; + } } & when (@variationGridVertical) { - .ui.inverted[class*="vertically divided"].grid > .row::before { - box-shadow: @verticallyDividedInvertedBorder; - } - } - } - & when (@variationGridRelaxed) and (@variationGridVertical) { - /* Relaxed */ - .ui.relaxed[class*="vertically divided"].grid > .row::before { - margin-left: (@relaxedGutterWidth / 2); - margin-right: (@relaxedGutterWidth / 2); - width: e(%("calc(100%% - %d)", @relaxedGutterWidth)); + /* First Row Vertically Divided */ + .ui[class*="vertically divided"].grid > .row:first-child::before { + box-shadow: none; + } } - & when (@variationGridVeryRelaxed) { - .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 (@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; + } + & when (@variationGridVertical) { + .ui.inverted[class*="vertically divided"].grid > .row::before { + box-shadow: @verticallyDividedInvertedBorder; + } + } + } + & when (@variationGridRelaxed) and (@variationGridVertical) { + /* Relaxed */ + .ui.relaxed[class*="vertically divided"].grid > .row::before { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); + width: e(%("calc(100%% - %d)", @relaxedGutterWidth)); + } + & when (@variationGridVeryRelaxed) { + .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 - -----------------------*/ + /* ---------------------- + Celled + ----------------------- */ - .ui.celled.grid { - width: 100%; - margin: @celledMargin; - box-shadow: @celledGridDivider; - } + .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; - } - } - & when (@variationGridVeryRelaxed) { - .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; - } + .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; + } + } + & when (@variationGridVeryRelaxed) { + .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; - } + /* ---------------------- + 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; - } + /* 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; - } + /* ---------------------- + 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 ------------------------*/ -& when not (@variationGridColors = false) { - each(@variationGridColors, { - @color: @value; - @c: @colors[@@color][color]; - - .ui.grid > .@{color}.row, - .ui.grid > .@{color}.column, - .ui.grid > .row > .@{color}.column { - background-color: @c; - color: @white; + /* 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 +----------------------- */ +& when not (@variationGridColors = false) { + each(@variationGridColors, { + @color: @value; + @c: @colors[@@color][color]; + + .ui.grid > .@{color}.row, + .ui.grid > .@{color}.column, + .ui.grid > .row > .@{color}.column { + background-color: @c; + color: @white; + } + }); +} & when (@variationGridEqualWidth) { - /*---------------------- - Equal Width - -----------------------*/ + /* ---------------------- + 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; - } + .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; - } + /* ---------------------- + 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; - } + /* 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; - } + /* 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 { - padding-top: (@rowSpacing / 2) !important; - padding-bottom: (@rowSpacing / 2) !important; - box-shadow: none !important; - margin: 0; - } - .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched), - .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) { - display: inline-block !important; - } - .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; - } - } + /* ------------------- + 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 { + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + box-shadow: none !important; + margin: 0; + } + .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched), + .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) { + display: inline-block !important; + } + .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.ui.ui.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; + /* ------------------- + Stackable + -------------------- */ + + @media only screen and (max-width: @largestMobileScreen) { + body > .ui.stackable.grid, + .ui:not(.segment):not(.grid) .ui.stackable.grid { + width: auto; + margin-left: @stackableMobileGutter; + margin-right: @stackableMobileGutter; + } + .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 !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); + margin-right: -(@stackableGutter / 2); + } + + /* 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; + } + } } - & 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) ------------------------*/ +} +/* ---------------------- + 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; - } + .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; - } + .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; - } + .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; - } + .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 { - margin: -(@compactGutterWidth / 2); - } - - .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); - padding-left: 0; - padding-right: 0; - } - - /* 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[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; } - & when (@variationGridVeryRelaxed) { - .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), - .ui.compact[class*="very relaxed"].celled.grid > .row > .column { - padding: @compactCelledVeryRelaxedPadding; - } + .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; } - } +} - /*----------------- - Very compact - -----------------*/ +& when (@variationGridCompact) { + /* ----------------- + Compact + ----------------- */ - & when (@variationGridVeryCompact) { - .ui.ui.ui[class*="very compact"].grid { - margin: -(@veryCompactGutterWidth / 2); + .ui.ui.ui.compact.grid { + margin: -(@compactGutterWidth / 2); } - .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.compact.grid > .column:not(.row), + .ui.ui.ui.compact.grid > .row > .column { + padding-left: (@compactGutterWidth / 2); + padding-right: (@compactGutterWidth / 2); } - .ui.ui.ui[class*="very compact"].grid > * { - padding-left: (@veryCompactGutterWidth / 2); - padding-right: (@veryCompactGutterWidth / 2); + .ui.ui.ui.compact.grid > * { + padding-left: (@compactGutterWidth / 2); + padding-right: (@compactGutterWidth / 2); } /* Row */ - .ui.ui.ui[class*="very compact"].grid > .row { - padding-top: (@veryCompactRowSpacing / 2); - padding-bottom: (@veryCompactRowSpacing / 2); - padding-left: 0; - padding-right: 0; + .ui.ui.ui.compact.grid > .row { + padding: (@compactRowSpacing / 2) 0; } /* Columns */ - .ui.ui.ui[class*="very compact"].grid > .column:not(.row) { - padding-top: (@veryCompactRowSpacing / 2); - padding-bottom: (@veryCompactRowSpacing / 2); + .ui.ui.ui.compact.grid > .column:not(.row) { + padding-top: (@compactRowSpacing / 2); + padding-bottom: (@compactRowSpacing / 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; - } - & when (@variationGridVeryRelaxed) { - .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; + /* Relaxed + Celled */ + .ui.compact.relaxed.celled.grid > .column:not(.row), + .ui.compact.relaxed.celled.grid > .row > .column { + padding: @compactCelledRelaxedPadding; + } + & when (@variationGridVeryRelaxed) { + .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), + .ui.compact[class*="very relaxed"].celled.grid > .row > .column { + padding: @compactCelledVeryRelaxedPadding; + } } - } } - } -} + /* ----------------- + Very compact + ----------------- */ + + & when (@variationGridVeryCompact) { + .ui.ui.ui[class*="very compact"].grid { + margin: -(@veryCompactGutterWidth / 2); + } + + .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: (@veryCompactRowSpacing / 2) 0; + } + + /* 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; + } + & when (@variationGridVeryRelaxed) { + .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/definitions/collections/menu.less b/definitions/collections/menu.less index e4183d3..7c06697 100644 --- a/definitions/collections/menu.less +++ b/definitions/collections/menu.less @@ -1,2003 +1,1981 @@ /* * # Fomantic - Menu - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Copyright 2015 Contributor * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'collection'; -@element : 'menu'; +@type: "collection"; +@element: "menu"; -@import (multiple) '../../theme.config'; +@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; + 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; + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; } .ui.menu:first-child { - margin-top: 0; + margin-top: 0; } .ui.menu:last-child { - margin-bottom: 0; + margin-bottom: 0; } - -/*-------------- +/* -------------- Sub-Menu ----------------*/ +--------------- */ .ui.menu .menu { - margin: 0; + margin: 0; } .ui.menu:not(.vertical) > .menu { - display: flex; + display: flex; } -/*-------------- +/* -------------- Item ----------------*/ +--------------- */ .ui.menu:not(.vertical) .item { - display: flex; - align-items: center; + 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; + 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-radius: @borderRadius 0 0 @borderRadius; } /* Border */ .ui.menu .item::before { - position: absolute; - content: ''; - top: 0; - right: 0; - height: 100%; - - width: @dividerSize; - background: @dividerBackground; + 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; + user-select: text; + line-height: @textLineHeight; } .ui.menu .item > p:first-child { - margin-top: 0; + margin-top: 0; } .ui.menu .item > p:last-child { - margin-bottom: 0; + margin-bottom: 0; } -/*-------------- +/* -------------- Icons ----------------*/ +--------------- */ .ui.menu .item > i.icon { - opacity: @iconOpacity; - float: @iconFloat; - margin: @iconMargin; + 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; + position: relative; + top: @buttonOffset; + margin: @buttonMargin; + padding-bottom: @buttonVerticalPadding; + padding-top: @buttonVerticalPadding; + font-size: @buttonSize; } -/*---------------- +/* ---------------- Grid / Container ------------------*/ +----------------- */ -.ui.menu > .grid, +.ui.menu > .grid, .ui.menu > .container { - display: flex; - align-items: inherit; - flex-direction: inherit; + display: flex; + align-items: inherit; + flex-direction: inherit; } -/*-------------- +/* -------------- Inputs ----------------*/ +--------------- */ .ui.menu .item > .input { - width: 100%; + width: 100%; } .ui.menu:not(.vertical) .item > .input { - position: relative; - top: @inputOffset; - margin: @inputVerticalMargin 0; + position: relative; + top: @inputOffset; + margin: @inputVerticalMargin 0; } .ui.menu .item > .input input { - font-size: @inputSize; - padding-top: @inputVerticalPadding; - padding-bottom: @inputVerticalPadding; + 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; + 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; - } + .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; + 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; + min-width: e("calc(100% - 1px)"); + border-radius: 0 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius; + background: @dropdownBackground; + margin: @dropdownMenuDistance 0 0; + box-shadow: @dropdownMenuBoxShadow; } .ui.menu .dropdown.item:not(.column) .menu { - flex-direction: column; + flex-direction: column; } - /* 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; + 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; + background: @dropdownHoveredItemBackground !important; + color: @dropdownHoveredItemColor !important; } .ui.menu .ui.dropdown .menu > .selected.item { - background: @dropdownSelectedItemBackground !important; - color: @dropdownSelectedItemColor !important; + background: @dropdownSelectedItemBackground !important; + color: @dropdownSelectedItemColor !important; } .ui.menu .ui.dropdown .menu > .active.item { - background: @dropdownActiveItemBackground !important; - font-weight: @dropdownActiveItemFontWeight !important; - color: @dropdownActiveItemColor !important; + background: @dropdownActiveItemBackground !important; + font-weight: @dropdownActiveItemFontWeight !important; + color: @dropdownActiveItemColor !important; } .ui.menu .ui.dropdown.item .menu .item:not(.filtered) { - display: block; + 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; + 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; - } + /* 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 { +/* 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; - } + /* 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%; - & when (@supportIE) { - /* 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; - } + /* Vertical */ + .ui.vertical.menu .dropdown.item > i.icon { + float: right; + content: "\f0da"; + margin-left: 1em; + } + .ui.vertical.menu .dropdown.item .menu { + left: 100%; + & when (@supportIE) { + /* 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%; + width: 100%; } -/*-------------- +/* -------------- Labels ----------------*/ +--------------- */ .ui.menu .item > .label:not(.floating) { - margin-left: @labelTextMargin; - padding: @labelVerticalPadding @labelHorizontalPadding; + margin-left: @labelTextMargin; + padding: @labelVerticalPadding @labelHorizontalPadding; } & when (@variationMenuVertical) { - .ui.vertical.menu .item > .label { - margin-top: @labelOffset; - margin-bottom: @labelOffset; - padding: @labelVerticalPadding @labelHorizontalPadding; - } + .ui.vertical.menu .item > .label { + margin-top: @labelOffset; + margin-bottom: @labelOffset; + padding: @labelVerticalPadding @labelHorizontalPadding; + } } .ui.menu .item > .floating.label { - padding: @labelVerticalPadding @labelHorizontalPadding; + padding: @labelVerticalPadding @labelHorizontalPadding; } .ui.menu .item > .label { - background: @labelBackground; - color: @labelTextColor; + background: @labelBackground; + color: @labelTextColor; } .ui.menu .item > .image.label img { - margin: @imageLabelImageMargin; - height: @imageLabelHeight; + margin: @imageLabelImageMargin; + height: @imageLabelHeight; } -/*-------------- + +/* -------------- Images ----------------*/ +--------------- */ .ui.menu .item > img:not(.ui) { - display: inline-block; - vertical-align: middle; - margin: @imageMargin; - width: @imageWidth; + 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; - } + .ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: @verticalImageWidth; + } } /******************************* Coupling *******************************/ -/*-------------- +/* -------------- List ----------------*/ +--------------- */ /* Menu divider shouldn't apply */ .ui.menu .list .item::before { - background: none !important; + background: none !important; } & when (@variationMenuVertical) { - /*-------------- - Sidebar - ---------------*/ + /* -------------- + Sidebar + --------------- */ - /* Show vertical dividers below last */ + /* 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; - } + .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; - } + .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; - } + .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; + 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; + background: @pressedItemBackground; + color: @pressedItemTextColor; } - -/*-------------- +/* -------------- Active ----------------*/ +--------------- */ -.ui.menu .active.item { - background: @activeItemBackground; - color: @activeItemTextColor; - font-weight: @activeItemFontWeight; - box-shadow: @activeItemBoxShadow; +.ui.menu .active.item { + background: @activeItemBackground; + color: @activeItemTextColor; + font-weight: @activeItemFontWeight; + box-shadow: @activeItemBoxShadow; } .ui.menu .active.item > i.icon { - opacity: @activeIconOpacity; + opacity: @activeIconOpacity; } -/*-------------- +/* -------------- Active Hover ----------------*/ +--------------- */ .ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover { - background-color: @activeHoverItemBackground; - color: @activeHoverItemColor; + background-color: @activeHoverItemBackground; + color: @activeHoverItemColor; } - -/*-------------- +/* -------------- Disabled ----------------*/ +--------------- */ .ui.ui.menu .item.disabled { - cursor: default; - background-color: transparent; - color: @disabledTextColor; - pointer-events: none; + 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; + 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; + display: flex; + margin-left: auto !important; } .ui.menu:not(.vertical) :not(.dropdown) > .left.menu, .ui.menu:not(.vertical) :not(.dropdown) > .right.menu { - display: inherit; + 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; + 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; + right: auto; + left: 0; } /* Remove Outer Borders */ .ui.menu .center.item:last-child::before, .ui.menu .center.menu > .item:last-child::before { - display: none; + display: none; } & when (@variationMenuVertical) { - /*-------------- - Vertical - ---------------*/ + /* -------------- + Vertical + --------------- */ - .ui.vertical.menu { - display: block; - flex-direction: column; - background: @verticalBackground; - box-shadow: @verticalBoxShadow; - } + .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; - } + /* --- 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; + } - /* 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; - } -} + /* --- Label --- */ + .ui.vertical.menu .item > .label { + float: right; + text-align: center; + } -& 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; - } + /* --- 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; + } - /* 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; - &:hover { - cursor: default; - } - } - - /* Coupling with segment for attachment */ - .ui.tabular.menu ~ .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 (@variationMenuInverted) { - .ui.inverted.tabular.menu .active.item, - .ui.inverted.tabular.menu .active.item:hover { - background: @invertedTabularActiveBackground; - border-color: @invertedTabularBorderColor; + /* --- Border --- */ + .ui.vertical.menu .item::before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; } - .ui.inverted.tabular.menu .item:not(.active):hover { - color: @invertedTabularHoveredTextColor; - background: transparent; - cursor: pointer; + + .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; + } -& when (@variationMenuPagination) { - /*-------------- - Pagination - ---------------*/ + /* Hover */ + .ui.tabular.menu .item:hover { + background-color: transparent; + color: @tabularHoveredTextColor; + } - .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; - } + /* 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; + &:hover { + cursor: default; + } + } - .ui.pagination.menu .item { - min-width: @paginationMinWidth; - text-align: center; - } - .ui.pagination.menu .icon.item i.icon { - vertical-align: top; - } + /* Coupling with segment for attachment */ + .ui.tabular.menu ~ .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; + } - /* Active */ - .ui.pagination.menu .active.item { - border-top: none; - padding-top: @itemVerticalPadding; - background-color: @paginationActiveBackground; - color: @paginationActiveTextColor; - box-shadow: none; - } -} + /* 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; + } -& 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; + /* 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 (@variationMenuInverted) { - /* Inverted */ - .ui.secondary.inverted.menu { - background-color: transparent; - } + .ui.inverted.tabular.menu .active.item, + .ui.inverted.tabular.menu .active.item:hover { + background: @invertedTabularActiveBackground; + border-color: @invertedTabularBorderColor; + } + .ui.inverted.tabular.menu .item:not(.active):hover { + color: @invertedTabularHoveredTextColor; + background: transparent; + cursor: pointer; + } } - } +} - & when (@variationMenuPointing) { - /*--------------------- - Secondary Pointing - -----------------------*/ +& when (@variationMenuPagination) { + /* -------------- + Pagination + --------------- */ - .ui.secondary.pointing.menu { - margin-left: 0; - margin-right: 0; - border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; + .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.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.pagination.menu .item { + min-width: @paginationMinWidth; + text-align: center; } - .ui.secondary.pointing.menu .ui.dropdown .menu .item { - border-bottom-width: 0; + .ui.pagination.menu .icon.item i.icon { + vertical-align: top; } - .ui.secondary.pointing.menu .item > .label:not(.floating) { - margin-top: -@labelVerticalPadding; - margin-bottom: -@labelVerticalPadding; + /* Active */ + .ui.pagination.menu .active.item { + border-top: none; + padding-top: @itemVerticalPadding; + background-color: @paginationActiveBackground; + color: @paginationActiveTextColor; + box-shadow: none; } - .ui.secondary.pointing.menu .item > .circular.label { - margin-top: -@circularLabelVerticalPadding; - margin-bottom: -@circularLabelVerticalPadding; +} + +& when (@variationMenuSecondary) { + /* -------------- + Secondary + --------------- */ + + .ui.secondary.menu { + background: @secondaryBackground; + margin-left: -@secondaryItemSpacing; + margin-right: -@secondaryItemSpacing; + border-radius: 0; + border: none; + box-shadow: none; } - /* Item Types */ - .ui.secondary.pointing.menu .header.item { - color: @secondaryPointingHeaderColor !important; + /* Item */ + .ui.secondary.menu .item { + align-self: center; + box-shadow: none; + border: none; + padding: @secondaryItemPadding; + margin: @secondaryItemMargin; + background: @secondaryItemBackground; + transition: @secondaryItemTransition; + border-radius: @secondaryItemBorderRadius; } - .ui.secondary.pointing.menu .text.item { - box-shadow: none !important; + + /* No Divider */ + .ui.secondary.menu .item::before { + display: none !important; } - .ui.secondary.pointing.menu .item::after { - display: none; + + /* Header */ + .ui.secondary.menu .header.item { + border-radius: 0; + border-right: @secondaryHeaderBorder; + background: @secondaryHeaderBackground; } - /* 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; + /* Image */ + .ui.secondary.menu .item > img:not(.ui) { + margin: 0; } - /* 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; + /* 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.pointing.menu .active.item { - background-color: transparent; - box-shadow: none; - border-color: @secondaryPointingActiveBorderColor; - font-weight: @secondaryPointingActiveFontWeight; - color: @secondaryPointingActiveTextColor; + .ui.secondary.menu .active.item { + box-shadow: none; + background: @secondaryActiveItemBackground; + color: @secondaryActiveItemColor; + border-radius: @secondaryItemBorderRadius; } /* Active Hover */ - .ui.secondary.pointing.menu .active.item:hover { - border-color: @secondaryPointingActiveHoverBorderColor; - color: @secondaryPointingActiveHoverTextColor; + .ui.secondary.menu .active.item:hover { + box-shadow: none; + background: @secondaryActiveHoverItemBackground; + color: @secondaryActiveHoverItemColor; } - /* Active Dropdown */ - .ui.secondary.pointing.menu .active.dropdown.item { - border-color: @secondaryPointingActiveDropdownBorderColor; + & 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) { - /* 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; - } + /* --------------------- + 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; + } - /* Vertical Active */ - .ui.secondary.vertical.pointing.menu .active.item { - border-color: @secondaryPointingActiveBorderColor; - } + /* Sub Menu */ + .ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; + } + & when (@variationMenuInverted) { + /* Inverted */ + .ui.secondary.inverted.menu { + background-color: transparent; + } + } } - & 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 (@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: @secondaryPointingBorderWidth solid transparent; + border-radius: 0; + align-self: flex-end; + margin: 0 0 -@secondaryPointingBorderWidth; + padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; + 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: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; + } + .ui.secondary.vertical.pointing.menu .item { + border-bottom: none; + border-right: @secondaryPointingBorderWidth solid transparent; + border-radius: 0 !important; + margin: @secondaryVerticalPointingItemMargin; + } + + /* 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; + /* -------------- + 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; } - .ui.vertical.text.menu:first-child { - margin-top: 0; + + /* Image */ + .ui.text.menu .item > img:not(.ui) { + margin: 0; } - .ui.vertical.text.menu:last-child { - margin-bottom: 0; + + /* --- fluid text --- */ + .ui.text.item.menu .item { + margin: 0; } - .ui.vertical.text.menu .item { - margin: @textVerticalMenuItemMargin; - padding-left: 0; - padding-right: 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; + } } - .ui.vertical.text.menu .item > i.icon { - float: @textVerticalMenuIconFloat; - margin: @iconMargin; + + /* --- hover --- */ + .ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; } - .ui.vertical.text.menu .header.item { - margin: @textVerticalMenuHeaderMargin; + + /* --- active --- */ + .ui.text.menu .active.item { + background-color: transparent; + border: none; + box-shadow: none; + font-weight: @textMenuActiveItemFontWeight; + color: @textMenuActiveItemColor; } - /* Vertical Sub Menu */ - .ui.vertical.text.menu .item:not(.dropdown) > .menu { - margin: @textMenuSubMenuMargin; + /* --- active hover --- */ + .ui.text.menu .active.item:hover { + background-color: transparent; } - .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { - margin: @textMenuSubMenuItemMargin; - padding: @textMenuSubMenuItemPadding; + & when (@variationMenuPointing) { + /* Disable Bariations */ + .ui.text.pointing.menu .active.item::after { + box-shadow: none; + } } - } - /*--- 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 (@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; + & when (@variationMenuFluid) { + /* Fluid */ + .ui.fluid.text.menu { + margin-left: 0; + margin-right: 0; + } } - } } & when (@variationMenuIcon) { - /*-------------- - Icon Only - ---------------*/ - - & when (@variationMenuVertical) { - /* 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 Only + --------------- */ - /* Icon Glyph */ - .ui.icon.menu i.icon::before { - opacity: 1; - } + & when (@variationMenuVertical) { + /* Vertical Menu */ + .ui.vertical.icon.menu { + display: inline-block; + width: auto; + } + } - /* (x) Item Icon */ - .ui.menu .icon.item > i.icon { - width: auto; - margin: 0 auto; - } + /* Item */ + .ui.icon.menu .item { + height: auto; + text-align: @iconMenuTextAlign; + color: @iconMenuItemColor; + } - /* Vertical Icon */ - & when (@variationMenuVertical) { - .ui.vertical.icon.menu .item > i.icon:not(.dropdown) { - display: block; - opacity: 1; - margin: 0 auto; - float: none; + /* Icon */ + .ui.icon.menu .item > i.icon:not(.dropdown) { + margin: 0; + opacity: 1; } - } - /* Inverted */ - & when (@variationMenuInverted) { - .ui.inverted.icon.menu .item { - color: @iconMenuInvertedItemColor; + /* Icon Glyph */ + .ui.icon.menu i.icon::before { + opacity: 1; + } + + /* (x) Item Icon */ + .ui.menu .icon.item > i.icon { + width: auto; + margin: 0 auto; + } + + /* Vertical Icon */ + & when (@variationMenuVertical) { + .ui.vertical.icon.menu .item > i.icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0 auto; + float: none; + } + } + + /* Inverted */ + & when (@variationMenuInverted) { + .ui.inverted.icon.menu .item { + color: @iconMenuInvertedItemColor; + } } - } } & when (@variationMenuLabeled) { - /*-------------- - Labeled Icon - ---------------*/ + /* -------------- + Labeled Icon + --------------- */ - /* Menu */ - .ui.labeled.icon.menu { - text-align: center; - } + /* Menu */ + .ui.labeled.icon.menu { + text-align: center; + } - /* Item */ - .ui.labeled.icon.menu .item { - min-width: @labeledIconMinWidth; - flex-direction: column; - } + /* 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; + /* Icon */ + .ui.labeled.icon.menu > .right.menu > .item > i.icon:not(.dropdown), + .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 - ---------------*/ + /* -------------- + Stackable + --------------- */ - @media only screen and (max-width: @largestMobileScreen) { - .ui.stackable.menu { - flex-direction: column; + @media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.menu { + flex-direction: column; - &.pointing .active.item::after when (@variationMenuPointing) { - display: none; - } + &.pointing .active.item::after when (@variationMenuPointing) { + display: none; + } + } + .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 +--------------- */ +& when not (@variationMenuColors = false) { + each(@variationMenuColors, { + @color: @value; + @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.stackable.menu .item { - width: 100% !important; + .ui.inverted.menu .item.menu { + background: @invertedSubMenuBackground; } - .ui.stackable.menu .item::before { - position: absolute; - content: ''; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: @dividerSize; - background: @verticalDividerBackground; + + /* --- Border --- */ + .ui.inverted.menu .item::before { + background: @invertedDividerBackground; } + & when (@variationMenuVertical) { + .ui.vertical.inverted.menu .item::before { + background: @invertedVerticalDividerBackground; + } - .ui.stackable.menu .left.menu, - .ui.stackable.menu .left.item { - margin-right: 0 !important; + /* Sub Menu */ + .ui.vertical.inverted.menu .menu .item, + .ui.vertical.inverted.menu .menu .item a:not(.ui) { + color: @invertedSubMenuColor; + } } - .ui.stackable.menu .right.menu, - .ui.stackable.menu .right.item { - margin-left: 0 !important; + + /* Header */ + .ui.inverted.menu .header.item { + margin: 0; + background: @invertedHeaderBackground; + box-shadow: none; } - .ui.stackable.menu .center.menu, - .ui.stackable.menu .center.item { - margin-left: 0 !important; - margin-right: 0 !important; + + /* Disabled */ + .ui.ui.inverted.menu .item.disabled { + color: @invertedDisabledTextColor; } - .ui.stackable.menu .right.menu, - .ui.stackable.menu .center.menu, - .ui.stackable.menu .left.menu { - flex-direction: column; + /* --- 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; + } } - } -} -/*-------------- - Colors ----------------*/ -& when not (@variationMenuColors = false) { - each(@variationMenuColors, { - @color: @value; - @c: @colors[@@color][color]; + /* --- Pressed --- */ + .ui.inverted.menu a.item:active, + .ui.inverted.menu .link.item:active { + background: @invertedMenuPressedBackground; + color: @invertedMenuPressedColor; + } - & 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; + /* --- 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; } - 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; - } - } + /* --- 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; - } + /* -------------- + 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; - } + .ui.right.floated.menu { + float: right; + margin: 0 0 0 @floatedDistance; + } } & when (@variationMenuCentered) { - .ui.center.aligned.menu, - .ui.centered.menu { - display: inline-flex; - transform: translateX(-50%); - margin-left:50%; - } + .ui.center.aligned.menu, + .ui.centered.menu { + display: inline-flex; + transform: translateX(-50%); + margin-left: 50%; + } } & when (@variationMenuInverted) { - /*-------------- - Inverted - ---------------*/ - & when not (@variationMenuColors = false) { - each(@variationMenuColors, { - @color: @value; - @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; - } + /* -------------- + Inverted + --------------- */ + & when not (@variationMenuColors = false) { + each(@variationMenuColors, { + @color: @value; + @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 (@variationMenuPointing) { - .ui.ui.ui.inverted.pointing.menu .active.item::after { - background-color: inherit; } - } } & when (@variationMenuFitted) { - /*-------------- - Fitted - ---------------*/ + /* -------------- + 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; - } + .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 - ---------------*/ + /* -------------- + Borderless + --------------- */ - .ui.borderless.menu .item::before, - .ui.borderless.menu .item .menu .item::before, - .ui.menu .borderless.item::before { - background: none !important; - } + .ui.borderless.menu .item::before, + .ui.borderless.menu .item .menu .item::before, + .ui.menu .borderless.item::before { + background: none !important; + } } & when (@variationMenuCompact) { - /*------------------- - Compact - --------------------*/ + /* ------------------- + Compact + -------------------- */ - .ui.compact.menu { - display: inline-flex; - margin: 0; - vertical-align: middle; - } - & when (@variationMenuVertical) { - .ui.compact.vertical.menu { - & when (@supportIE) { - /* 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.menu { + display: inline-flex; + margin: 0; + vertical-align: middle; + } + & when (@variationMenuVertical) { + .ui.compact.vertical.menu { + & when (@supportIE) { + /* IE hack to make dropdown icons appear inline */ + // stylelint-disable-next-line value-no-vendor-prefix + display: -ms-inline-flexbox !important; + } + + display: inline-block; + } } - .ui.compact.vertical.menu .item:last-child::before { - display: 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 - --------------------*/ + /* ------------------- + Fluid + -------------------- */ - .ui.menu.fluid, - .ui.vertical.menu.fluid { - width: 100% !important; - } + .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; + 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; + margin: 0 @attachedHorizontalOffset !important; } .ui.item.menu .item:last-child::before { - display: none; + display: none; } & when (@variationMenuEqualWidth) { - .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%; - } + .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.5%; + } + .ui.menu.nine.item .item { + width: 11.11%; + } + .ui.menu.ten.item .item { + width: 10%; + } + .ui.menu.eleven.item .item { + width: 9.09%; + } + .ui.menu.twelve.item .item { + width: 8.333%; + } } & when (@variationMenuFixed) { - /*-------------- - Fixed - ---------------*/ + /* -------------- + 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.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%; - } + .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; - } + /* 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; - } + /* ------------------- + 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; - } + /* 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; - } + /* 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; + /* Colors */ + .ui.pointing.menu .active.item:hover::after { + background-color: @arrowHoverColor; } - .ui.vertical.pointing.menu .active.item::after { - background-color: @arrowVerticalActiveColor; + .ui.pointing.menu .active.item::after { + background-color: @arrowActiveColor; } - .ui.vertical.pointing.menu .menu .active.item::after { - background-color: @arrowVerticalSubMenuColor; + .ui.pointing.menu .active.item:hover::after { + background-color: @arrowActiveHoverColor; } - & when (@variationMenuFluid) and (@variationGridStackable) { - @media only screen and (max-width: @largestMobileScreen) { - .ui.stackable.grid .ui.fluid.vertical.pointing.menu .active.item::after { - display: none; + & 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; + } + & when (@variationMenuFluid) and (@variationGridStackable) { + @media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.grid .ui.fluid.vertical.pointing.menu .active.item::after { + display: none; + } + } } - } } - } } & when not (@variationMenuColors = false) { - each(@variationMenuColors, { - @color: @value; - @c: @colors[@@color][color]; + each(@variationMenuColors, { + @color: @value; + @c: @colors[@@color][color]; - .ui.inverted.pointing.menu .@{color}.active.item::after { - background-color: @c; - } - }) + .ui.inverted.pointing.menu .@{color}.active.item::after { + background-color: @c; + } + }); } & when (@variationMenuAttached) { - /*-------------- - Attached - ---------------*/ + /* -------------- + 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; - } + /* 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; + } - /* 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):not(.text) { - border: @attachedBorder; - } - & when (@variationMenuInverted) { - .ui.attached.inverted.menu { - border: none; + /* Top */ + .ui[class*="top attached"].menu { + bottom: 0; + margin-bottom: 0; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0 0; } - & when (@variationMenuTabular) { - .ui[class*="top attached"].inverted.tabular.menu { - border-bottom: @invertedTabularBorder; - } + .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; } - } - & when (@variationMenuTabular) { - .ui.attached.tabular.menu { - margin-left: 0; - margin-right: 0; - width: 100%; + + /* 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):not(.text) { + border: @attachedBorder; + } + & when (@variationMenuInverted) { + .ui.attached.inverted.menu { + border: none; + } + & when (@variationMenuTabular) { + .ui[class*="top attached"].inverted.tabular.menu { + border-bottom: @invertedTabularBorder; + } + } + } + & when (@variationMenuTabular) { + .ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; + } } - } } -/*-------------- +/* -------------- Sizes ----------------*/ +--------------- */ .ui.menu { - font-size: @medium; + font-size: @medium; } & when (@variationMenuVertical) { - .ui.vertical.menu { - width: @mediumWidth; - } + .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; - } - & when (@variationMenuVertical) { - .ui.@{value}.vertical.menu:not(.icon) { - width: @@w; - } - } - }) + each(@variationMenuSizes, { + @w: @{value}Width; + @s: @@value; + .ui.@{value}.menu, + .ui.@{value}.menu .dropdown, + .ui.@{value}.menu .dropdown .menu > .item { + font-size: @s; + } + & when (@variationMenuVertical) { + .ui.@{value}.vertical.menu:not(.icon) { + width: @@w; + } + } + }); } -/*------------------- +/* ------------------- Inverted dropdowns ---------------------*/ +-------------------- */ .ui.menu .ui.inverted.inverted.dropdown.item .menu { - background: @invertedDropdownBackground; - box-shadow: @invertedDropdownMenuBoxShadow; + background: @invertedDropdownBackground; + box-shadow: @invertedDropdownMenuBoxShadow; } .ui.menu .ui.inverted.dropdown .menu > .item { - color: @invertedDropdownItemColor !important; + color: @invertedDropdownItemColor !important; } .ui.menu .ui.inverted.dropdown .menu > .active.item { - background: @invertedDropdownActiveItemBackground !important; - color: @invertedDropdownActiveItemColor !important; + background: @invertedDropdownActiveItemBackground !important; + color: @invertedDropdownActiveItemColor !important; } .ui.menu .ui.inverted.dropdown .menu > .item:hover { - background: @invertedDropdownHoveredItemBackground !important; - color: @invertedDropdownHoveredItemColor !important; + background: @invertedDropdownHoveredItemBackground !important; + color: @invertedDropdownHoveredItemColor !important; } .ui.menu .ui.inverted.dropdown .menu > .selected.item { - background: @invertedDropdownSelectedItemBackground !important; - color: @invertedDropdownSelectedItemColor !important; + background: @invertedDropdownSelectedItemBackground !important; + color: @invertedDropdownSelectedItemColor !important; } & when (@variationMenuVertical) { - /* Vertical */ - .ui.vertical.menu .inverted.dropdown.item .menu { - box-shadow: @invertedDropdownMenuBoxShadow; - } + /* Vertical */ + .ui.vertical.menu .inverted.dropdown.item .menu { + box-shadow: @invertedDropdownMenuBoxShadow; + } } .loadUIOverrides(); diff --git a/definitions/collections/message.less b/definitions/collections/message.less index f73b10f..e53dcc7 100644 --- a/definitions/collections/message.less +++ b/definitions/collections/message.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Message - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,130 +12,129 @@ Theme *******************************/ -@type : 'collection'; -@element : 'message'; +@type: "collection"; +@element: "message"; -@import (multiple) '../../theme.config'; +@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; + 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; + margin-top: 0; } .ui.message:last-child { - margin-bottom: 0; + margin-bottom: 0; } - -/*-------------- +/* -------------- Content ----------------*/ +--------------- */ /* Header */ .ui.message .header { - display: @headerDisplay; - font-family: @headerFont; - font-weight: @headerFontWeight; - margin: @headerMargin; + display: @headerDisplay; + font-family: @headerFont; + font-weight: @headerFontWeight; + margin: @headerMargin; } /* Default font size */ .ui.message .header:not(.ui) { - font-size: @headerFontSize; + font-size: @headerFontSize; } /* Paragraph */ .ui.message p { - opacity: @messageTextOpacity; - margin: @messageParagraphMargin 0; + opacity: @messageTextOpacity; + margin: @messageParagraphMargin 0; } .ui.message p:first-child { - margin-top: 0; + margin-top: 0; } .ui.message p:last-child { - margin-bottom: 0; + margin-bottom: 0; } .ui.message .header + p { - margin-top: @headerParagraphDistance; + margin-top: @headerParagraphDistance; } /* List */ .ui.message .list:not(.ui) { - text-align: left; - padding: 0; - opacity: @listOpacity; - list-style-position: @listStylePosition; - margin: @listMargin 0 0; + 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; + margin-top: 0; } .ui.message .list:not(.ui):last-child { - margin-bottom: 0; + margin-bottom: 0; } .ui.message .list:not(.ui) li { - position: relative; - list-style-type: none; - margin: 0 0 @listItemMargin @listItemIndent; - padding: 0; + 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; + position: absolute; + content: "ā€¢"; + left: -1em; + height: 100%; + vertical-align: baseline; } .ui.message .list:not(.ui) li:last-child { - margin-bottom: 0; + margin-bottom: 0; } & when (@variationMessageIcon) { - /* Icon */ - .ui.icon.message > .icons, - .ui.icon.message > i.icon { - margin-right: @iconDistance; - &:last-child { - margin: 0 0 0 @iconDistance; + /* Icon */ + .ui.icon.message > .icons, + .ui.icon.message > i.icon { + margin-right: @iconDistance; + &:last-child { + margin: 0 0 0 @iconDistance; + } } - } } /* Close Icon */ .ui.message > .close.icon { - cursor: pointer; - position: absolute; - margin: 0; - top: @closeTopDistance; - right: @closeRightDistance; - opacity: @closeOpacity; - transition: @closeTransition; + cursor: pointer; + position: absolute; + margin: 0; + top: @closeTopDistance; + right: @closeRightDistance; + opacity: @closeOpacity; + transition: @closeTransition; } .ui.message > .close.icon:hover { - opacity: 1; + opacity: 1; } /* First / Last Element */ .ui.message > :first-child { - margin-top: 0; + margin-top: 0; } .ui.message > :last-child { - margin-bottom: 0; + margin-bottom: 0; } /******************************* @@ -143,307 +142,304 @@ *******************************/ .ui.dropdown .menu > .message { - margin: 0 -@borderWidth; + margin: 0 -@borderWidth; } /******************************* States *******************************/ -/*-------------- +/* -------------- Visible ----------------*/ +--------------- */ .ui.visible.visible.visible.visible.message { - display: block; + display: block; } .ui.icon.visible.visible.visible.visible.message { - display: flex; + display: flex; } -/*-------------- +/* -------------- Hidden ----------------*/ +--------------- */ .ui.hidden.hidden.hidden.hidden.message { - display: none; + display: none; } - /******************************* Variations *******************************/ & when (@variationMessageCentered) { - .ui.centered.message, - .ui.center.aligned.message { - text-align: center; - justify-content: center; - & > .content { - flex: 0 0 auto; + .ui.centered.message, + .ui.center.aligned.message { + text-align: center; + justify-content: center; + & > .content { + flex: 0 0 auto; + } } - } } & when (@variationMessageRightAligned) { - .ui.right.aligned.message { - text-align: right; - } + .ui.right.aligned.message { + text-align: right; + } } & when (@variationMessageCompact) { - /*-------------- - Compact - ---------------*/ + /* -------------- + Compact + --------------- */ - .ui.compact.message { - display: inline-block; - } - .ui.compact.icon.message { - display: inline-flex; - width: auto; - } + .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; + /* -------------- + 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 > .icons, - .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; - } + /* -------------- + Icon + --------------- */ + + .ui.icon.message { + display: flex; + width: 100%; + align-items: center; + } + .ui.icon.message > .icons, + .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 > .icons + .content, - .ui.icon.message > i.icon:not(.close) + .content { - padding-left: @iconContentDistance; - } - .ui.icon.message > i.circular { - width: 1em; - } + .ui.icon.message > .icons + .content, + .ui.icon.message > i.icon:not(.close) + .content { + padding-left: @iconContentDistance; + } + .ui.icon.message > i.circular { + width: 1em; + } } & when (@variationMessageFloating) { - /*-------------- - Floating - ---------------*/ + /* -------------- + Floating + --------------- */ - .ui.floating.message { - box-shadow: @floatingBoxShadow; - } + .ui.floating.message { + box-shadow: @floatingBoxShadow; + } } - -/*-------------- +/* -------------- Colors ----------------*/ +--------------- */ -/*-------------- +/* -------------- Types ----------------*/ +--------------- */ & when not (@variationMessageConsequences = false) { - - @consequences: { - @positive: { - background : @positiveBackgroundColor; - header : @positiveHeaderColor; - boxShadow : @positiveBoxShadow; - boxFloatShadow : @positiveBoxFloatingShadow; - text : @positiveTextColor; - invertedText : @positiveBorderColor; - }; - @negative: { - background : @negativeBackgroundColor; - header : @negativeHeaderColor; - boxShadow : @negativeBoxShadow; - boxFloatShadow : @negativeBoxFloatingShadow; - text : @negativeTextColor; - invertedText : @negativeBorderColor; - }; - @info: { - background : @infoBackgroundColor; - header : @infoHeaderColor; - boxShadow : @infoBoxShadow; - boxFloatShadow : @infoBoxFloatingShadow; - text : @infoTextColor; - invertedText : @formInfoLabelBackground; - }; - @warning: { - background : @warningBackgroundColor; - header : @warningHeaderColor; - boxShadow : @warningBoxShadow; - boxFloatShadow : @warningBoxFloatingShadow; - text : @warningTextColor; - invertedText : @formWarningLabelBackground; - }; - @error: { - background : @errorBackgroundColor; - header : @errorHeaderColor; - boxShadow : @errorBoxShadow; - boxFloatShadow : @errorBoxFloatingShadow; - text : @errorTextColor; - invertedText : @formErrorLabelBackground; + @consequences: { + @positive: { + background: @positiveBackgroundColor; + header: @positiveHeaderColor; + boxShadow: @positiveBoxShadow; + boxFloatShadow: @positiveBoxFloatingShadow; + text: @positiveTextColor; + invertedText: @positiveBorderColor; + }; + @negative: { + background: @negativeBackgroundColor; + header: @negativeHeaderColor; + boxShadow: @negativeBoxShadow; + boxFloatShadow: @negativeBoxFloatingShadow; + text: @negativeTextColor; + invertedText: @negativeBorderColor; + }; + @info: { + background: @infoBackgroundColor; + header: @infoHeaderColor; + boxShadow: @infoBoxShadow; + boxFloatShadow: @infoBoxFloatingShadow; + text: @infoTextColor; + invertedText: @formInfoLabelBackground; + }; + @warning: { + background: @warningBackgroundColor; + header: @warningHeaderColor; + boxShadow: @warningBoxShadow; + boxFloatShadow: @warningBoxFloatingShadow; + text: @warningTextColor; + invertedText: @formWarningLabelBackground; + }; + @error: { + background: @errorBackgroundColor; + header: @errorHeaderColor; + boxShadow: @errorBoxShadow; + boxFloatShadow: @errorBoxFloatingShadow; + text: @errorTextColor; + invertedText: @formErrorLabelBackground; + }; + @success: { + background: @successBackgroundColor; + header: @successHeaderColor; + boxShadow: @successBoxShadow; + boxFloatShadow: @successBoxFloatingShadow; + text: @successTextColor; + invertedText: @formSuccessLabelBackground; + }; }; - @success: { - background : @successBackgroundColor; - header : @successHeaderColor; - boxShadow : @successBoxShadow; - boxFloatShadow : @successBoxFloatingShadow; - text : @successTextColor; - invertedText : @formSuccessLabelBackground; - }; - } - - /* Colors */ - - each(@variationMessageConsequences, { - @color: @value; - @bg: @consequences[@@color][background]; - @hd: @consequences[@@color][header]; - @bs: @consequences[@@color][boxShadow]; - @bfs: @consequences[@@color][boxFloatShadow]; - @t: @consequences[@@color][text]; - @it: @consequences[@@color][invertedText]; - - .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; - } - & when (@variationMessageInverted) { - .ui.inverted.@{color}.message, - .ui.inverted.@{color}.message .header { - color: @it; - } - } - }) + /* Colors */ + + each(@variationMessageConsequences, { + @color: @value; + @bg: @consequences[@@color][background]; + @hd: @consequences[@@color][header]; + @bs: @consequences[@@color][boxShadow]; + @bfs: @consequences[@@color][boxFloatShadow]; + @t: @consequences[@@color][text]; + @it: @consequences[@@color][invertedText]; + + .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; + } + & when (@variationMessageInverted) { + .ui.inverted.@{color}.message, + .ui.inverted.@{color}.message .header { + color: @it; + } + } + }); } & when not (@variationMessageColors = false) { - each(@variationMessageColors, { - @color: @value; - @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; - } - } + each(@variationMessageColors, { + @color: @value; + @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, + .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; - } - } - }) + .ui.@{color}.message .header { + & when not (@isVeryDark) { + color: @hd; + } + & when (@isVeryDark) { + color: @invertedTextColor; + } + } + }); } & when (@variationMessageInverted) { - .ui.inverted.message { - background-color: @black; - color: @invertedTextColor; - } + .ui.inverted.message { + background-color: @black; + color: @invertedTextColor; + } } -/*-------------- +/* -------------- Sizes ----------------*/ +--------------- */ .ui.message { - font-size: @relativeMedium; + font-size: @relativeMedium; } & when not (@variationMessageSizes = false) { - each(@variationMessageSizes, { - @s: @{value}MessageSize; - .ui.@{value}.message { - font-size: @@s; - } - }) + each(@variationMessageSizes, { + @s: @{value}MessageSize; + .ui.@{value}.message { + font-size: @@s; + } + }); } .loadUIOverrides(); diff --git a/definitions/collections/table.less b/definitions/collections/table.less index 5b0915d..56d9cc2 100644 --- a/definitions/collections/table.less +++ b/definitions/collections/table.less @@ -1,22 +1,21 @@ /*! * # Fomantic-UI - Table - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'collection'; -@element : 'table'; +@type: "collection"; +@element: "table"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Table @@ -24,29 +23,29 @@ /* 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; + 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; + margin-top: 0; } .ui.table:last-child { - margin-bottom: 0; + margin-bottom: 0; } .ui.table > thead, .ui.table > tbody { - text-align: inherit; - vertical-align: inherit; + text-align: inherit; + vertical-align: inherit; } /******************************* @@ -56,527 +55,527 @@ /* Table Content */ .ui.table th, .ui.table td { - transition: @transition; + transition: @transition; } /* Rowspan helper class */ .ui.table th.rowspanned, .ui.table td.rowspanned { - display:none; + display: none; } /* Headers */ .ui.table > thead { - box-shadow: @headerBoxShadow; + 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; + 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; + border-left: none; } .ui.table > thead > tr:first-child > th:first-child { - border-radius: @borderRadius 0 0 0; + border-radius: @borderRadius 0 0 0; } .ui.table > thead > tr:first-child > th:last-child { - border-radius: 0 @borderRadius 0 0; + border-radius: 0 @borderRadius 0 0; } .ui.table > thead > tr:first-child > th:only-child { - border-radius: @borderRadius @borderRadius 0 0; + border-radius: @borderRadius @borderRadius 0 0; } /* Footer */ .ui.table > tfoot { - box-shadow: @footerBoxShadow; + 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; + 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; + 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; + 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; + 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; + border-radius: 0 0 @borderRadius @borderRadius; } /* Table Row */ .ui.table > tr > td, .ui.table > tbody > tr > td { - border-top: @rowBorder; + border-top: @rowBorder; } .ui.table > tr:first-child > td, .ui.table > tbody > tr:first-child > td { - border-top: none; + border-top: none; } /* Repeated tbody */ .ui.table > tbody + tbody tr:first-child > td { - border-top: @rowBorder; + border-top: @rowBorder; } /* Table Cells */ .ui.table > tbody > tr > td, .ui.table > tr > td { - padding: @cellVerticalPadding @cellHorizontalPadding; - text-align: @cellTextAlign; + padding: @cellVerticalPadding @cellHorizontalPadding; + text-align: @cellTextAlign; } /* Icons */ .ui.table > i.icon { - vertical-align: @iconVerticalAlign; + vertical-align: @iconVerticalAlign; } .ui.table > i.icon:only-child { - margin: 0; + margin: 0; } /* Table Segment */ .ui.table.segment { - padding: 0; + padding: 0; } .ui.table.segment::after { - display: none; + display: none; } .ui.table.segment.stacked::after { - display: block; + 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) and not (@variationTableColors = false) { - each(@variationTableColors, { - @color: @value; - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - .ui.ui.ui.ui.table:not(.unstackable) tr[class*="@{color} marked"] { - &.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[class*="@{color} marked"] { - &.left { - box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; - } - &.right { - box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; - } - } - } - }) - } - & when (@variationTableScrolling) { - & when (@variationTableScrollingShort) { - .ui.scrolling.table.short > tbody { - max-height: @scrollingMobileMaxBodyHeight * 0.75; - } - } - & when (@variationTableScrollingVeryShort) { - .ui.scrolling.table[class*="very short"] > tbody { - max-height: @scrollingMobileMaxBodyHeight * 0.5; - } - } - .ui.scrolling.table > tbody { - max-height: @scrollingMobileMaxBodyHeight; - } - & when (@variationTableScrollingLong) { - .ui.scrolling.table.long > tbody { - max-height: @scrollingMobileMaxBodyHeight * 2; - } - } - & when (@variationTableScrollingVeryLong) { - .ui.scrolling.table[class*="very long"] > tbody { - max-height: @scrollingMobileMaxBodyHeight * 3; - } - } - } - & when (@variationTableOverflowing) { - & when (@variationTableOverflowingShort) { - .ui.overflowing.table.short { - max-height: @overflowingMobileMaxHeight * 0.75; - } - } - & when (@variationTableOverflowingVeryShort) { - .ui.overflowing.table[class*="very short"] { - max-height: @overflowingMobileMaxHeight * 0.5; - } +@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; } - .ui.overflowing.table { - max-height: @overflowingMobileMaxHeight; + & when (@variationTableMarked) and not (@variationTableColors = false) { + each(@variationTableColors, { + @color: @value; + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + .ui.ui.ui.ui.table:not(.unstackable) tr[class*="@{color} marked"] { + &.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[class*="@{color} marked"] { + &.left { + box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; + } + &.right { + box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; + } + } + } + }); } - & when (@variationTableOverflowingLong) { - .ui.overflowing.table.long { - max-height: @overflowingMobileMaxHeight * 2; - } + & when (@variationTableScrolling) { + & when (@variationTableScrollingShort) { + .ui.scrolling.table.short > tbody { + max-height: @scrollingMobileMaxBodyHeight * 0.75; + } + } + & when (@variationTableScrollingVeryShort) { + .ui.scrolling.table[class*="very short"] > tbody { + max-height: @scrollingMobileMaxBodyHeight * 0.5; + } + } + .ui.scrolling.table > tbody { + max-height: @scrollingMobileMaxBodyHeight; + } + & when (@variationTableScrollingLong) { + .ui.scrolling.table.long > tbody { + max-height: @scrollingMobileMaxBodyHeight * 2; + } + } + & when (@variationTableScrollingVeryLong) { + .ui.scrolling.table[class*="very long"] > tbody { + max-height: @scrollingMobileMaxBodyHeight * 3; + } + } } - & when (@variationTableOverflowingVeryLong) { - .ui.overflowing.table[class*="very long"] { - max-height: @overflowingMobileMaxHeight * 3; - } + & when (@variationTableOverflowing) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingMobileMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingMobileMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingMobileMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingMobileMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingMobileMaxHeight * 3; + } + } } - } } & when (@variationTableScrolling) { - /*-------------- - Scrolling - ---------------*/ - @media only screen and (min-width: @tabletBreakpoint) { - & when (@variationTableScrollingShort) { - .ui.scrolling.table.short > tbody { - max-height: @scrollingTabletMaxBodyHeight * 0.75; - } - } - & when (@variationTableScrollingVeryShort) { - .ui.scrolling.table[class*="very short"] > tbody { - max-height: @scrollingTabletMaxBodyHeight * 0.5; - } + /* -------------- + Scrolling + --------------- */ + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationTableScrollingShort) { + .ui.scrolling.table.short > tbody { + max-height: @scrollingTabletMaxBodyHeight * 0.75; + } + } + & when (@variationTableScrollingVeryShort) { + .ui.scrolling.table[class*="very short"] > tbody { + max-height: @scrollingTabletMaxBodyHeight * 0.5; + } + } + .ui.scrolling.table > tbody { + max-height: @scrollingTabletMaxBodyHeight; + } + & when (@variationTableScrollingLong) { + .ui.scrolling.table.long > tbody { + max-height: @scrollingTabletMaxBodyHeight * 2; + } + } + & when (@variationTableScrollingVeryLong) { + .ui.scrolling.table[class*="very long"] > tbody { + max-height: @scrollingTabletMaxBodyHeight * 3; + } + } } - .ui.scrolling.table > tbody { - max-height: @scrollingTabletMaxBodyHeight; - } - & when (@variationTableScrollingLong) { - .ui.scrolling.table.long > tbody { - max-height: @scrollingTabletMaxBodyHeight * 2; - } - } - & when (@variationTableScrollingVeryLong) { - .ui.scrolling.table[class*="very long"] > tbody { - max-height: @scrollingTabletMaxBodyHeight * 3; - } - } - } - @media only screen and (min-width: @computerBreakpoint) { - & when (@variationTableScrollingShort) { - .ui.scrolling.table.short > tbody { - max-height: @scrollingComputerMaxBodyHeight * 0.75; - } - } - & when (@variationTableScrollingVeryShort) { - .ui.scrolling.table[class*="very short"] > tbody { - max-height: @scrollingComputerMaxBodyHeight * 0.5; - } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationTableScrollingShort) { + .ui.scrolling.table.short > tbody { + max-height: @scrollingComputerMaxBodyHeight * 0.75; + } + } + & when (@variationTableScrollingVeryShort) { + .ui.scrolling.table[class*="very short"] > tbody { + max-height: @scrollingComputerMaxBodyHeight * 0.5; + } + } + .ui.scrolling.table > tbody { + max-height: @scrollingComputerMaxBodyHeight; + } + & when (@variationTableScrollingLong) { + .ui.scrolling.table.long > tbody { + max-height: @scrollingComputerMaxBodyHeight * 2; + } + } + & when (@variationTableScrollingVeryLong) { + .ui.scrolling.table[class*="very long"] > tbody { + max-height: @scrollingComputerMaxBodyHeight * 3; + } + } } - .ui.scrolling.table > tbody { - max-height: @scrollingComputerMaxBodyHeight; - } - & when (@variationTableScrollingLong) { - .ui.scrolling.table.long > tbody { - max-height: @scrollingComputerMaxBodyHeight * 2; - } - } - & when (@variationTableScrollingVeryLong) { - .ui.scrolling.table[class*="very long"] > tbody { - max-height: @scrollingComputerMaxBodyHeight * 3; - } - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - & when (@variationTableScrollingShort) { - .ui.scrolling.table.short > tbody { - max-height: @scrollingWidescreenMaxBodyHeight * 0.75; - } - } - & when (@variationTableScrollingVeryShort) { - .ui.scrolling.table[class*="very short"] > tbody { - max-height: @scrollingWidescreenMaxBodyHeight * 0.5; - } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationTableScrollingShort) { + .ui.scrolling.table.short > tbody { + max-height: @scrollingWidescreenMaxBodyHeight * 0.75; + } + } + & when (@variationTableScrollingVeryShort) { + .ui.scrolling.table[class*="very short"] > tbody { + max-height: @scrollingWidescreenMaxBodyHeight * 0.5; + } + } + .ui.scrolling.table > tbody { + max-height: @scrollingWidescreenMaxBodyHeight; + } + & when (@variationTableScrollingLong) { + .ui.scrolling.table.long > tbody { + max-height: @scrollingWidescreenMaxBodyHeight * 2; + } + } + & when (@variationTableScrollingVeryLong) { + .ui.scrolling.table[class*="very long"] > tbody { + max-height: @scrollingWidescreenMaxBodyHeight * 3; + } + } } + + .ui.scrolling.table > thead, + .ui.scrolling.table > tfoot, .ui.scrolling.table > tbody { - max-height: @scrollingWidescreenMaxBodyHeight; - } - & when (@variationTableScrollingLong) { - .ui.scrolling.table.long > tbody { - max-height: @scrollingWidescreenMaxBodyHeight * 2; - } - } - & when (@variationTableScrollingVeryLong) { - .ui.scrolling.table[class*="very long"] > tbody { - max-height: @scrollingWidescreenMaxBodyHeight * 3; - } + display: block; + overflow-y: scroll; + overscroll-behavior: @overscrollBehavior; + scrollbar-width: thin; /* Firefox */ + & > tr { + display: table; + table-layout: fixed; + width: 100%; + } } - } - .ui.scrolling.table > thead, - .ui.scrolling.table > tfoot, - .ui.scrolling.table > tbody { - display: block; - overflow-y: scroll; - scrollbar-width: thin; /* Firefox */ - & > tr { - display: table; - table-layout: fixed; - width: 100%; + /* Camouflage scrollbars, we need them only to gain the same width as tbody */ + .ui.scrolling.table > thead { + background: @headerBackground; + color: @headerBackground; + border-radius: @borderRadius @borderRadius 0 0; } - } - - /* Camouflage scrollbars, we need them only to gain the same width as tbody */ - .ui.scrolling.table > thead { - background: @headerBackground; - color: @headerBackground; - border-radius: @borderRadius @borderRadius 0 0; - } - .ui.scrolling.table > tfoot { - background: @footerBackground; - color: @footerBackground; - border-radius: 0 0 @borderRadius @borderRadius; - } - & when (@variationTableInverted) { - .ui.inverted.scrolling.table > thead { - background: @invertedHeaderBackground; - color: @invertedHeaderBackground; - } - .ui.inverted.scrolling.table > tfoot { - background: @invertedFooterBackground; - color: @invertedFooterBackground; - } - } - .ui.scrolling.table > thead::-webkit-scrollbar-track, - .ui.scrolling.table > tfoot::-webkit-scrollbar-track { - background: inherit; - border-radius: @borderRadius; - } - - /* Firefox & IE */ - .ui.scrolling.table > thead, - .ui.scrolling.table > tfoot { - scrollbar-color: currentColor currentColor; - & when (@supportIE) { - scrollbar-face-color: currentColor; - scrollbar-shadow-color: currentColor; - scrollbar-track-color: currentColor; - scrollbar-arrow-color: currentColor; - } - } - & when (@supportIE) { - /* IE scrollbar color needs hex values */ - @media all and (-ms-high-contrast: none) { - .ui.scrolling.table > thead { - color: @headerBackgroundHex; - } - .ui.scrolling.table > tfoot { - color: @footerBackgroundHex; - } - & when (@variationTableInverted) { + .ui.scrolling.table > tfoot { + background: @footerBackground; + color: @footerBackground; + border-radius: 0 0 @borderRadius @borderRadius; + } + & when (@variationTableInverted) { .ui.inverted.scrolling.table > thead { - color: @invertedHeaderBackgroundHex; + background: @invertedHeaderBackground; + color: @invertedHeaderBackground; } .ui.inverted.scrolling.table > tfoot { - color: @invertedFooterBackgroundHex; + background: @invertedFooterBackground; + color: @invertedFooterBackground; } - } } - } - & when (@variationTableInverted) { - .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track { - background: @trackInvertedBackground; - } - .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb { - background: @thumbInvertedBackground; - } - .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive { - background: @thumbInvertedInactiveBackground; + .ui.scrolling.table > thead::-webkit-scrollbar-track, + .ui.scrolling.table > tfoot::-webkit-scrollbar-track { + background: inherit; + border-radius: @borderRadius; + } + + /* Firefox & IE */ + .ui.scrolling.table > thead, + .ui.scrolling.table > tfoot { + scrollbar-color: currentColor currentColor; + & when (@supportIE) { + scrollbar-face-color: currentColor; + scrollbar-shadow-color: currentColor; + scrollbar-track-color: currentColor; + scrollbar-arrow-color: currentColor; + } } - .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover { - background: @thumbInvertedHoverBackground; + & when (@supportIE) { + /* IE scrollbar color needs hex values */ + @media all and (-ms-high-contrast: none) { + .ui.scrolling.table > thead { + color: @headerBackgroundHex; + } + .ui.scrolling.table > tfoot { + color: @footerBackgroundHex; + } + & when (@variationTableInverted) { + .ui.inverted.scrolling.table > thead { + color: @invertedHeaderBackgroundHex; + } + .ui.inverted.scrolling.table > tfoot { + color: @invertedFooterBackgroundHex; + } + } + } } - .ui.inverted.scrolling.table > tbody { - & when (@supportIE) { - /* IE11 */ - scrollbar-face-color: @thumbInvertedBackgroundHex; - scrollbar-shadow-color: @thumbInvertedBackgroundHex; - scrollbar-track-color: @trackInvertedBackgroundHex; - scrollbar-arrow-color: @trackInvertedBackgroundHex; - } - /* firefox : first color thumb, second track */ - scrollbar-color: @thumbInvertedBackground @trackInvertedBackground; + & when (@variationTableInverted) { + .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track { + background: @trackInvertedBackground; + } + .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb { + background: @thumbInvertedBackground; + } + .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInvertedInactiveBackground; + } + .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover { + background: @thumbInvertedHoverBackground; + } + .ui.inverted.scrolling.table > tbody { + & when (@supportIE) { + /* IE11 */ + scrollbar-face-color: @thumbInvertedBackgroundHex; + scrollbar-shadow-color: @thumbInvertedBackgroundHex; + scrollbar-track-color: @trackInvertedBackgroundHex; + scrollbar-arrow-color: @trackInvertedBackgroundHex; + } + + /* firefox: first color thumb, second track */ + scrollbar-color: @thumbInvertedBackground @trackInvertedBackground; + } } - } - } & when (@variationTableOverflowing) { - /*-------------- - Overflowing - ---------------*/ - .ui.overflowing.table { - display: block; - overflow: auto; - } - @media only screen and (min-width: @tabletBreakpoint) { - & when (@variationTableOverflowingShort) { - .ui.overflowing.table.short { - max-height: @overflowingTabletMaxHeight * 0.75; - } - } - & when (@variationTableOverflowingVeryShort) { - .ui.overflowing.table[class*="very short"] { - max-height: @overflowingTabletMaxHeight * 0.5; - } - } - .ui.overflowing.table { - max-height: @overflowingTabletMaxHeight; - } - & when (@variationTableOverflowingLong) { - .ui.overflowing.table.long { - max-height: @overflowingTabletMaxHeight * 2; - } - } - & when (@variationTableOverflowingVeryLong) { - .ui.overflowing.table[class*="very long"] { - max-height: @overflowingTabletMaxHeight * 3; - } - } - } - @media only screen and (min-width: @computerBreakpoint) { - & when (@variationTableOverflowingShort) { - .ui.overflowing.table.short { - max-height: @overflowingComputerMaxHeight * 0.75; - } - } - & when (@variationTableOverflowingVeryShort) { - .ui.overflowing.table[class*="very short"] { - max-height: @overflowingComputerMaxHeight * 0.5; - } - } - .ui.overflowing.table { - max-height: @overflowingComputerMaxHeight; - } - & when (@variationTableOverflowingLong) { - .ui.overflowing.table.long { - max-height: @overflowingComputerMaxHeight * 2; - } - } - & when (@variationTableOverflowingVeryLong) { - .ui.overflowing.table[class*="very long"]{ - max-height: @overflowingComputerMaxHeight * 3; - } - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - & when (@variationTableOverflowingShort) { - .ui.overflowing.table.short { - max-height: @overflowingWidescreenMaxHeight * 0.75; - } - } - & when (@variationTableOverflowingVeryShort) { - .ui.overflowing.table[class*="very short"] { - max-height: @overflowingWidescreenMaxHeight * 0.5; - } - } + /* -------------- + Overflowing + --------------- */ .ui.overflowing.table { - max-height: @overflowingWidescreenMaxHeight; + display: block; + overflow: auto; + overscroll-behavior: @overscrollBehavior; + } + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingTabletMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingTabletMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingTabletMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingTabletMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingTabletMaxHeight * 3; + } + } } - & when (@variationTableOverflowingLong) { - .ui.overflowing.table.long { - max-height: @overflowingWidescreenMaxHeight * 2; - } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingComputerMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingComputerMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingComputerMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingComputerMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingComputerMaxHeight * 3; + } + } } - & when (@variationTableOverflowingVeryLong) { - .ui.overflowing.table[class*="very long"] { - max-height: @overflowingWidescreenMaxHeight * 3; - } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationTableOverflowingShort) { + .ui.overflowing.table.short { + max-height: @overflowingWidescreenMaxHeight * 0.75; + } + } + & when (@variationTableOverflowingVeryShort) { + .ui.overflowing.table[class*="very short"] { + max-height: @overflowingWidescreenMaxHeight * 0.5; + } + } + .ui.overflowing.table { + max-height: @overflowingWidescreenMaxHeight; + } + & when (@variationTableOverflowingLong) { + .ui.overflowing.table.long { + max-height: @overflowingWidescreenMaxHeight * 2; + } + } + & when (@variationTableOverflowingVeryLong) { + .ui.overflowing.table[class*="very long"] { + max-height: @overflowingWidescreenMaxHeight * 3; + } + } } - } } - /******************************* Coupling *******************************/ @@ -584,108 +583,112 @@ /* UI Image */ .ui.table .collapsing .image, .ui.table .collapsing .image img { - max-width: none; + 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; - } - } + .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 > thead:not(.full-width) > tr > th:first-child:not(:empty) { - pointer-events: auto; - } - - .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; - } + /* -------------- + 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; + // https://github.com/fomantic/Fomantic-UI/pull/884 + // stylelint-disable-next-line property-no-vendor-prefix + -moz-transform: scale(1); + } + + .ui.definition.table > thead:not(.full-width) > tr > th:first-child:not(:empty) { + pointer-events: auto; + } + + .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; + // https://github.com/fomantic/Fomantic-UI/pull/884 + // stylelint-disable-next-line property-no-vendor-prefix + -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; + } } /******************************* @@ -693,1244 +696,1237 @@ *******************************/ & when (@variationTablePositive) { - /*-------------- - Positive - ---------------*/ - - .ui.ui.ui.ui.table tr.positive, - .ui.ui.table td.positive { - box-shadow: @positiveBoxShadow; - background: @positiveBackgroundColor; - color: @positiveColor; - } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table tr.positive, - .ui.ui.inverted.table td.positive { - background: @invertedPositiveBackgroundColor; - color: @invertedPositiveColor; - } - } + /* -------------- + Positive + --------------- */ + + .ui.ui.ui.ui.table tr.positive, + .ui.ui.table td.positive { + box-shadow: @positiveBoxShadow; + background: @positiveBackgroundColor; + color: @positiveColor; + } + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table tr.positive, + .ui.ui.inverted.table td.positive { + background: @invertedPositiveBackgroundColor; + color: @invertedPositiveColor; + } + } } & when (@variationTableNegative) { - /*-------------- - Negative - ---------------*/ - - .ui.ui.ui.ui.table tr.negative, - .ui.ui.table td.negative { - box-shadow: @negativeBoxShadow; - background: @negativeBackgroundColor; - color: @negativeColor; - } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table tr.negative, - .ui.ui.inverted.table td.negative { - background: @invertedNegativeBackgroundColor; - color: @invertedNegativeColor; - } - } + /* -------------- + Negative + --------------- */ + + .ui.ui.ui.ui.table tr.negative, + .ui.ui.table td.negative { + box-shadow: @negativeBoxShadow; + background: @negativeBackgroundColor; + color: @negativeColor; + } + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table tr.negative, + .ui.ui.inverted.table td.negative { + background: @invertedNegativeBackgroundColor; + color: @invertedNegativeColor; + } + } } & when (@variationTableError) { - /*-------------- - Error - ---------------*/ - - .ui.ui.ui.ui.table tr.error, - .ui.ui.table td.error { - box-shadow: @errorBoxShadow; - background: @errorBackgroundColor; - color: @errorColor; - } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table tr.error, - .ui.ui.inverted.table td.error { - background: @invertedErrorBackgroundColor; - color: @invertedErrorColor; - } - } + /* -------------- + Error + --------------- */ + + .ui.ui.ui.ui.table tr.error, + .ui.ui.table td.error { + box-shadow: @errorBoxShadow; + background: @errorBackgroundColor; + color: @errorColor; + } + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table tr.error, + .ui.ui.inverted.table td.error { + background: @invertedErrorBackgroundColor; + color: @invertedErrorColor; + } + } } & when (@variationTableWarning) { - /*-------------- - Warning - ---------------*/ - - .ui.ui.ui.ui.table tr.warning, - .ui.ui.table td.warning { - box-shadow: @warningBoxShadow; - background: @warningBackgroundColor; - color: @warningColor; - } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table tr.warning, - .ui.ui.inverted.table td.warning { - background: @invertedWarningBackgroundColor; - color: @invertedWarningColor; - } - } + /* -------------- + Warning + --------------- */ + + .ui.ui.ui.ui.table tr.warning, + .ui.ui.table td.warning { + box-shadow: @warningBoxShadow; + background: @warningBackgroundColor; + color: @warningColor; + } + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table tr.warning, + .ui.ui.inverted.table td.warning { + background: @invertedWarningBackgroundColor; + color: @invertedWarningColor; + } + } } & when (@variationTableActive) { - /*-------------- - Active - ---------------*/ - - .ui.ui.ui.ui.table tr.active, - .ui.ui.table td.active { - box-shadow: @activeBoxShadow; - background: @activeBackgroundColor; - color: @activeColor; - } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table tr.active, - .ui.ui.inverted.table td.active { - background: @invertedActiveBackgroundColor; - color: @invertedActiveColor; - } - } -} + /* -------------- + Active + --------------- */ + .ui.ui.ui.ui.table tr.active, + .ui.ui.table td.active { + box-shadow: @activeBoxShadow; + background: @activeBackgroundColor; + color: @activeColor; + } + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table tr.active, + .ui.ui.inverted.table td.active { + background: @invertedActiveBackgroundColor; + color: @invertedActiveColor; + } + } +} & when (@variationTableDisabled) { - /*-------------- - Disabled - ---------------*/ - - .ui.ui.ui.table tr.disabled td, - .ui.ui.ui.table tr td.disabled, - .ui.table tr.disabled:hover, - .ui.table tr:hover td.disabled { - pointer-events: none; - color: @disabledTextColor; - } + /* -------------- + Disabled + --------------- */ + + .ui.ui.ui.table tr.disabled td, + .ui.ui.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; + /* -------------- + 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 (@variationTableDefinition) { - /* Definition Table */ - .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { - box-shadow: none !important; - } + & when (@variationTableMarked) and not (@variationTableColors = false) { + each(@variationTableColors, { + @color: @value; + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="@{color} marked"] { + &.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[class*="@{color} marked"] { + &.left { + box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; + } + &.right { + box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; + } + } + } + }); } - } - & when (@variationTableMarked) and not (@variationTableColors = false) { - each(@variationTableColors, { - @color: @value; - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="@{color} marked"] { - &.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[class*="@{color} marked"] { - &.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; - } + /* -------------- + 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 - ---------------*/ + /* -------------- + Collapsing + --------------- */ - .ui.table th.collapsing, - .ui.table td.collapsing { - width: 1px; - white-space: nowrap; - } + .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; - } -} + /* -------------- + Fixed + --------------- */ + .ui.fixed.table { + table-layout: fixed; + } -& 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; - } - .ui.table:not(.compact) tbody tr td.selectable > a:not(.ui) { - 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; - } - } + .ui.fixed.table th, + .ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; + } } +& when (@variationTableSelectable) { + /* -------------- + Selectable + --------------- */ -& 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; - } + .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; + } + } - /* 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; - } + /* Selectable Cell Link */ + .ui.table tbody tr td.selectable { + padding: 0; + } + .ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + } + .ui.table:not(.compact) tbody tr td.selectable > a:not(.ui) { + 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; + } + } +} - /* 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 (@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; - } - } + /* -------------- + 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; + white-space: nowrap; } -/*------------------- +/* ------------------- Colors ---------------------*/ +-------------------- */ & when not (@variationTableColors = false) { - each(@variationTableColors, { - @color: @value; - @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: @c; - color: @white; - } - } - /* Same color for background and color to camouflage the scrollbar */ - & when (@variationTableScrolling) { - .ui.scrolling.table > thead.@{color}, - .ui.scrolling.table > tfoot.@{color} { - & when (@isDark) { - background: @l; - color: @l; - } - & when not (@isDark) { - background: @b; - color: @b; - } - & > tr > th, - > tr > td { - background: inherit; - & when (@isVeryDark) { - color: @white; - } - & when not (@isVeryDark) { - color: @t; - } - } - } - & when (@variationTableInverted) { - .ui.inverted.scrolling.table > thead.@{color}, - .ui.inverted.scrolling.table > tfoot.@{color} { - background: @c; - color: @c; - & > tr > th, - > tr > td { + each(@variationTableColors, { + @color: @value; + @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: @c; + color: @white; + } + } + /* Same color for background and color to camouflage the scrollbar */ + & when (@variationTableScrolling) { + .ui.scrolling.table > thead.@{color}, + .ui.scrolling.table > tfoot.@{color} { + & when (@isDark) { + background: @l; + color: @l; + } + & when not (@isDark) { + background: @b; + color: @b; + } + & > tr > th, + > tr > td { + background: inherit; + & when (@isVeryDark) { + color: @white; + } + & when not (@isVeryDark) { + color: @t; + } + } + } + & when (@variationTableInverted) { + .ui.inverted.scrolling.table > thead.@{color}, + .ui.inverted.scrolling.table > tfoot.@{color} { + background: @c; + color: @c; + & > tr > th, + > tr > td { + background: inherit; + color: @white; + } + } + } + } + .ui.ui.ui.ui.table tr[class*="@{color} colored"], + .ui.ui.table th[class*="@{color} colored"], + .ui.ui.table td[class*="@{color} colored"], + .ui.ui.ui.ui.table tr.@{color}:not(.marked), + .ui.ui.table th.@{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; + } + } + .ui.table > thead > tr[class*="@{color} colored"] > th, + .ui.table > tfoot > tr[class*="@{color} colored"] > th, + .ui.table > tfoot > tr[class*="@{color} colored"] > td, + .ui.table > thead > tr.@{color}:not(.marked) > th, + .ui.table > tfoot > tr.@{color}:not(.marked) > th, + .ui.table > tfoot > tr.@{color}:not(.marked) > td { background: inherit; - color: @white; - } - } - } - } - .ui.ui.ui.ui.table tr[class*="@{color} colored"], - .ui.ui.table th[class*="@{color} colored"], - .ui.ui.table td[class*="@{color} colored"], - .ui.ui.ui.ui.table tr.@{color}:not(.marked), - .ui.ui.table th.@{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; - } - } - .ui.table > thead > tr[class*="@{color} colored"] > th, - .ui.table > tfoot > tr[class*="@{color} colored"] > th, - .ui.table > tfoot > tr[class*="@{color} colored"] > td, - .ui.table > thead > tr.@{color}:not(.marked) > th, - .ui.table > tfoot > tr.@{color}:not(.marked) > th, - .ui.table > tfoot > tr.@{color}:not(.marked) > td { - background: inherit; - & when (@isVeryDark) { - color: @white; - } - & when not (@isVeryDark) { - color: @t; - } - } + & when (@isVeryDark) { + color: @white; + } + & when not (@isVeryDark) { + color: @t; + } + } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table tr[class*="@{color} colored"], - .ui.ui.inverted.table th[class*="@{color} colored"], - .ui.ui.inverted.table td[class*="@{color} colored"], - .ui.ui.ui.ui.inverted.table tr.@{color}:not(.marked), - .ui.ui.inverted.table th.@{color}:not(.marked), - .ui.ui.inverted.table td.@{color}:not(.marked) { - background: @c; - color: @white; - } - .ui.inverted.table > thead > tr[class*="@{color} colored"] > th, - .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > th, - .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > td, - .ui.inverted.table > thead > tr.@{color}:not(.marked) > th, - .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > th, - .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > td { - background: inherit; - color: @white; - } - } - & when (@variationTableSelectable) { - .ui.ui.selectable.table tr[class*="@{color} colored"]:hover, - .ui.table tr td.selectable[class*="@{color} colored"]:hover, - .ui.selectable.table tr:hover td[class*="@{color} colored"], - .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 (@variationTableInverted) { - .ui.ui.inverted.selectable.table tr[class*="@{color} colored"]:hover, - .ui.inverted.table tr td.selectable[class*="@{color} colored"]:hover, - .ui.inverted.selectable.table tr:hover td[class*="@{color} colored"], - .ui.ui.inverted.selectable.table tr.@{color}:not(.marked):hover, - .ui.inverted.table tr td.selectable.@{color}:not(.marked):hover, - .ui.inverted.selectable.table tr:hover td.@{color}:not(.marked) { - & when (@isDark) { - background: @bh; - } - & when not (@isDark) { - background: @lh; - } - & when (@isVeryDark) { - color: @ht; - } - & when not (@isVeryDark) { - color: @white; - } - } - } - } - & when (@variationTableMarked) { - .ui.table td[class*="@{color} marked"], - .ui.table tr[class*="@{color} marked"] { - &.left { - box-shadow: @coloredBorderSize 0 0 0 @c inset; - } - &.right { - box-shadow: -@coloredBorderSize 0 0 0 @c inset; - } - } - & when (@variationTableInverted) { - .ui.inverted.table td[class*="@{color} marked"], - .ui.inverted.table tr[class*="@{color} marked"] { - &.left { - box-shadow: @coloredBorderSize 0 0 0 @l inset; - } - &.right { - box-shadow: -@coloredBorderSize 0 0 0 @l inset; - } - } - } - } - - }) + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table tr[class*="@{color} colored"], + .ui.ui.inverted.table th[class*="@{color} colored"], + .ui.ui.inverted.table td[class*="@{color} colored"], + .ui.ui.ui.ui.inverted.table tr.@{color}:not(.marked), + .ui.ui.inverted.table th.@{color}:not(.marked), + .ui.ui.inverted.table td.@{color}:not(.marked) { + background: @c; + color: @white; + } + .ui.inverted.table > thead > tr[class*="@{color} colored"] > th, + .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > th, + .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > td, + .ui.inverted.table > thead > tr.@{color}:not(.marked) > th, + .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > th, + .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > td { + background: inherit; + color: @white; + } + } + & when (@variationTableSelectable) { + .ui.ui.selectable.table tr[class*="@{color} colored"]:hover, + .ui.table tr td.selectable[class*="@{color} colored"]:hover, + .ui.selectable.table tr:hover td[class*="@{color} colored"], + .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 (@variationTableInverted) { + .ui.ui.inverted.selectable.table tr[class*="@{color} colored"]:hover, + .ui.inverted.table tr td.selectable[class*="@{color} colored"]:hover, + .ui.inverted.selectable.table tr:hover td[class*="@{color} colored"], + .ui.ui.inverted.selectable.table tr.@{color}:not(.marked):hover, + .ui.inverted.table tr td.selectable.@{color}:not(.marked):hover, + .ui.inverted.selectable.table tr:hover td.@{color}:not(.marked) { + & when (@isDark) { + background: @bh; + } + & when not (@isDark) { + background: @lh; + } + & when (@isVeryDark) { + color: @ht; + } + & when not (@isVeryDark) { + color: @white; + } + } + } + } + & when (@variationTableMarked) { + .ui.table td[class*="@{color} marked"], + .ui.table tr[class*="@{color} marked"] { + &.left { + box-shadow: @coloredBorderSize 0 0 0 @c inset; + } + &.right { + box-shadow: -@coloredBorderSize 0 0 0 @c inset; + } + } + & when (@variationTableInverted) { + .ui.inverted.table td[class*="@{color} marked"], + .ui.inverted.table tr[class*="@{color} marked"] { + &.left { + box-shadow: @coloredBorderSize 0 0 0 @l inset; + } + &.right { + box-shadow: -@coloredBorderSize 0 0 0 @l inset; + } + } + } + } + + }); } & when (@variationTableEqualWidth) { - /*-------------- - 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 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; + } } & when (@variationTableWide) { - /* 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; - } + /* 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 - ---------------*/ + /* -------------- + Sortable + --------------- */ + + .ui.sortable.table > thead > tr > th { + cursor: pointer; + white-space: nowrap; + color: @sortableColor; + } + & when (@variationTableCelled) { + .ui.celled.sortable.table > thead > tr > th:not(:first-child) { + border-left: @sortableBorder; + } + } + .ui.sortable.table thead th.sorted, + .ui.sortable.table thead th.sorted:hover { + user-select: none; + } - .ui.sortable.table > thead > tr > th { - cursor: pointer; - white-space: nowrap; - color: @sortableColor; - } - & when (@variationTableCelled) { - .ui.celled.sortable.table > thead > tr > th:not(:first-child) { - border-left: @sortableBorder; - } - } - .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; - } - - & when (@variationTableDisabled) { - /* 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; - } - } + .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; + } + + & when (@variationTableDisabled) { + /* 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 > tr > th { - background-color: @invertedHeaderBackground; - border-color: @invertedHeaderBorderColor; - color: @invertedHeaderColor; - } - .ui.ui.inverted.table > tfoot > tr > th, - .ui.ui.inverted.table > tfoot > tr > td { - background-color: @invertedFooterBackground; - border-color: @invertedFooterBorderColor; - color: @invertedFooterColor; - } - .ui.inverted.table > tbody > tr > td, - .ui.inverted.table > tfoot > tr > td, - .ui.inverted.table > tr > td { - border-color: @invertedCellBorderColor; - } - & when (@variationTableDisabled) { - .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.ui.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; - } - } + /* -------------- + 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 > tr > th { + background-color: @invertedHeaderBackground; + border-color: @invertedHeaderBorderColor; + color: @invertedHeaderColor; + } + .ui.ui.inverted.table > tfoot > tr > th, + .ui.ui.inverted.table > tfoot > tr > td { + background-color: @invertedFooterBackground; + border-color: @invertedFooterBorderColor; + color: @invertedFooterColor; + } + .ui.inverted.table > tbody > tr > td, + .ui.inverted.table > tfoot > tr > td, + .ui.inverted.table > tr > td { + border-color: @invertedCellBorderColor; + } + & when (@variationTableDisabled) { + .ui.ui.ui.inverted.table tr.disabled td, + .ui.ui.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.ui.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 - ---------------*/ + /* -------------- + Collapsing + --------------- */ - .ui.collapsing.table { - width: auto; - } + .ui.collapsing.table { + width: auto; + } } -& when (@variationTableBasic) or (@variationTableVeryBasic){ - /*-------------- - 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; - } - } - & when (@variationTableVeryBasic) { - /* 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 (@variationTableBasic) or (@variationTableVeryBasic) { + /* -------------- + 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; + } + } + & when (@variationTableVeryBasic) { + /* 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; - } + /* -------------- + 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) or (@variationTableVeryPadded) { - /*-------------- - 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; - } - - & when (@variationTableVeryPadded) { - /* 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; - } - } + /* -------------- + 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; + } + + & when (@variationTableVeryPadded) { + /* 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) or (@variationTableVeryCompact) { - /*-------------- - 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; - } - - & when (@variationTableVeryCompact) { - /* 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; - } - } + /* -------------- + 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; + } + + & when (@variationTableVeryCompact) { + /* 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; + } + } } & when (@variationTableStuck) { - /*-------------- - Stuck - ---------------*/ + /* -------------- + Stuck + --------------- */ - .ui.stuck.table:not(.inverted) { - background: @stuckBackground; - & > thead > tr { - background: @stuckHeaderBackground; + .ui.stuck.table:not(.inverted) { + background: @stuckBackground; + & > thead > tr { + background: @stuckHeaderBackground; + } + & > tbody > tr { + background: @stuckBackground; + } + & > tfoot > tr { + background: @stuckFooterBackground; + } + &.basic when (@variationTableBasic) { + & > thead > tr, + > tfoot > tr { + background: @stuckBackground; + } + } } - & > tbody > tr { - background: @stuckBackground; + .ui.inverted.stuck.table when (@variationTableInverted) { + & > thead > tr { + background: @invertedStuckHeaderBackground; + } + & > tbody > tr { + background: @invertedStuckBackground; + } + & > tfoot > tr { + background: @invertedStuckFooterBackground; + } + &.basic when (@variationTableBasic) { + & > thead > tr, + > tfoot > tr { + background: @invertedStuckBackground; + } + } } - & > tfoot > tr { - background: @stuckFooterBackground; + & when (@variationTableStuckHead) or (@variationTableStuckFoot) { + .ui.head.stuck.table > thead, + .ui.foot.stuck.table > tfoot { + position: sticky; + z-index: @stuckZIndex; + } } - &.basic when (@variationTableBasic) { - & > thead > tr, - > tfoot > tr { - background: @stuckBackground; - } - } - } - .ui.inverted.stuck.table when (@variationTableInverted) { - & > thead > tr { - background: @invertedStuckHeaderBackground; - } - & > tbody > tr { - background: @invertedStuckBackground; - } - & > tfoot > tr { - background: @invertedStuckFooterBackground; - } - &.basic when (@variationTableBasic){ - & > thead > tr, - > tfoot > tr { - background: @invertedStuckBackground; - } - } - } - & when (@variationTableStuckHead) or (@variationTableStuckFoot) { - .ui.head.stuck.table > thead, - .ui.foot.stuck.table > tfoot { - position: -webkit-sticky; - position: sticky; - z-index: @stuckZIndex; - } - } - .ui.head.stuck.table when (@variationTableStuckHead) { - border-top: 0; - & > thead { - top: 0; - bottom: auto; - & > tr:first-child > th { - border-top: @cellBorder; - } - } - &.inverted > thead > tr:first-child > th when (@variationTableInverted) { - border-top: @invertedCellBorder; - } - } - .ui.foot.stuck.table when (@variationTableStuckFoot) { - border-bottom: 0; - & > tfoot { - top: auto; - bottom: 0; - & > tr:last-child > td, - > tr:last-child > th { - border-bottom: @cellBorder; - } + .ui.head.stuck.table when (@variationTableStuckHead) { + border-top: 0; + & > thead { + top: 0; + bottom: auto; + & > tr:first-child > th { + border-top: @cellBorder; + } + } + &.inverted > thead > tr:first-child > th when (@variationTableInverted) { + border-top: @invertedCellBorder; + } } - & when (@variationTableInverted) { - &.inverted > tfoot > tr:first-child > td, - &.inverted > tfoot > tr:first-child > th { - border-top: @invertedCellBorder; - } - } - } - - .ui.first.stuck.table when (@variationTableStuckFirst) { - border-left: 0; - & th:first-child, - td:first-child { - position: -webkit-sticky; - position: sticky; - left: 0; - border-left: @cellBorder; - background: inherit; + .ui.foot.stuck.table when (@variationTableStuckFoot) { + border-bottom: 0; + & > tfoot { + top: auto; + bottom: 0; + & > tr:last-child > td, + > tr:last-child > th { + border-bottom: @cellBorder; + } + } + & when (@variationTableInverted) { + &.inverted > tfoot > tr:first-child > td, + &.inverted > tfoot > tr:first-child > th { + border-top: @invertedCellBorder; + } + } } - & when (@variationTableInverted) { - &.inverted th:first-child, - &.inverted td:first-child { - border-left: @invertedCellBorder; - } - } - } - - .ui.last.stuck.table when (@variationTableStuckLast) { - border-right: 0; - & th:last-child, - td:last-child { - position: -webkit-sticky; - position: sticky; - right: 0; - border-right: @cellBorder; - background: inherit; + + .ui.first.stuck.table when (@variationTableStuckFirst) { + border-left: 0; + & th:first-child, + td:first-child { + position: sticky; + left: 0; + border-left: @cellBorder; + background: inherit; + } + & when (@variationTableInverted) { + &.inverted th:first-child, + &.inverted td:first-child { + border-left: @invertedCellBorder; + } + } } - & when (@variationTableInverted) { - &.inverted th:last-child, - &.inverted td:last-child { - border-right: @invertedCellBorder; - } - } - } - & when (@variationTableCelled) { - & when (@variationTableStuckFirst) { - .ui.celled.first.stuck.table th:first-child, - .ui.celled.first.stuck.table td:first-child { - border-right: @cellBorder; - } - } - & when (@variationTableStuckLast) { - .ui.celled.last.stuck.table th:last-child, - .ui.celled.last.stuck.table td:last-child { - border-left: @cellBorder; - } + + .ui.last.stuck.table when (@variationTableStuckLast) { + border-right: 0; + & th:last-child, + td:last-child { + position: sticky; + right: 0; + border-right: @cellBorder; + background: inherit; + } + & when (@variationTableInverted) { + &.inverted th:last-child, + &.inverted td:last-child { + border-right: @invertedCellBorder; + } + } } - & when (@variationTableInverted) { - & when (@variationTableStuckFirst) { - .ui.inverted.celled.first.stuck.table th:first-child, - .ui.inverted.celled.first.stuck.table td:first-child { - border-right: @invertedCellBorder; + & when (@variationTableCelled) { + & when (@variationTableStuckFirst) { + .ui.celled.first.stuck.table th:first-child, + .ui.celled.first.stuck.table td:first-child { + border-right: @cellBorder; + } + } + & when (@variationTableStuckLast) { + .ui.celled.last.stuck.table th:last-child, + .ui.celled.last.stuck.table td:last-child { + border-left: @cellBorder; + } } - } - & when (@variationTableStuckLast) { - .ui.inverted.celled.last.stuck.table th:last-child, - .ui.inverted.celled.last.stuck.table td:last-child { - border-left: @invertedCellBorder; + & when (@variationTableInverted) { + & when (@variationTableStuckFirst) { + .ui.inverted.celled.first.stuck.table th:first-child, + .ui.inverted.celled.first.stuck.table td:first-child { + border-right: @invertedCellBorder; + } + } + & when (@variationTableStuckLast) { + .ui.inverted.celled.last.stuck.table th:last-child, + .ui.inverted.celled.last.stuck.table td:last-child { + border-left: @invertedCellBorder; + } + } } - } } - } } -/*-------------- +/* -------------- Sizes ----------------*/ +--------------- */ /* Standard */ .ui.table { - font-size: @medium; + font-size: @medium; } & when not (@variationTableSizes = false) { - each(@variationTableSizes, { - @s: @@value; - .ui.@{value}.table { - font-size: @s; - } - }) + each(@variationTableSizes, { + @s: @@value; + .ui.@{value}.table { + font-size: @s; + } + }); } - .loadUIOverrides(); diff --git a/definitions/elements/button.less b/definitions/elements/button.less index 69761ae..40bfa6c 100644 --- a/definitions/elements/button.less +++ b/definitions/elements/button.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Button - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,635 +12,625 @@ Theme *******************************/ -@type : 'element'; -@element : 'button'; +@type: "element"; +@element: "button"; -@import (multiple) '../../theme.config'; +@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; + 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; + background-color: @hoverBackgroundColor; + background-image: @hoverBackgroundImage; + box-shadow: @hoverBoxShadow; + color: @hoverColor; } .ui.button:hover .icon { - opacity: @iconHoverOpacity; + opacity: @iconHoverOpacity; } -/*-------------- +/* -------------- Focus ----------------*/ +--------------- */ .ui.button:focus { - background-color: @focusBackgroundColor; - color: @focusColor; - background-image: @focusBackgroundImage; - box-shadow: @focusBoxShadow; + background-color: @focusBackgroundColor; + color: @focusColor; + background-image: @focusBackgroundImage; + box-shadow: @focusBoxShadow; } .ui.button:focus .icon { - opacity: @iconFocusOpacity; + opacity: @iconFocusOpacity; } -/*-------------- +/* -------------- Down ----------------*/ +--------------- */ .ui.button:active, .ui.active.button:active { - background-color: @downBackgroundColor; - background-image: @downBackgroundImage; - color: @downColor; - box-shadow: @downBoxShadow; + 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; + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; + box-shadow: @activeBoxShadow; + color: @activeColor; } .ui.active.button:hover { - background-color: @activeHoverBackgroundColor; - background-image: @activeHoverBackgroundImage; - color: @activeHoverColor; + background-color: @activeHoverBackgroundColor; + background-image: @activeHoverBackgroundImage; + color: @activeHoverColor; } .ui.active.button:active { - background-color: @activeBackgroundColor; - background-image: @activeBackgroundImage; + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; } & when (@variationButtonLoading) { - /*-------------- - 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; - } - .ui.ui.ui.loading.button .label { - background-color: transparent; - border-color: transparent; - color: 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; - } - } + /* -------------- + 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; + } + .ui.ui.ui.loading.button .label { + background-color: transparent; + border-color: transparent; + color: 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; - } - } +& 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; - } - - & when (@variationButtonVertical) { - /* 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; - } - } - & when (@variationButtonAnimatedFade) { - /* 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 (@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; + } + + & when (@variationButtonVertical) { + /* 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; + } + } + & when (@variationButtonAnimatedFade) { + /* 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 - --------------------*/ + /* ------------------- + Inverted + -------------------- */ - .ui.inverted.button { - box-shadow: 0 0 0 @invertedBorderSize @white inset; - background: transparent none; - color: @white; - text-shadow: none !important; - } + .ui.inverted.button { + box-shadow: 0 0 0 @invertedBorderSize @white inset; + background: transparent none; + color: @white; + text-shadow: none !important; + } - & when (@variationButtonGroups) { - /* Group */ - .ui.inverted.buttons .button { - margin: @invertedGroupButtonOffset; + & when (@variationButtonGroups) { + /* Group */ + .ui.inverted.buttons .button { + margin: @invertedGroupButtonOffset; + } + .ui.inverted.buttons .button:first-child { + margin-left: 0; + } + & when (@variationButtonVertical) { + .ui.inverted.vertical.buttons .button { + margin: @invertedVerticalGroupButtonOffset; + } + .ui.inverted.vertical.buttons .button:first-child { + margin-top: 0; + } + } } - .ui.inverted.buttons .button:first-child { - margin-left: 0; + + /* States */ + + /* Hover */ + .ui.inverted.button:hover { + background: @white; + box-shadow: 0 0 0 @invertedBorderSize @white inset; + color: @hoverColor; } - & when (@variationButtonVertical) { - .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: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; - } + /* 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 - --------------------*/ +& 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; - } + .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; - } + /* ------------------- + 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; + 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; + margin: @iconMargin; + vertical-align: @iconVerticalAlign; } .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { - vertical-align: @iconVerticalAlign; + vertical-align: @iconVerticalAlign; } .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { - margin: @rightIconMargin; + margin: @rightIconMargin; } /******************************* @@ -648,1403 +638,1371 @@ *******************************/ & when (@variationButtonStackable) { - /*-------------- - Stackable - ---------------*/ - - /* Tablet Or Below */ - @media only screen and (max-width: @largestMobileScreen) { - - .ui.stackable.buttons { - flex-direction: column; - width: 100%; - & .button:first-child { - border-bottom-left-radius: 0; - border-top-right-radius: @borderRadius; - } - & .button:last-child { - border-bottom-left-radius: @borderRadius; - border-top-right-radius: 0; - } - & .button:only-child { - border-radius: @borderRadius; - } + /* -------------- + Stackable + --------------- */ + + /* Tablet Or Below */ + @media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.buttons { + flex-direction: column; + width: 100%; + & .button:first-child { + border-bottom-left-radius: 0; + border-top-right-radius: @borderRadius; + } + & .button:last-child { + border-bottom-left-radius: @borderRadius; + border-top-right-radius: 0; + } + & .button:only-child { + border-radius: @borderRadius; + } + } } - - } } & 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; - } + /* ------------------- + 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; - } + /* ------------------- + 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; + } } -/*------------------- + +/* ------------------- Sizes ---------------------*/ +-------------------- */ .ui.buttons .button, .ui.buttons .or, .ui.button { - font-size: @medium; + 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; - } - }) + 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; + } + }); } & when (@variationButtonIcon) { - /*-------------- - Icon Only - ---------------*/ - - .ui.icon.buttons .button, - .ui.icon.button:not(.animated):not(.compact):not(.labeled) { - 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; - } + /* -------------- + Icon Only + --------------- */ + + .ui.icon.buttons .button, + .ui.icon.button:not(.animated):not(.compact):not(.labeled) { + 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; + } } & when (@variationButtonAnimated) { - .ui.animated.button > .content > .icon { - 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; - } - & when (@variationButtonGroups) { - .ui.basic.buttons { - box-shadow: @basicGroupBoxShadow; - border: @basicGroupBorder; - border-radius: @borderRadius; - border-right: none; - } - - .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; - } - & when (@variationButtonGroups) { - - .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; - } + /* ------------------- + 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; + } + & when (@variationButtonGroups) { + .ui.basic.buttons { + box-shadow: @basicGroupBoxShadow; + border: @basicGroupBorder; + border-radius: @borderRadius; + border-right: none; + } - .ui.basic.inverted.buttons .active.button, - .ui.basic.inverted.active.button { - background-color: @transparentWhite; - color: @invertedTextColor; - text-shadow: @invertedTextShadow; - box-shadow: @basicInvertedActiveBoxShadow; + .ui.basic.buttons .button { + border-radius: 0; + } } - .ui.basic.inverted.buttons .active.button:hover, - .ui.basic.inverted.active.button:hover { - background-color: @strongTransparentWhite; - box-shadow: @basicInvertedHoverBoxShadow; + .ui.basic.buttons .button:hover, + .ui.basic.button:hover { + background: @basicHoverBackground; + color: @basicHoverTextColor; + box-shadow: @basicHoverBoxShadow; } - } - & when (@variationButtonGroups) { - /* Basic Group */ - .ui.basic.buttons:not(.inverted) .button:not(.basic) { - border-right: @basicGroupBorder; - box-shadow: none; + .ui.basic.buttons .button:focus, + .ui.basic.button:focus { + background: @basicFocusBackground; + color: @basicFocusTextColor; + box-shadow: @basicFocusBoxShadow; } - & when (@variationButtonVertical) { - .ui.basic.vertical.buttons .button { - border-left: none; - border-left-width: 0; - border-top: @basicGroupBorder; - } + .ui.basic.buttons .button:active, + .ui.basic.button:active { + background: @basicDownBackground; + color: @basicDownTextColor; + box-shadow: @basicDownBoxShadow; + } - .ui.basic.vertical.buttons:not(.spaced) .button:first-child { - border-top: none; - } + .ui.basic.buttons .active.button, + .ui.basic.active.button { + background: @basicActiveBackground; + box-shadow: @basicActiveBoxShadow; + color: @basicActiveTextColor; } - } -} -& when (@variationButtonTertiary) { - /*------------------- - Tertiary - --------------------*/ + .ui.basic.buttons .active.button:hover, + .ui.basic.active.button:hover { + background-color: @transparentBlack; + } + & when (@variationButtonGroups) { + .ui.basic.buttons .button:hover { + box-shadow: @basicHoverBoxShadow; + } - /* Overline Mixin */ - .ui.tertiary.button { - transition: color @defaultDuration @defaultEasing !important; - border-radius: 0; - margin: (@verticalPadding - @tertiaryVerticalPadding) - (@horizontalMargin) - (@verticalPadding + @shadowOffset + @verticalMargin - @tertiaryVerticalPadding) - 0 !important; - padding: @tertiaryVerticalPadding @tertiaryHorizontalPadding !important; + .ui.basic.buttons .button:active { + box-shadow: @basicDownBoxShadow; + } - & when (@tertiaryWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor; + .ui.basic.buttons .active.button { + box-shadow: @basicActiveBoxShadow; + } } + & when (@variationButtonInverted) { + /* Standard Basic Inverted */ - & when (@tertiaryWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor; - } + .ui.basic.inverted.buttons .button, + .ui.basic.inverted.button { + background-color: transparent; + color: @offWhite; + box-shadow: @basicInvertedBoxShadow; + } - & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ - box-shadow: none; - } + .ui.basic.inverted.buttons .button:hover, + .ui.basic.inverted.button:hover { + color: @white; + box-shadow: @basicInvertedHoverBoxShadow; + } - color: @tertiaryTextColor; - background: @tertiaryBackgroundColor; - } + .ui.basic.inverted.buttons .button:focus, + .ui.basic.inverted.button:focus { + color: @white; + box-shadow: @basicInvertedFocusBoxShadow; + } - .ui.tertiary.button:hover { + .ui.basic.inverted.buttons .button:active, + .ui.basic.inverted.button:active { + background-color: @transparentWhite; + color: @white; + box-shadow: @basicInvertedDownBoxShadow; + } - & when (@tertiaryHoverWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor; - } + .ui.basic.inverted.buttons .active.button, + .ui.basic.inverted.active.button { + background-color: @transparentWhite; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + box-shadow: @basicInvertedActiveBoxShadow; + } - & when (@tertiaryHoverWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor; + .ui.basic.inverted.buttons .active.button:hover, + .ui.basic.inverted.active.button:hover { + background-color: @strongTransparentWhite; + box-shadow: @basicInvertedHoverBoxShadow; + } } - & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { - box-shadow: none; + & when (@variationButtonGroups) { + /* Basic Group */ + .ui.basic.buttons:not(.inverted) .button:not(.basic) { + border-right: @basicGroupBorder; + box-shadow: none; + } + + & when (@variationButtonVertical) { + .ui.basic.vertical.buttons .button { + border-left: none; + border-left-width: 0; + border-top: @basicGroupBorder; + } + + .ui.basic.vertical.buttons:not(.spaced) .button:first-child { + border-top: none; + } + } } +} + +& when (@variationButtonTertiary) { + /* ------------------- + Tertiary + -------------------- */ + + /* Overline Mixin */ + .ui.tertiary.button { + transition: color @defaultDuration @defaultEasing !important; + border-radius: 0; + // prettier-ignore + margin: + (@verticalPadding - @tertiaryVerticalPadding) + (@horizontalMargin) + (@verticalPadding + @shadowOffset + @verticalMargin - @tertiaryVerticalPadding) + 0 !important; + padding: @tertiaryVerticalPadding @tertiaryHorizontalPadding !important; - color: @tertiaryHoverColor; - background: @tertiaryHoverBackgroundColor; - } + & 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; + } - .ui.tertiary.button:focus { - & when (@tertiaryFocusWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor; + color: @tertiaryTextColor; + background: @tertiaryBackgroundColor; } - & when (@tertiaryFocusWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor; + .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; } - & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false){ - box-shadow: none; + .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; } - 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; + } +} - .ui.tertiary.button:active { - & when (@tertiaryActiveWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor; - border-radius: @borderRadius @borderRadius 0 0; +& 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; + 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; } - & when (@tertiaryActiveWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor; - border-radius: 0 0 @borderRadius @borderRadius; + .ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; } - & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false){ - box-shadow: none; - border-radius: 0; + .ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0; + border-top-left-radius: @borderRadius; } - color: @tertiaryActiveColor; - background: @tertiaryActiveBackgroundColor; - } -} + .ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0; + border-bottom-left-radius: @borderRadius; + } -& 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; - } + /* 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; - } + /* -------------- + 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; - } + /* -------------- + 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; + /* ------------------- + Or Buttons + -------------------- */ - content: @orText; - top: 50%; - left: 50%; - background-color: @orBackgroundColor; - text-shadow: @orTextShadow; + .ui.buttons .or { + position: relative; + width: @orGap; + height: @orHeight; + z-index: @orZIndex; + } - margin-top: @orVerticalOffset; - margin-left: @orHorizontalOffset; + .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; + } - width: @orCircleSize; - height: @orCircleSize; + .ui.buttons .or[data-text]::before { + content: attr(data-text); + } - line-height: @orLineHeight; - color: @orTextColor; + /* Fluid Or */ + .ui.fluid.buttons .or { + width: 0 !important; + } - font-style: @orTextStyle; - font-weight: @orTextWeight; + .ui.fluid.buttons .or::after { + display: none; + } +} - box-shadow: @orBoxShadow; - } +& when (@variationButtonAttached) { + /* ------------------- + Attached + -------------------- */ - .ui.buttons .or[data-text]::before { - content: attr(data-text); - } + /* Singular */ + .ui.attached.button { + position: relative; + display: block; + margin: 0; + border-radius: 0; + box-shadow: @attachedBoxShadow; + } - /* Fluid Or */ - .ui.fluid.buttons .or { - width: 0 !important; - } + /* Top / Bottom */ + .ui.attached.top.button { + border-radius: @borderRadius @borderRadius 0 0; + } - .ui.fluid.buttons .or::after { - display: none; - } + .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; + } -& 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; + .ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: @attachedHorizontalPadding; + border-radius: 0 @borderRadius @borderRadius 0; + } - padding-right: @attachedHorizontalPadding; - border-radius: @borderRadius 0 0 @borderRadius; - } + /* Plural */ + .ui.attached.buttons { + position: relative; + display: flex; + border-radius: 0; + width: auto !important; + z-index: @attachedZIndex; + margin-left: @attachedOffset; + margin-right: @attachedOffset; + } - .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: @topAttachedOffset; - 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: @bottomAttachedOffset; - 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; - } -} + .ui.attached.buttons .button { + margin: 0; + } -& when (@variationButtonFluid) { - /*------------------- - Fluid - --------------------*/ - - .ui.fluid.buttons, - .ui.fluid.button { - width: 100%; - } - - .ui.fluid.button { - display: block; - } -} -& when (@variationButtonEqualWidth) { - .ui.two.buttons { - width: 100%; - } + .ui.attached.buttons .button:first-child { + border-radius: 0; + } - .ui.two.buttons > .button { - width: 50%; - } + .ui.attached.buttons .button:last-child { + border-radius: 0; + } - .ui.three.buttons { - width: 100%; - } + /* Top / Bottom */ + .ui[class*="top attached"].buttons { + margin-bottom: @topAttachedOffset; + border-radius: @borderRadius @borderRadius 0 0; + } - .ui.three.buttons > .button { - width: 33.333%; - } + .ui[class*="top attached"].buttons .button:first-child { + border-radius: @borderRadius 0 0 0; + } - .ui.four.buttons { - width: 100%; - } + .ui[class*="top attached"].buttons .button:last-child { + border-radius: 0 @borderRadius 0 0; + } - .ui.four.buttons > .button { - width: 25%; - } + .ui[class*="bottom attached"].buttons { + margin-top: @bottomAttachedOffset; + border-radius: 0 0 @borderRadius @borderRadius; + } - .ui.five.buttons { - width: 100%; - } + .ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0 0 0 @borderRadius; + } - .ui.five.buttons > .button { - width: 20%; - } + .ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0 0 @borderRadius 0; + } - .ui.six.buttons { - width: 100%; - } + /* Left / Right */ + .ui[class*="left attached"].buttons { + display: inline-flex; + margin-right: 0; + margin-left: @attachedOffset; + border-radius: 0 @borderRadius @borderRadius 0; + } - .ui.six.buttons > .button { - width: 16.666%; - } + .ui[class*="left attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: 0 @borderRadius 0 0; + } - .ui.seven.buttons { - width: 100%; - } + .ui[class*="left attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0 0 @borderRadius 0; + } - .ui.seven.buttons > .button { - width: 14.285%; - } + .ui[class*="right attached"].buttons { + display: inline-flex; + margin-left: 0; + margin-right: @attachedOffset; + border-radius: @borderRadius 0 0 @borderRadius; + } - .ui.eight.buttons { - width: 100%; - } + .ui[class*="right attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: @borderRadius 0 0 0; + } - .ui.eight.buttons > .button { - width: 12.500%; - } + .ui[class*="right attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0 0 0 @borderRadius; + } +} - .ui.nine.buttons { - width: 100%; - } +& when (@variationButtonFluid) { + /* ------------------- + Fluid + -------------------- */ - .ui.nine.buttons > .button { - width: 11.11%; - } + .ui.fluid.buttons, + .ui.fluid.button { + width: 100%; + } - .ui.ten.buttons { - width: 100%; - } + .ui.fluid.button { + display: block; + } +} +& when (@variationButtonEqualWidth) { + .ui.two.buttons { + width: 100%; + } - .ui.ten.buttons > .button { - width: 10%; - } + .ui.two.buttons > .button { + width: 50%; + } - .ui.eleven.buttons { - width: 100%; - } + .ui.three.buttons { + width: 100%; + } - .ui.eleven.buttons > .button { - width: 9.09%; - } + .ui.three.buttons > .button { + width: 33.333%; + } - .ui.twelve.buttons { - width: 100%; - } + .ui.four.buttons { + width: 100%; + } - .ui.twelve.buttons > .button { - width: 8.3333%; - } -} + .ui.four.buttons > .button { + width: 25%; + } -& when (@variationButtonVertical) { - & when (@variationButtonFluid) { - /* Fluid Vertical Buttons */ - .ui.fluid.vertical.buttons, - .ui.fluid.vertical.buttons > .button { - display: flex; - width: auto; - justify-content: center; + .ui.five.buttons { + width: 100%; } - } - & when (@variationButtonEqualWidth) { - .ui.two.vertical.buttons > .button { - height: 50%; + .ui.five.buttons > .button { + width: 20%; } - .ui.three.vertical.buttons > .button { - height: 33.333%; + .ui.six.buttons { + width: 100%; } - .ui.four.vertical.buttons > .button { - height: 25%; + .ui.six.buttons > .button { + width: 16.666%; } - .ui.five.vertical.buttons > .button { - height: 20%; + .ui.seven.buttons { + width: 100%; } - .ui.six.vertical.buttons > .button { - height: 16.666%; + .ui.seven.buttons > .button { + width: 14.285%; } - .ui.seven.vertical.buttons > .button { - height: 14.285%; + .ui.eight.buttons { + width: 100%; } - .ui.eight.vertical.buttons > .button { - height: 12.500%; + .ui.eight.buttons > .button { + width: 12.5%; } - .ui.nine.vertical.buttons > .button { - height: 11.11%; + .ui.nine.buttons { + width: 100%; } - .ui.ten.vertical.buttons > .button { - height: 10%; + .ui.nine.buttons > .button { + width: 11.11%; } - .ui.eleven.vertical.buttons > .button { - height: 9.09%; + .ui.ten.buttons { + width: 100%; } - .ui.twelve.vertical.buttons > .button { - height: 8.3333%; + .ui.ten.buttons > .button { + width: 10%; } - } -} -/*------------------- - Colors ---------------------*/ + .ui.eleven.buttons { + width: 100%; + } -& when not (@variationButtonColors = false) { - each(@variationButtonColors, { - @color: @value; - @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; + .ui.eleven.buttons > .button { + width: 9.09%; } - & 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.twelve.buttons { + width: 100%; } - & 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; - } + .ui.twelve.buttons > .button { + width: 8.3333%; + } +} - & when not (@isDark) { - box-shadow: 0 0 0 @invertedBorderSize @l inset; - color: @l; +& when (@variationButtonVertical) { + & when (@variationButtonFluid) { + /* Fluid Vertical Buttons */ + .ui.fluid.vertical.buttons, + .ui.fluid.vertical.buttons > .button { + display: flex; + width: auto; + justify-content: center; } - } - .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 (@variationButtonEqualWidth) { + .ui.two.vertical.buttons > .button { + height: 50%; } - } - } - & when (@variationButtonTertiary) { - /* Tertiary */ + .ui.three.vertical.buttons > .button { + height: 33.333%; + } - .ui.tertiary.@{color}.buttons .button, - .ui.tertiary.@{color}.buttons .tertiary.button, - .ui.tertiary.@{color}.button { - background: transparent; + .ui.four.vertical.buttons > .button { + height: 25%; + } + .ui.five.vertical.buttons > .button { + height: 20%; + } + .ui.six.vertical.buttons > .button { + height: 16.666%; + } - & when (@tertiaryWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @ty; + .ui.seven.vertical.buttons > .button { + height: 14.285%; } - & when (@tertiaryWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @ty; + .ui.eight.vertical.buttons > .button { + height: 12.5%; } - & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ - box-shadow: none; + .ui.nine.vertical.buttons > .button { + height: 11.11%; } - color: @c; - } + .ui.ten.vertical.buttons > .button { + height: 10%; + } - .ui.tertiary.@{color}.buttons .button:hover, - .ui.tertiary.@{color}.buttons button:hover, - .ui.tertiary.@{color}.button:hover { + .ui.eleven.vertical.buttons > .button { + height: 9.09%; + } + .ui.twelve.vertical.buttons > .button { + height: 8.3333%; + } + } +} +/* ------------------- + Colors +-------------------- */ - & when (@tertiaryHoverWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh; +& when not (@variationButtonColors = false) { + each(@variationButtonColors, { + @color: @value; + @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; } - - & when (@tertiaryHoverWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tyh; + .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 (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { - box-shadow: none; + & 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; + } + } + & 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 */ - color: @tyh; - } + .ui.tertiary.@{color}.buttons .button, + .ui.tertiary.@{color}.buttons .tertiary.button, + .ui.tertiary.@{color}.button { + background: transparent; - .ui.tertiary.@{color}.buttons .button:focus, - .ui.tertiary.@{color}.buttons .tertiary.button:focus, - .ui.tertiary.@{color}.button:focus { + & 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; + } - & when (@tertiaryFocusWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tyf; - } + .ui.tertiary.@{color}.buttons .button:hover, + .ui.tertiary.@{color}.buttons button:hover, + .ui.tertiary.@{color}.button:hover { - & when (@tertiaryFocusWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tyf; - } + & when (@tertiaryHoverWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh; + } - & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) { - box-shadow: none; - } + & when (@tertiaryHoverWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tyh; + } + & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { + box-shadow: none; + } - color: @tyf; - } + color: @tyh; + } - .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 { + .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 (@tertiaryActiveWithUnderline = true) { - box-shadow: inset 0 -@tertiaryLineHeight 0 @tya; - } + & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) { + box-shadow: none; + } - & when (@tertiaryActiveWithOverline = true) { - box-shadow: inset 0 @tertiaryLineHeight 0 @tya; + 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; + } } + }); +} - & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) { - box-shadow: none; +& when not (@variationButtonConsequences = false) { + each(@variationButtonConsequences, { + @consequence: @value; + + @_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; + } + } + }); +} + +& when (@variationButtonGroups) { + /******************************* + Groups + *******************************/ - color: @a; - } + .ui.buttons { + display: inline-flex; + flex-direction: row; + font-size: 0; + vertical-align: baseline; + margin: @verticalMargin @horizontalMargin 0 0; } - }) -} -.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; - } - } -} + .ui.buttons:not(.basic):not(.inverted) { + box-shadow: @groupBoxShadow; + } -/*--------------- - Positive -----------------*/ + /* Clearfix */ + .ui.buttons::after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } -.addConsequence(positive); + /* Standard Group */ + .ui.buttons .button { + flex: 1 0 auto; + border-radius: 0; + margin: @groupButtonOffset; + } -/*--------------- - Negative -----------------*/ + .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { + box-shadow: @groupButtonBoxShadow; + } -.addConsequence(negative); + .ui.buttons .button:first-child { + border-left: none; + margin-left: 0; + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; + } -& 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; - } - & when (@variationButtonVertical) { - /* Vertical Style */ - .ui.vertical.buttons { - display: inline-flex; - flex-direction: column; - } - - .ui.vertical.buttons .button { - display: block; - float: none; - width: 100%; - margin: @verticalGroupOffset; - border-radius: 0; - &:not(.basic) { - box-shadow: @verticalBoxShadow; - } - } - - .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; + .ui.buttons .button:last-child { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; } - & when (@variationButtonBasic) { - .ui.vertical.buttons .basic.button:not(:first-child) { - border-top: none; - } + & when (@variationButtonVertical) { + /* Vertical Style */ + .ui.vertical.buttons { + display: inline-flex; + flex-direction: column; + } + + .ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: @verticalGroupOffset; + border-radius: 0; + &:not(.basic) { + box-shadow: @verticalBoxShadow; + } + } + + .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; + } + & when (@variationButtonBasic) { + .ui.vertical.buttons .basic.button:not(:first-child) { + border-top: none; + } + } } - } - & when (@variationButtonWrapping) { - .ui.wrapping.buttons { - flex-wrap: wrap; + & when (@variationButtonWrapping) { + .ui.wrapping.buttons { + flex-wrap: wrap; + } + & when (@variationButtonBasic) { + .ui.wrapping.basic.buttons { + border-bottom: none; + & .button { + border-bottom: @basicGroupBorder; + &:hover { + background: transparent !important; + } + } + } + } + & when (@variationButtonCompact) { + .ui.compact.wrapping.buttons .button { + flex: none; + } + } } - & when (@variationButtonBasic) { - .ui.wrapping.basic.buttons { - border-bottom: none; - & .button { - border-bottom: @basicGroupBorder; - &:hover { - background: transparent !important; - } - } - } - } - & when (@variationButtonCompact) { - .ui.compact.wrapping.buttons .button { - flex: none; - } - } - } - & when (@variationButtonWrapped) { - .ui.wrapped.buttons:not(.spaced) { - border-top-right-radius: 0; - & .button { - &:first-child { - border-radius: @basicBorderRadius 0 0 0; - } - &:last-child { - border-radius: 0 0 @basicBorderRadius 0; - } - } - } - & when (@variationButtonAttached) { - .ui.wrapped[class*="top attached"].buttons { - border-radius: @basicBorderRadius 0 0 0; - & .button:last-child { - border-radius: 0; - } - } - .ui.wrapped[class*="bottom attached"].buttons { - border-radius: 0 0 0 @basicBorderRadius; - & .button:first-child { - border-radius: 0; - } - } - } - } - & when (@variationButtonSpaced) { - .ui.spaced.buttons .ui.button { - margin-bottom: @spacedMargin; - margin-right: @spacedMargin; - border-radius: @basicBorderRadius; + & when (@variationButtonWrapped) { + .ui.wrapped.buttons:not(.spaced) { + border-top-right-radius: 0; + & .button { + &:first-child { + border-radius: @basicBorderRadius 0 0 0; + } + &:last-child { + border-radius: 0 0 @basicBorderRadius 0; + } + } + } + & when (@variationButtonAttached) { + .ui.wrapped[class*="top attached"].buttons { + border-radius: @basicBorderRadius 0 0 0; + & .button:last-child { + border-radius: 0; + } + } + .ui.wrapped[class*="bottom attached"].buttons { + border-radius: 0 0 0 @basicBorderRadius; + & .button:first-child { + border-radius: 0; + } + } + } + } + & when (@variationButtonSpaced) { + .ui.spaced.buttons .ui.button { + margin-bottom: @spacedMargin; + margin-right: @spacedMargin; + border-radius: @basicBorderRadius; + } + & when (@variationButtonBasic) { + .ui.spaced.basic.buttons { + border: none; + & .button { + border: @basicGroupBorder; + &.basic { + border: none; + } + } + } + & when (@variationButtonVertical) { + .ui.spaced.basic.vertical.buttons .button:first-child { + border-top: @basicGroupBorder; + } + } + & when (@variationButtonWrapping) { + .ui.spaced.basic.wrapping.buttons .button:not(.basic) { + border-top: @basicGroupBorder; + border-right: @basicGroupBorder; + &:first-child { + border-left: @basicGroupBorder; + } + } + } + & when (@variationButtonInverted) { + .ui.spaced.basic.inverted.buttons .basic.button { + margin-bottom: e(%("calc(%d + %d)", @spacedMargin, @basicColoredBorderSize)); + margin-top: @basicColoredBorderSize; + } + } + } } + & when (@variationButtonBasic) { - .ui.spaced.basic.buttons { - border: none; - & .button { - border: @basicGroupBorder; - &.basic { - border: none; - } - } - } - & when (@variationButtonVertical) { - .ui.spaced.basic.vertical.buttons .button:first-child { - border-top: @basicGroupBorder; - } - } - & when (@variationButtonWrapping) { - .ui.spaced.basic.wrapping.buttons .button:not(.basic) { - border-top: @basicGroupBorder; - border-right: @basicGroupBorder; - &:first-child { - border-left: @basicGroupBorder; - } - } - } - & when (@variationButtonInverted) { - .ui.spaced.basic.inverted.buttons .basic.button { - margin-bottom: e(%("calc(%d + %d)", @spacedMargin, @basicColoredBorderSize)); - margin-top: @basicColoredBorderSize; - } - } - } - } - - & when (@variationButtonBasic) { - .ui.basic.buttons:not(.vertical).inverted .button, - .ui.basic.buttons:not(.vertical) .basic.button { - margin-left: -@basicColoredBorderSize; - border-right: none; - } - .ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button { - margin-top: -@basicColoredBorderSize; - border-bottom: none; - } - & when (@variationButtonAttached) or (@variationButtonInverted) { - .ui.inverted.basic.buttons:not(.spaced) .button, - .ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button { - margin-bottom: @attachedOffset; - } - } - .ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button { - margin-bottom: -@basicColoredBorderSize; - } - } + .ui.basic.buttons:not(.vertical).inverted .button, + .ui.basic.buttons:not(.vertical) .basic.button { + margin-left: -@basicColoredBorderSize; + border-right: none; + } + .ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button { + margin-top: -@basicColoredBorderSize; + border-bottom: none; + } + & when (@variationButtonAttached) or (@variationButtonInverted) { + .ui.inverted.basic.buttons:not(.spaced) .button, + .ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button { + margin-bottom: @attachedOffset; + } + } + .ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button { + margin-bottom: -@basicColoredBorderSize; + } + } } .loadUIOverrides(); diff --git a/definitions/elements/container.less b/definitions/elements/container.less index 3272c9a..c6a637e 100644 --- a/definitions/elements/container.less +++ b/definitions/elements/container.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Container - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,10 +12,10 @@ Theme *******************************/ -@type : 'element'; -@element : 'container'; +@type: "element"; +@element: "container"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Container @@ -23,104 +23,104 @@ /* All Sizes */ .ui.container { - display: block; - max-width: @maxWidth; + 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; + .ui.ui.ui.container:not(.fluid) { + width: @mobileWidth; + margin-left: @mobileGutter; + margin-right: @mobileGutter; } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @mobileRelaxedGridWidth; - } - & when (@variationContainerVeryRelaxed) { - .ui.ui.ui.very.relaxed.grid.container { - width: @mobileVeryRelaxedGridWidth; + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @mobileGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @mobileRelaxedGridWidth; + } + & when (@variationContainerVeryRelaxed) { + .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; + .ui.ui.ui.container:not(.fluid) { + width: @tabletWidth; + margin-left: @tabletGutter; + margin-right: @tabletGutter; } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @tabletRelaxedGridWidth; - } - & when (@variationContainerVeryRelaxed) { - .ui.ui.ui.very.relaxed.grid.container { - width: @tabletVeryRelaxedGridWidth; + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @tabletGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @tabletRelaxedGridWidth; + } + & when (@variationContainerVeryRelaxed) { + .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; + .ui.ui.ui.container:not(.fluid) { + width: @computerWidth; + margin-left: @computerGutter; + margin-right: @computerGutter; } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @computerRelaxedGridWidth; - } - & when (@variationContainerVeryRelaxed) { - .ui.ui.ui.very.relaxed.grid.container { - width: @computerVeryRelaxedGridWidth; + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @computerGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @computerRelaxedGridWidth; + } + & when (@variationContainerVeryRelaxed) { + .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; + .ui.ui.ui.container:not(.fluid) { + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter; + margin-right: @largeMonitorGutter; } - & when (@variationContainerRelaxed) { - .ui.ui.ui.relaxed.grid.container { - width: @largeMonitorRelaxedGridWidth; - } - & when (@variationContainerVeryRelaxed) { - .ui.ui.ui.very.relaxed.grid.container { - width: @largeMonitorVeryRelaxedGridWidth; + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @largeMonitorGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @largeMonitorRelaxedGridWidth; + } + & when (@variationContainerVeryRelaxed) { + .ui.ui.ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth; + } + } } - } } - } } /******************************* @@ -128,170 +128,170 @@ *******************************/ & when (@variationContainerText) { - /* Text Container */ - .ui.text.container { - font-family: @textFontFamily; - max-width: @textWidth; - line-height: @textLineHeight; - font-size: @textSize; - } + /* Text Container */ + .ui.text.container { + font-family: @textFontFamily; + max-width: @textWidth; + line-height: @textLineHeight; + font-size: @textSize; + } } & when (@variationContainerWide) { - /* Wide Container */ - @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui.ui.ui.wide.container { - width: @tabletWideWidth; + /* Wide Container */ + @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.ui.ui.wide.container { + width: @tabletWideWidth; + } } - } - @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { - .ui.ui.ui.wide.container { - width: @computerWideWidth; + @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.ui.ui.wide.container { + width: @computerWideWidth; + } } - } - @media only screen and (min-width: @largeMonitorBreakpoint) { - .ui.ui.ui.wide.container { - width: @largeMonitorWideWidth; + @media only screen and (min-width: @largeMonitorBreakpoint) { + .ui.ui.ui.wide.container { + width: @largeMonitorWideWidth; + } } - } } & when (@variationContainerFluid) { - /* Fluid */ - .ui.fluid.container { - width: 100%; - } + /* 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; - } + .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; - } + .ui.justified.container { + text-align: justify; + hyphens: auto; + } } & when (@variationContainerScrolling) { - /*-------------- - Scrolling - ---------------*/ - .ui.scrolling.container { - overflow: auto; - } - @media only screen and (max-width : @largestMobileScreen) { - & when (@variationContainerScrollingShort) { - .ui.scrolling.container.short { - max-height: @scrollingMobileMaxHeight * 0.75; - } - } - & when (@variationContainerScrollingVeryShort) { - .ui.scrolling.container[class*="very short"] { - max-height: @scrollingMobileMaxHeight * 0.5; - } - } + /* -------------- + Scrolling + --------------- */ .ui.scrolling.container { - max-height: @scrollingMobileMaxHeight; + overflow: auto; + overscroll-behavior: @overscrollBehavior; } - & when (@variationContainerScrollingLong) { - .ui.scrolling.container.long { - max-height: @scrollingMobileMaxHeight * 2; - } - } - & when (@variationContainerScrollingVeryLong) { - .ui.scrolling.container[class*="very long"] { - max-height: @scrollingMobileMaxHeight * 3; - } + @media only screen and (max-width: @largestMobileScreen) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingMobileMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingMobileMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingMobileMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingMobileMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingMobileMaxHeight * 3; + } + } } - } - @media only screen and (min-width: @tabletBreakpoint) { - & when (@variationContainerScrollingShort) { - .ui.scrolling.container.short { - max-height: @scrollingTabletMaxHeight * 0.75; - } - } - & when (@variationContainerScrollingVeryShort) { - .ui.scrolling.container[class*="very short"] { - max-height: @scrollingTabletMaxHeight * 0.5; - } - } - .ui.scrolling.container { - max-height: @scrollingTabletMaxHeight; - } - & when (@variationContainerScrollingLong) { - .ui.scrolling.container.long { - max-height: @scrollingTabletMaxHeight * 2; - } - } - & when (@variationContainerScrollingVeryLong) { - .ui.scrolling.container[class*="very long"] { - max-height: @scrollingTabletMaxHeight * 3; - } - } - } - @media only screen and (min-width: @computerBreakpoint) { - & when (@variationContainerScrollingShort) { - .ui.scrolling.container.short { - max-height: @scrollingComputerMaxHeight * 0.75; - } - } - & when (@variationContainerScrollingVeryShort) { - .ui.scrolling.container[class*="very short"] { - max-height: @scrollingComputerMaxHeight * 0.5; - } - } - .ui.scrolling.container { - max-height: @scrollingComputerMaxHeight; - } - & when (@variationContainerScrollingLong) { - .ui.scrolling.container.long { - max-height: @scrollingComputerMaxHeight * 2; - } - } - & when (@variationContainerScrollingVeryLong) { - .ui.scrolling.container[class*="very long"]{ - max-height: @scrollingComputerMaxHeight * 3; - } - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - & when (@variationContainerScrollingShort) { - .ui.scrolling.container.short { - max-height: @scrollingWidescreenMaxHeight * 0.75; - } - } - & when (@variationContainerScrollingVeryShort) { - .ui.scrolling.container[class*="very short"] { - max-height: @scrollingWidescreenMaxHeight * 0.5; - } - } - .ui.scrolling.container { - max-height: @scrollingWidescreenMaxHeight; + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingTabletMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingTabletMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingTabletMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingTabletMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingTabletMaxHeight * 3; + } + } } - & when (@variationContainerScrollingLong) { - .ui.scrolling.container.long { - max-height: @scrollingWidescreenMaxHeight * 2; - } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingComputerMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingComputerMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingComputerMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingComputerMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingComputerMaxHeight * 3; + } + } } - & when (@variationContainerScrollingVeryLong) { - .ui.scrolling.container[class*="very long"] { - max-height: @scrollingWidescreenMaxHeight * 3; - } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationContainerScrollingShort) { + .ui.scrolling.container.short { + max-height: @scrollingWidescreenMaxHeight * 0.75; + } + } + & when (@variationContainerScrollingVeryShort) { + .ui.scrolling.container[class*="very short"] { + max-height: @scrollingWidescreenMaxHeight * 0.5; + } + } + .ui.scrolling.container { + max-height: @scrollingWidescreenMaxHeight; + } + & when (@variationContainerScrollingLong) { + .ui.scrolling.container.long { + max-height: @scrollingWidescreenMaxHeight * 2; + } + } + & when (@variationContainerScrollingVeryLong) { + .ui.scrolling.container[class*="very long"] { + max-height: @scrollingWidescreenMaxHeight * 3; + } + } } - } } - .loadUIOverrides(); diff --git a/definitions/elements/divider.less b/definitions/elements/divider.less index 399b1e4..94a6652 100644 --- a/definitions/elements/divider.less +++ b/definitions/elements/divider.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Divider - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,203 +12,193 @@ Theme *******************************/ -@type : 'element'; -@element : 'divider'; - -@import (multiple) '../../theme.config'; +@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); + 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; + 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; + left: auto; } & when (@variationDividerHorizontal) { - /*-------------- - Horizontal - ---------------*/ + /* -------------- + Horizontal + --------------- */ + + .ui.horizontal.divider { + display: table; + white-space: nowrap; + height: auto; + margin: @horizontalMargin; + line-height: 1; + text-align: center; + } - .ui.horizontal.divider { - display: table; - white-space: nowrap; + .ui.horizontal.divider::before, + .ui.horizontal.divider::after { + content: ""; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; + } - 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%; - } + .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; + /* -------------- + 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.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.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.stackable.grid .ui.vertical.divider::before, - .ui.grid .stackable.row .ui.vertical.divider::before { - background-position: right @horizontalDividerMargin top 50%; + .ui.vertical.divider::before { + top: -100%; } - .ui.stackable.grid .ui.vertical.divider::after, - .ui.grid .stackable.row .ui.vertical.divider::after { - background-position: left @horizontalDividerMargin top 50%; + .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; - } + /* -------------- + 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; + /* -------------- + Header + --------------- */ + .ui.horizontal.divider[class*="left aligned"] { + &::before { + display: none; + } + &::after { + width: 100%; + } } - &::after { - width: 100%; + .ui.horizontal.divider[class*="right aligned"] { + &::before { + width: 100%; + } + &::after { + display: none; + } } - } - .ui.horizontal.divider[class*="right aligned"] { - &::before { - width: 100%; - } - &::after { - display: none; - } - } } /******************************* @@ -216,83 +206,80 @@ *******************************/ & when (@variationDividerHidden) { - /*-------------- - Hidden - ---------------*/ - - .ui.hidden.divider { - border-color: transparent !important; - } - - .ui.hidden.divider::before, - .ui.hidden.divider::after { - display: none; - } + /* -------------- + 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; - } + .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-color: @invertedShadowColor @invertedHighlightColor @invertedHighlightColor @invertedShadowColor !important; + } } -/*-------------- +/* -------------- Fitted ----------------*/ +--------------- */ & when (@variationDividerFitted) { - .ui.fitted.divider { - margin: 0; - } + .ui.fitted.divider { + margin: 0; + } } & when (@variationDividerClearing) { - /*-------------- - Clearing - ---------------*/ + /* -------------- + Clearing + --------------- */ - .ui.clearing.divider { - clear: both; - } + .ui.clearing.divider { + clear: both; + } } & when (@variationDividerSection) { - /*-------------- - Section - ---------------*/ - - .ui.section.divider { - margin-top: @sectionMargin; - margin-bottom: @sectionMargin; - } + /* -------------- + Section + --------------- */ + + .ui.section.divider { + margin-top: @sectionMargin; + margin-bottom: @sectionMargin; + } } -/*-------------- +/* -------------- Sizes ----------------*/ +--------------- */ .ui.divider { - font-size: @medium; + font-size: @medium; } & when not (@variationDividerSizes = false) { - each(@variationDividerSizes, { - @s: @@value; - .ui.@{value}.divider { - font-size: @s; - } - }) + each(@variationDividerSizes, { + @s: @@value; + .ui.@{value}.divider { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/elements/emoji.less b/definitions/elements/emoji.less index 402a441..a32dc89 100644 --- a/definitions/elements/emoji.less +++ b/definitions/elements/emoji.less @@ -8,94 +8,87 @@ * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'emoji'; - -@import (multiple) '../../theme.config'; +@type: "element"; +@element: "emoji"; +@import (multiple) "../../theme.config"; /******************************* Emoji *******************************/ - em[data-emoji] { - opacity: @opacity; - - speak: none; - backface-visibility: hidden; + 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; - } + 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 *******************************/ & when (@variationEmojiDisabled) { - em[data-emoji].disabled { - opacity: @disabledOpacity; - } + em[data-emoji].disabled { + opacity: @disabledOpacity; + } } - /******************************* Variations *******************************/ & when (@variationEmojiLoading) { - em[data-emoji].loading::before { - animation: loader @loadingDuration linear infinite; - } + em[data-emoji].loading::before { + animation: loader @loadingDuration linear infinite; + } } - & when (@variationEmojiLink) { - /*------------------- - Link - --------------------*/ + /* ------------------- + Link + -------------------- */ - em[data-emoji].link:not(.disabled) { - cursor: pointer; - } + em[data-emoji].link:not(.disabled) { + cursor: pointer; + } } -/*rtl:begin:ignore*/ +/* rtl:begin:ignore */ each(@size-map, { - em[data-emoji].@{key} { - font-size: 1.5em * @value; - vertical-align: middle; - } + em[data-emoji].@{key} { + font-size: 1.5em * @value; + vertical-align: middle; + } }); -each(@emoji-map,{ - & when (@variationEmojiColons) { - em[data-emoji=":@{value}:"]::before { - background-image: url("@{emojiPath}@{key}.@{emojiFileType}"); +each(@emoji-map, { + & when (@variationEmojiColons) { + em[data-emoji=":@{value}:"]::before { + background-image: url("@{emojiPath}@{key}.@{emojiFileType}"); + } + em[data-emoji="@{value}"]::before:extend(em[data-emoji=":@{value}:"]::before) when (@variationEmojiNoColons) {} + } + em[data-emoji="@{value}"]::before when (@variationEmojiNoColons) and not (@variationEmojiColons) { + background-image: url("@{emojiPath}@{key}.@{emojiFileType}"); } - em[data-emoji="@{value}"]::before:extend(em[data-emoji=":@{value}:"]::before) when (@variationEmojiNoColons) {} - } - em[data-emoji="@{value}"]::before when (@variationEmojiNoColons) and not (@variationEmojiColons) { - background-image: url("@{emojiPath}@{key}.@{emojiFileType}"); - } }); -/*rtl:end:ignore*/ +/* rtl:end:ignore */ .loadUIOverrides(); diff --git a/definitions/elements/flag.less b/definitions/elements/flag.less index f95274d..02d6ed9 100644 --- a/definitions/elements/flag.less +++ b/definitions/elements/flag.less @@ -1,88 +1,86 @@ /*! * # Fomantic-UI - Flag - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'flag'; - -@import (multiple) '../../theme.config'; +@type: "element"; +@element: "flag"; +@import (multiple) "../../theme.config"; /******************************* Flag *******************************/ i.flag:not(.icon) { - speak: none; - backface-visibility: hidden; + speak: none; + backface-visibility: hidden; } i.flag:not(.icon)::before { - content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0'; - display: inline-block; - line-height: @flagLineHeight; - background-repeat: no-repeat; - background-position: center center; - & when not (@flagFileType = 'svg') { - background-size: contain; - } + content: "\00A0\00A0\00A0\00A0\00A0\00A0\00A0"; + display: inline-block; + line-height: @flagLineHeight; + background-repeat: no-repeat; + background-position: center center; + & when not (@flagFileType = "svg") { + background-size: contain; + } } each(@size-map, { - i.flag.@{key} { - font-size: 1.5em * @value; - vertical-align: middle; - } + i.flag.@{key} { + font-size: 1.5em * @value; + vertical-align: middle; + } }); -/*rtl:begin:ignore*/ +/* rtl:begin:ignore */ // for simplicity, class and alias names have to be unique and different to countrycode otherwise false each(@flags, { - @unicode: replace(@key,'@',''); - @cc: replace(@flags[@@unicode][countrycode],'_','.','g'); - @cls: replace(@flags[@@unicode][class],'_','.','g'); - @alias: replace(@flags[@@unicode][aliasClass],'_','.','g'); - @alias2: replace(@flags[@@unicode][aliasClass2],'_','.','g'); - & when (@cls = false){ - i.flag.@{cc}::before { - background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + @unicode: replace(@key, "@", ""); + @cc: replace(@flags[@@unicode][countrycode], "_", ".", "g"); + @cls: replace(@flags[@@unicode][class], "_", ".", "g"); + @alias: replace(@flags[@@unicode][aliasClass], "_", ".", "g"); + @alias2: replace(@flags[@@unicode][aliasClass2], "_", ".", "g"); + & when (@cls = false){ + i.flag.@{cc}::before { + background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + } } - } - & when not (@cls = false) and (@alias = false) { - i.flag.@{cc}::before, - i.flag.@{cls}::before { - background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + & when not (@cls = false) and (@alias = false) { + i.flag.@{cc}::before, + i.flag.@{cls}::before { + background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + } } - } - & when not (@cls = false) and not (@alias = false) and (@alias2 = false) { - i.flag.@{cc}::before, - i.flag.@{cls}::before, - i.flag.@{alias}::before { - background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + & when not (@cls = false) and not (@alias = false) and (@alias2 = false) { + i.flag.@{cc}::before, + i.flag.@{cls}::before, + i.flag.@{alias}::before { + background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + } } - } - & when not (@alias2 = false) { - i.flag.@{cc}::before, - i.flag.@{cls}::before, - i.flag.@{alias}::before, - i.flag.@{alias2}::before { - background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + & when not (@alias2 = false) { + i.flag.@{cc}::before, + i.flag.@{cls}::before, + i.flag.@{alias}::before, + i.flag.@{alias2}::before { + background-image: url("@{flagPath}@{unicode}.@{flagFileType}"); + } } - } }); -/*rtl:end:ignore*/ +/* rtl:end:ignore */ .loadUIOverrides(); diff --git a/definitions/elements/header.less b/definitions/elements/header.less index c609aab..6f94a22 100644 --- a/definitions/elements/header.less +++ b/definitions/elements/header.less @@ -1,23 +1,21 @@ /*! * # Fomantic-UI - Header - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'header'; - -@import (multiple) '../../theme.config'; +@type: "element"; +@element: "header"; +@import (multiple) "../../theme.config"; /******************************* Header @@ -25,477 +23,471 @@ /* Standard */ .ui.header { - border: none; - margin: @margin; - padding: @verticalPadding @horizontalPadding; - font-family: @fontFamily; - font-weight: @fontWeight; - line-height: @lineHeight; - text-transform: @textTransform; - color: @textColor; + 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; + margin-top: @firstMargin; } .ui.header:last-child { - margin-bottom: @lastMargin; + 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; - } + /* -------------- + 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 > .icons, .ui.header > i.icon { - display: table-cell; - opacity: @iconOpacity; - font-size: @iconSize; - padding-top: @iconOffset; - vertical-align: @iconAlignment; + display: table-cell; + opacity: @iconOpacity; + font-size: @iconSize; + padding-top: @iconOffset; + vertical-align: @iconAlignment; } /* With Text Node */ .ui.header:not(.icon) > .icons:only-child, .ui.header:not(.icon) > i.icon:only-child { - display: inline-block; - padding: 0; - margin-right: @iconMargin; + 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; + 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; + margin-right: @imageMargin; } -/*-------------- +/* -------------- Content ----------------*/ +--------------- */ .ui.header .content { - display: inline-block; - vertical-align: @contentAlignment; + display: inline-block; + vertical-align: @contentAlignment; } /* After Image */ .ui.header > img + .content, .ui.header > .image + .content { - padding-left: @imageMargin; - vertical-align: @contentImageAlignment; + padding-left: @imageMargin; + vertical-align: @contentImageAlignment; } /* After Icon */ .ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content, .ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content { - padding-left: @iconMargin; - display: table-cell; - vertical-align: @contentIconAlignment; + padding-left: @iconMargin; + display: table-cell; + vertical-align: @contentIconAlignment; } - -/*-------------- +/* -------------- Loose Coupling ----------------*/ +--------------- */ .ui.header .ui.label { - font-size: @labelSize; - margin-left: @labelDistance; - vertical-align: @labelVerticalAlign; + font-size: @labelSize; + margin-left: @labelDistance; + vertical-align: @labelVerticalAlign; } /* Positioning */ .ui.header + p { - margin-top: @nextParagraphDistance; + 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; - } - } - }) + 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; - } - } - }) + 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; - } + /* -------------- + Sub Heading + --------------- */ + + .ui.sub.header { + padding: 0; + margin-bottom: @subHeadingDistance; + font-weight: @subHeadingFontWeight; + font-size: @subHeadingFontSize; + text-transform: @subHeadingTextTransform; + color: @subHeadingColor; + } } & when (@variationHeaderIcon) { - /*------------------- - Icon - --------------------*/ + /* ------------------- + 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 { - 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 > .image.icon, - .ui.icon.header > .icons, - .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 { - font-size: @circularHeaderIconSize; - } - .ui.icon.header > i.square { - font-size: @squareHeaderIconSize; - } - & when (@variationHeaderBlock) { - .ui.block.icon.header > .image.icon, - .ui.block.icon.header > .icons, - .ui.block.icon.header > i.icon { - margin-bottom: 0; - } - } - & when (@variationHeaderAligned) { - .ui.icon.header.aligned { - margin-left: auto; - margin-right: auto; - display: block; - } - } + .ui.icon.header:first-child { + margin-top: @iconHeaderFirstMargin; + } + .ui.icon.header > .image.icon, + .ui.icon.header > .icons, + .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 { + font-size: @circularHeaderIconSize; + } + .ui.icon.header > i.square { + font-size: @squareHeaderIconSize; + } + & when (@variationHeaderBlock) { + .ui.block.icon.header > .image.icon, + .ui.block.icon.header > .icons, + .ui.block.icon.header > i.icon { + margin-bottom: 0; + } + } + & when (@variationHeaderAligned) { + .ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; + } + } } /******************************* States *******************************/ & when (@variationHeaderDisabled) { - .ui.disabled.header { - opacity: @disabledOpacity; - } + .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; - } - } -} + /* ------------------- + 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 ---------------------*/ +-------------------- */ & when not (@variationHeaderColors = false) { - each(@variationHeaderColors, { - @color: @value; - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - @h: @colors[@@color][hover]; - @lh: @colors[@@color][lightHover]; + each(@variationHeaderColors, { + @color: @value; + @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; + } + } + }); +} - .ui.@{color}.header { - color: @c; +& when (@variationHeaderAligned) { + /* ------------------- + Aligned + -------------------- */ + + .ui.left.aligned.header { + text-align: left; } - a.ui.@{color}.header:hover { - color: @h; + .ui.right.aligned.header { + text-align: right; } - & when (@variationHeaderDividing) { - .ui.@{color}.dividing.header { - border-bottom: @dividedColoredBorderWidth solid @c; - } + .ui.centered.header, + .ui.center.aligned.header { + text-align: center; } - & 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%; - } + .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; - } + /* ------------------- + 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 - --------------------*/ + /* ------------------- + Fitted + -------------------- */ - .ui.fitted.header { - padding: 0; - } + .ui.fitted.header { + padding: 0; + } } & when (@variationHeaderDividing) { - /*------------------- - Dividing - --------------------*/ - - .ui.dividing.header { - padding-bottom: @dividedBorderPadding; - border-bottom: @dividedBorder; - } - & when (@variationHeaderSub) { - .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; - } - } + /* ------------------- + Dividing + -------------------- */ + + .ui.dividing.header { + padding-bottom: @dividedBorderPadding; + border-bottom: @dividedBorder; + } + & when (@variationHeaderSub) { + .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; - } - }) - } + /* ------------------- + 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; - } - & when (@variationHeaderBlock) { - .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; - } - }) - } + /* ------------------- + Attached + -------------------- */ + + .ui.attached.header { + background: @attachedBackground; + padding: @attachedVerticalPadding @attachedHorizontalPadding; + margin: 0 @attachedOffset; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; + border-radius: 0; + } + & when (@variationHeaderBlock) { + .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; + font-size: @mediumFontSize; } .loadUIOverrides(); diff --git a/definitions/elements/icon.less b/definitions/elements/icon.less index 67cc588..7a60a26 100644 --- a/definitions/elements/icon.less +++ b/definitions/elements/icon.less @@ -1,60 +1,54 @@ /*! * # Fomantic-UI - Icon - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'icon'; - -@import (multiple) '../../theme.config'; +@type: "element"; +@element: "icon"; +@import (multiple) "../../theme.config"; /******************************* Icon *******************************/ & when (@importIcons) { - each(@fonts, { - @font-face { - each(@value,{ - @{key}: @value; - }); - } - }) + each(@fonts, { + @font-face { + each(@value, { + @{key}: @value; + }); + } + }); } i.icon { - display: inline-block; - opacity: @opacity; - - margin: 0 @distanceFromText 0 0; - - width: @width; - height: @height; - - font-family: @fontName; - 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; + display: inline-block; + opacity: @opacity; + margin: 0 @distanceFromText 0 0; + width: @width; + height: @height; + font-family: @fontName; + 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; + background: none !important; } /******************************* @@ -62,35 +56,40 @@ i.icon::before { *******************************/ & when (@variationIconLoading) { - /*-------------- - Loading - ---------------*/ - - i.loading.icon { - height: 1em; - line-height: 1; - } - i.loading.icon, i.loading.icons { - animation: loader @loadingDuration linear infinite; - } + /* -------------- + Loading + --------------- */ + + i.loading.icon { + height: 1em; + line-height: 1; + } + i.loading.icon, + i.loading.icons { + 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; +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; - } + i.disabled.icon, + i.disabled.icons { + opacity: @disabledOpacity; + cursor: default; + pointer-events: none; + } } /******************************* @@ -98,504 +97,562 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { *******************************/ & when (@variationIconFitted) { - /*------------------- - Fitted - --------------------*/ - - i.fitted.icons, - i.fitted.icon { - width: auto; - margin: 0 !important; - } + /* ------------------- + Fitted + -------------------- */ + + i.fitted.icons, + 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; - } + /* ------------------- + 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; - &.colored when (@variationIconColored){ - box-shadow: @coloredBoxShadow; + /* ------------------- + Circular + -------------------- */ + + i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + padding: @circularPadding !important; + box-shadow: @circularShadow; + width: @circularSize !important; + height: @circularSize !important; + &.colored when (@variationIconColored) { + box-shadow: @coloredBoxShadow; + } } - } - & when (@variationIconInverted) { - i.circular.inverted.icon { - border: none; - box-shadow: none; + & 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(@variationIconGroups) { - .icons i.flipped.icon:not(.corner):not(:first-child), - .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1); - } - .icons i.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1); - } - } + /* ------------------- + Flipped + -------------------- */ + + i.flipped.icon, + i.horizontally.flipped.icon { + transform: scale(-1, 1); + } + i.vertically.flipped.icon { + transform: scale(1, -1); + } + + & when (@variationIconGroups) { + .icons i.flipped.icon:not(.corner):not(:first-child), + .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1); + } + .icons i.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) 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(@variationIconGroups) { - .icons i.rotated.rotated.icon:not(.corner):not(:first-child), - .icons i.right.rotated.icon:not(.corner):not(:first-child), - .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) rotate(90deg); - } - .icons i.left.rotated.icon:not(.corner):not(:first-child), - .icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) rotate(-90deg); - } - .icons i.halfway.rotated.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) rotate(180deg); - } - } + /* ------------------- + 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 (@variationIconGroups) { + .icons i.rotated.rotated.icon:not(.corner):not(:first-child), + .icons i.right.rotated.icon:not(.corner):not(:first-child), + .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) rotate(90deg); + } + .icons i.left.rotated.icon:not(.corner):not(:first-child), + .icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) rotate(-90deg); + } + .icons i.halfway.rotated.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) 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(@variationIconGroups) { - .icons i.rotated.flipped.icon:not(.corner):not(:first-child), - .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child), - .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg); - } - .icons i.left.rotated.flipped.icon:not(.corner):not(:first-child), - .icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg); - } - .icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg); - } - .icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child), - .icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child), - .icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg); - } - .icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child), - .icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg); - } - .icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg); - } - } + /* -------------------------- + 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 (@variationIconGroups) { + .icons i.rotated.flipped.icon:not(.corner):not(:first-child), + .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child), + .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg); + } + .icons i.left.rotated.flipped.icon:not(.corner):not(:first-child), + .icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg); + } + .icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg); + } + .icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child), + .icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child), + .icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg); + } + .icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child), + .icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg); + } + .icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) 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; - &.colored when (@variationIconColored){ - box-shadow: @coloredBoxShadow; - } - } - & when (@variationIconInverted) { - i.bordered.inverted.icon { - border: none; - box-shadow: none; - } - } + /* ------------------- + Bordered + -------------------- */ + + i.bordered.icon { + line-height: 1; + vertical-align: baseline; + width: @borderedSize; + height: @borderedSize; + padding: @borderedVerticalPadding @borderedHorizontalPadding !important; + box-shadow: @borderedShadow; + &.colored when (@variationIconColored) { + box-shadow: @coloredBoxShadow; + } + } + & 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; - } + /* ------------------- + Inverted + -------------------- */ + + /* Inverted Shapes */ + i.inverted.bordered.icon, + i.inverted.circular.icon { + background-color: @black; + color: @white; + } + + i.inverted.icon { + color: @white; + } } -/*------------------- +/* ------------------- Colors ---------------------*/ +-------------------- */ & when not (@variationIconColors = false) { - each(@variationIconColors, { - @color: @value; - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; + each(@variationIconColors, { + @color: @value; + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; - i.@{color}.icon.icon.icon.icon.icon { - color: @c; - } - & when (@variationIconInverted) { - i.inverted.@{color}.icon.icon.icon.icon.icon { - color: @l; - } - & when (@variationIconBordered) or (@variationIconCircular) { - i.inverted.bordered.@{color}.icon.icon.icon.icon.icon, - i.inverted.circular.@{color}.icon.icon.icon.icon.icon, - i.inverted.bordered.@{color}.icons, - i.inverted.circular.@{color}.icons { - background-color: @c; - color: @white; - } - } - } - }) + i.@{color}.icon.icon.icon.icon.icon { + color: @c; + } + & when (@variationIconInverted) { + i.inverted.@{color}.icon.icon.icon.icon.icon { + color: @l; + } + & when (@variationIconBordered) or (@variationIconCircular) { + i.inverted.bordered.@{color}.icon.icon.icon.icon.icon, + i.inverted.circular.@{color}.icon.icon.icon.icon.icon, + i.inverted.bordered.@{color}.icons, + i.inverted.circular.@{color}.icons { + background-color: @c; + color: @white; + } + } + } + }); } - -/*------------------- +/* ------------------- Sizes ---------------------*/ +-------------------- */ i.icon, i.icons { - font-size: @medium; - line-height: @lineHeight; - font-style: normal; + font-size: @medium; + line-height: @lineHeight; + font-style: normal; } & when not (@variationIconSizes = false) { - each(@variationIconSizes, { - @s: @@value; - i.@{value}.@{value}.@{value}.icon, - i.@{value}.@{value}.@{value}.icons { - font-size: @s; - vertical-align: middle; - } - }) + 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 - *******************************/ + /******************************* + Groups + *******************************/ + + i.icons { + display: inline-block; + position: relative; + line-height: 1; + min-width: @width; + min-height: @height; + margin: 0 @distanceFromText 0 0; + text-align: center; + } + + i.icons .icon { + position: absolute; + top: 50%; + left: 50%; + margin: 0; + &:not(.corner):not(.rotated):not(.flipped) { + transform: translateX(-50%) translateY(-50%); + } + } - i.icons { - display: inline-block; - position: relative; - line-height: 1; - min-width: @width; - min-height: @height; - margin: 0 @distanceFromText 0 0; - text-align: center; - } - - i.icons .icon { - position: absolute; - top: 50%; - left: 50%; - margin: 0; - &:not(.corner):not(.rotated):not(.flipped) { - transform: translateX(-50%) translateY(-50%); - } - } - - i.icons .icon:first-child { - position: static; - width: auto; - height: auto; - vertical-align: top; - } - i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) { - transform: none; - } - - & when (@variationIconCorner) { - /* Corner Icon */ - i.icons .corner.icon { - top: auto; - left: auto; - right: @cornerOffset; - bottom: @cornerOffset; - font-size: @cornerIconSize; - text-shadow: @cornerIconShadow; - &:not(.rotated):not(.flipped) { + i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + } + i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) { transform: none; - } - } - i.icons .icon.corner[class*="top right"] { - top: @cornerOffset; - left: auto; - right: @cornerOffset; - bottom: auto; - } - i.icons .icon.corner[class*="top left"] { - top: @cornerOffset; - left: @cornerOffset; - right: auto; - bottom: auto; - } - i.icons .icon.corner[class*="bottom left"] { - top: auto; - left: @cornerOffset; - right: auto; - bottom: @cornerOffset; - } - i.icons .icon.corner[class*="bottom right"] { - top: auto; - left: auto; - right: @cornerOffset; - bottom: @cornerOffset; } - & when (@variationIconInverted) { - i.icons .inverted.corner.icon { - text-shadow: @cornerIconInvertedShadow; - } + + & when (@variationIconCorner) { + /* Corner Icon */ + i.icons .corner.icon { + top: auto; + left: auto; + right: @cornerOffset; + bottom: @cornerOffset; + font-size: @cornerIconSize; + text-shadow: @cornerIconShadow; + &:not(.rotated):not(.flipped) { + transform: none; + } + } + i.icons .icon.corner[class*="top right"] { + top: @cornerOffset; + left: auto; + right: @cornerOffset; + bottom: auto; + } + i.icons .icon.corner[class*="top left"] { + top: @cornerOffset; + left: @cornerOffset; + right: auto; + bottom: auto; + } + i.icons .icon.corner[class*="bottom left"] { + top: auto; + left: @cornerOffset; + right: auto; + bottom: @cornerOffset; + } + i.icons .icon.corner[class*="bottom right"] { + top: auto; + left: auto; + right: @cornerOffset; + bottom: @cornerOffset; + } + & when (@variationIconInverted) { + i.icons .inverted.corner.icon { + text-shadow: @cornerIconInvertedShadow; + } + } } - } } -& when ((@variationIconGroups) or (@variationIconCorner)) - and ((@variationIconBordered) or (@variationIconCircular)) { - /************************************************* - Bordered/circular with corner or group icons - *************************************************/ - i.bordered.icons, - i.circular.icons { - width: @borderedSize; - height: @borderedSize; - box-shadow: @borderedShadow; - vertical-align: middle; - &.colored when (@variationIconColored){ - box-shadow: @coloredBoxShadow; - } - } - i.circular.icons { - border-radius: 500em; - } - i.bordered.icons i.icon:first-child, - i.circular.icons i.icon:first-child { - position: absolute; - transform: translateX(-50%) translateY(-50%); - } - - & when (@variationIconInverted) { - /* Inverted Icon */ - i.bordered.inverted.icons, - i.circular.inverted.icons { - border: none; - box-shadow: none; - background-color: @black; - color: @white; - } - } - - & when (@variationIconCorner) { - /* Corner Icon */ - i.bordered.icons .icon.corner, - i.circular.icons .icon.corner, - i.bordered.icons .icon.corner[class*="bottom right"], - i.circular.icons .icon.corner[class*="bottom right"] { - top: auto; - left: auto; - right: @borderedGroupCornerOffset; - bottom: @borderedGroupCornerOffset; - } - i.bordered.icons .icon.corner[class*="top right"], - i.circular.icons .icon.corner[class*="top right"] { - top: @borderedGroupCornerOffset; - left: auto; - right: @borderedGroupCornerOffset; - bottom: auto; - } - i.bordered.icons .icon.corner[class*="top left"], - i.circular.icons .icon.corner[class*="top left"] { - top: @borderedGroupCornerOffset; - left: @borderedGroupCornerOffset; - right: auto; - bottom: auto; - } - i.bordered.icons .icon.corner[class*="bottom left"], - i.circular.icons .icon.corner[class*="bottom left"] { - top: auto; - left: @borderedGroupCornerOffset; - right: auto; - bottom: @borderedGroupCornerOffset; - } - } -} +& when ((@variationIconGroups) or (@variationIconCorner)) and ((@variationIconBordered) or (@variationIconCircular)) { + /************************************************* + Bordered/circular with corner or group icons + *************************************************/ + i.bordered.icons, + i.circular.icons { + width: @borderedSize; + height: @borderedSize; + box-shadow: @borderedShadow; + vertical-align: middle; + &.colored when (@variationIconColored) { + box-shadow: @coloredBoxShadow; + } + } + i.circular.icons { + border-radius: 500em; + } + i.bordered.icons i.icon:first-child, + i.circular.icons i.icon:first-child { + position: absolute; + transform: translateX(-50%) translateY(-50%); + } -.generateIcons(@map, @fontFamily) { - each(@map,{ - @escapedKey: replace(@key,'^([0-9])','\3$1 '); - @normalizedKey: replace(@escapedKey,'_','.','g'); - i.icon.@{normalizedKey}::before { - content: "@{value}"; - & when not (@fontFamily = false) { - font-family: @fontFamily; - } + & when (@variationIconInverted) { + /* Inverted Icon */ + i.bordered.inverted.icons, + i.circular.inverted.icons { + border: none; + box-shadow: none; + background-color: @black; + color: @white; + } } - }); -}; -& when (@variationIconDeprecated) { + & when (@variationIconCorner) { + /* Corner Icon */ + i.bordered.icons .icon.corner, + i.circular.icons .icon.corner, + i.bordered.icons .icon.corner[class*="bottom right"], + i.circular.icons .icon.corner[class*="bottom right"] { + top: auto; + left: auto; + right: @borderedGroupCornerOffset; + bottom: @borderedGroupCornerOffset; + } + i.bordered.icons .icon.corner[class*="top right"], + i.circular.icons .icon.corner[class*="top right"] { + top: @borderedGroupCornerOffset; + left: auto; + right: @borderedGroupCornerOffset; + bottom: auto; + } + i.bordered.icons .icon.corner[class*="top left"], + i.circular.icons .icon.corner[class*="top left"] { + top: @borderedGroupCornerOffset; + left: @borderedGroupCornerOffset; + right: auto; + bottom: auto; + } + i.bordered.icons .icon.corner[class*="bottom left"], + i.circular.icons .icon.corner[class*="bottom left"] { + top: auto; + left: @borderedGroupCornerOffset; + right: auto; + bottom: @borderedGroupCornerOffset; + } + } +} - /* Deprecated *In/Out Naming Conflict) */ - .generateIcons(@icon-deprecated-map,false); +.generateIcons(@map, @fontFamily: false, @pseudo: before) { + each(@map, { + @escapedKey: replace(@key, "^([0-9])", "\3$1 "); + @normalizedKey: replace(@escapedKey, "_", @iconClassSeparator, "g"); + @unorderedKey: e(%(".%s::%s",@normalizedKey, @pseudo)); + @orderedKey: e(%('[%s*="%s"]::%s', @iconForcedAttribute, @normalizedKey, @pseudo)); + @selectorKey: if(@iconForcedOrder or @iconClassSeparator = " ", @orderedKey, @unorderedKey); + i.icon@{selectorKey} { + content: "@{value}"; + & when not (@fontFamily = false) { + font-family: @fontFamily; + } + } + }); } -& when (@variationIconSolid) { - /******************************* - Solid Icons - *******************************/ +& when (@variationIconDeprecated) { + /* Deprecated *In/Out Naming Conflict) */ + .generateIcons(@icon-deprecated-map); +} - /* Icons */ - .generateIcons(@icon-map,false); - & when (@variationIconAliases) { +& when (@variationIconSolid) { + /******************************* + Solid Icons + *******************************/ - /* Aliases */ - .generateIcons(@icon-aliases-map,false); - } + /* Icons */ + .generateIcons(@icon-map); + & when (@variationIconAliases) { + /* Aliases */ + .generateIcons(@icon-aliases-map); + } } & when (@variationIconOutline) { - /******************************* - Outline Icons - *******************************/ - - i.icon.outline { - font-family: @outlineFontName; - } + /******************************* + Outline Icons + *******************************/ - /* Icons */ - .generateIcons(@icon-outline-map,false); - & when (@variationIconAliases) { + i.icon.outline { + font-family: @outlineFontName; + } - /* Aliases */ - .generateIcons(@icon-outline-aliases-map,false); - } + /* Icons */ + .generateIcons(@icon-outline-map); + & when (@variationIconAliases) { + /* Aliases */ + .generateIcons(@icon-outline-aliases-map); + } } & when (@variationIconThin) { - /******************************* - Thin Icons - *******************************/ - - /* Icons */ - i.icon.thin { - font-family: @thinFontName; - } - .generateIcons(@icon-thin-map,false); - & when (@variationIconAliases) { - - /* Aliases */ - .generateIcons(@icon-thin-aliases-map,false); - } + /******************************* + Thin Icons + *******************************/ + + /* Icons */ + i.icon.thin { + font-family: @thinFontName; + } + .generateIcons(@icon-thin-map); + & when (@variationIconAliases) { + /* Aliases */ + .generateIcons(@icon-thin-aliases-map); + } +} + +& when (@variationIconBrand) { + /******************************* + Brand Icons + *******************************/ + + /* Icons */ + .generateIcons(@icon-brand-map, @brandFontName); + & when (@variationIconAliases) { + /* Aliases */ + .generateIcons(@icon-brand-aliases-map, @brandFontName); + } } -& when(@variationIconBrand) { - /******************************* - Brand Icons - *******************************/ +& when (@variationIconDuotone) { + /******************************* + Duotone Icons + *******************************/ - /* Icons */ - .generateIcons(@icon-brand-map,@brandFontName); - & when (@variationIconAliases) { + /* Make duotone icons use the proper font */ + i.icon.duotone { + font-family: @duotoneFontName; + + /* To position the secondary layer on top of the first layer */ + position: relative; + } + + /* Set the default opacity levels and colors for each layer */ + i.icon.duotone::before { + color: @duotonePrimaryColor; + opacity: @duotonePrimaryOpacity; + } - /* Aliases */ - .generateIcons(@icon-brand-aliases-map,@brandFontName); - } + i.icon.duotone::after { + /* Position secondary layer to the left, centered horizontally and aligned vertically to flex with different line heights */ + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + text-align: center; + color: @duotoneSecondaryColor; + opacity: @duotoneSecondaryOpacity; + } + + .generateIcons(@icon-duotone-map); + .generateIcons(@icon-duotone-secondary-map, false, after); + + & when (@variationIconAliases) { + /* Aliases */ + .generateIcons(@icon-duotone-aliases-map); + .generateIcons(@icon-duotone-secondary-aliases-map, false, after); + } + + /* + * Colors for duotone icons, in the form `primary-secondary`(e.g. `black-grey duotone icon`). + */ + & when not (@variationIconColors = false) { + each(@variationIconColors, { + @color: @value; + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + i.icon.duotone[class*="@{color}-"]::before, + i.icon.duotone[class*="-@{color}"]::after { + color: @c; + } + + & when (@variationIconInverted) { + i.icon.inverted.duotone[class*="@{color}-"]::before, + i.icon.inverted.duotone[class*="-@{color}"]::after { + color: @l; + } + } + }); + } } .loadUIOverrides(); diff --git a/definitions/elements/image.less b/definitions/elements/image.less index 651b81e..348e3fa 100644 --- a/definitions/elements/image.less +++ b/definitions/elements/image.less @@ -1,321 +1,310 @@ /*! * # Fomantic-UI - Image - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'image'; - -@import (multiple) '../../theme.config'; +@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; + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: @placeholderColor; } img.ui.image { - display: block; + display: block; } .ui.image svg, .ui.image img { - display: block; - max-width: 100%; - height: auto; + display: block; + max-width: 100%; + height: auto; } - /******************************* States *******************************/ .ui.hidden.images, .ui.ui.hidden.image { - display: none; + display: none; } .ui.hidden.transition.images, .ui.hidden.transition.image { - display: block; - visibility: hidden; + display: block; + visibility: hidden; } .ui.images > .hidden.transition { - display: inline-block; - visibility: hidden; + display: inline-block; + visibility: hidden; } & when (@variationImageDisabled) { - .ui.disabled.images, - .ui.disabled.image { - cursor: default; - opacity: @disabledOpacity; - } + .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; - } + /* -------------- + 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; - } + /* ------------------ + 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; - } + /* -------------- + 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; - } + /* -------------- + 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; - } + /* -------------- + Circular + --------------- */ + + .ui.circular.images, + .ui.circular.image { + overflow: hidden; + } + + .ui.circular.images .image, + .ui.circular.image, + .ui.circular.images .image > *, + .ui.circular.image > * { + 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; - } + /* -------------- + 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; - } + /* -------------- + 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; + 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; - } + /* ------------------- + 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; - } + /* ------------------- + 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; - } + .ui.centered.image { + display: block; + margin-left: auto; + margin-right: auto; + } + .ui.centered.images { + display: flex; + flex-flow: row 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; + 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; - } - }) + 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; - } + /******************************* + Groups + *******************************/ + + .ui.images { + font-size: 0; + margin: 0 -@imageHorizontalMargin; + } + + .ui.images .image, + .ui.images > img, + .ui.images > svg { + display: inline-block; + margin: 0 @imageHorizontalMargin @imageVerticalMargin; + } } .loadUIOverrides(); diff --git a/definitions/elements/input.less b/definitions/elements/input.less index 47817c0..9964448 100644 --- a/definitions/elements/input.less +++ b/definitions/elements/input.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Input - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,803 +12,797 @@ Theme *******************************/ -@type : 'element'; -@element : 'input'; - -@import (multiple) '../../theme.config'; +@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; + 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; - - background: @background; - border: @border; - color: @inputColor; - border-radius: @borderRadius; - transition: @transition; - - box-shadow: @boxShadow; - &:not([type="color"]) { - padding: @padding; - } - &::-webkit-calendar-picker-indicator { - padding: 0; - opacity: @iconOpacity; - transition: @iconTransition; - cursor: pointer; - } + 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; + background: @background; + border: @border; + color: @inputColor; + border-radius: @borderRadius; + transition: @transition; + box-shadow: @boxShadow; + &:not([type="color"]) { + padding: @padding; + } + &::-webkit-calendar-picker-indicator { + padding: 0; + opacity: @iconOpacity; + transition: @iconTransition; + cursor: pointer; + } } - -/*-------------------- +/* -------------------- Placeholder ----------------------*/ +--------------------- */ /* browsers require these rules separate */ .ui.input > input::-webkit-input-placeholder { - color: @placeholderColor; + color: @placeholderColor; } .ui.input > input::-moz-placeholder { - color: @placeholderColor; - opacity: 1; + color: @placeholderColor; + opacity: 1; } -.ui.input > input:-ms-input-placeholder when (@supportIE){ - color: @placeholderColor; +.ui.input > input:-ms-input-placeholder when (@supportIE) { + 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; - } + /* -------------------- + Disabled + --------------------- */ + + .ui.disabled.input, + .ui.input:not(.disabled) input[disabled] { + opacity: @disabledOpacity; + } + + .ui.disabled.input > input, + .ui.input:not(.disabled) input[disabled] { + pointer-events: @disabledPointerEvents; + } } -/*-------------------- +/* -------------------- Active ----------------------*/ +--------------------- */ .ui.input > input:active, .ui.input.down input { - border-color: @downBorderColor; - background: @downBackground; - color: @downColor; - box-shadow: @downBoxShadow; + 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; - } + /* -------------------- + 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 > 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; + color: @placeholderFocusColor; } .ui.input.focus > input::-moz-placeholder, .ui.input > input:focus::-moz-placeholder { - color: @placeholderFocusColor; + color: @placeholderFocusColor; } & when (@supportIE) { - .ui.input.focus > input:-ms-input-placeholder, - .ui.input > input:focus:-ms-input-placeholder { - color: @placeholderFocusColor; - } + .ui.input.focus > input:-ms-input-placeholder, + .ui.input > input:focus:-ms-input-placeholder { + color: @placeholderFocusColor; + } } - & when not (@variationInputStates = false) { - /*-------------------- - States - ---------------------*/ - each(@variationInputStates, { - @state: @value; - - .ui.input.@{state} > input { - background-color: @formStates[@@state][background]; - border-color: @formStates[@@state][borderColor]; - color: @formStates[@@state][color]; - box-shadow: @formStates[@@state][boxShadow]; - } - & when (@state=error) { - .ui.input > input:not(:placeholder-shown):invalid { - background-color: @formStates[@@state][background]; - border-color: @formStates[@@state][borderColor]; - color: @formStates[@@state][color]; - box-shadow: @formStates[@@state][boxShadow]; - } - .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){ - 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 when (@supportIE) { - 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 when (@supportIE){ - color: @formStates[@@state][inputPlaceholderFocusColor] !important; - } - }) + /* -------------------- + States + --------------------- */ + each(@variationInputStates, { + @state: @value; + + .ui.input.@{state} > input { + background-color: @formStates[@@state][background]; + border-color: @formStates[@@state][borderColor]; + color: @formStates[@@state][color]; + box-shadow: @formStates[@@state][boxShadow]; + } + & when (@state=error) and (@variationInputInvalid) { + .ui.input > input:not(:placeholder-shown):invalid { + background-color: @formStates[@@state][background]; + border-color: @formStates[@@state][borderColor]; + color: @formStates[@@state][color]; + box-shadow: @formStates[@@state][boxShadow]; + } + .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){ + 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 when (@supportIE) { + 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 when (@supportIE){ + 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 when (@supportIE) { - color: @transparentInvertedPlaceholderColor; - } - } + /* -------------------- + 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 when (@supportIE) { + 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:not(.corner) > textarea, - .ui.ui.ui.ui.icon.input:not(.corner) > 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"]:not([class*="left corner"]).input > textarea, - .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input { - padding-left: @iconMargin; - } - .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea, - .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input { - padding-right: @horizontalPadding; - } - - /* Focus */ - .ui.input > input:focus::-webkit-calendar-picker-indicator, - .ui.icon.input > textarea:focus ~ i.icon, - .ui.icon.input > input:focus ~ i.icon { - opacity: @iconFocusOpacity; - } + /* -------------------- + 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:not(.corner) > textarea, + .ui.ui.ui.ui.icon.input:not(.corner) > 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"]:not([class*="left corner"]).input > textarea, + .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input { + padding-left: @iconMargin; + } + .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea, + .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input { + padding-right: @horizontalPadding; + } + + /* Focus */ + .ui.input > input:focus::-webkit-calendar-picker-indicator, + .ui.icon.input > textarea:focus ~ i.icon, + .ui.icon.input > input:focus ~ i.icon { + opacity: @iconFocusOpacity; + } } & when (@variationInputLabeled) { - /*-------------------- - Labeled - ---------------------*/ + /* -------------------- + 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; - } + /* 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"]).input > .ui.dropdown, - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea, - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input { - padding-right: @labeledMargin; - } - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown, - .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; - } - .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { - margin-right: @labeledIconMargin; - } - - /* Left Labeled */ - .ui[class*="left icon"].input > .ui.dropdown, - .ui[class*="left corner labeled"].input > .ui.dropdown, - .ui[class*="left corner labeled"].input > textarea, - .ui[class*="left corner labeled"].input > input { - padding-left: @labeledMargin; - } - & when (@variationInputIcon) { - .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown, - .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea, - .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input { - padding-right: @labeledIconInputMargin; - } - .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown, - .ui[class*="left corner labeled"][class*="left icon"].input > textarea, - .ui[class*="left corner labeled"][class*="left icon"].input > input { - padding-left: @labeledAndIconMargin; - } - .ui[class*="left corner labeled"].icon.input > i.icon { - margin-left: @labeledIconMargin; - } - .ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input { - padding-right: @labeledMargin; - } - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input { - padding-right: @labeledMargin * 2; - } - } - - .ui[class*="left icon"].input > .ui.dropdown, - .ui[class*="left corner labeled"].input > .ui.dropdown { - & > .search { - padding-left: @labeledMargin; - } - & > .menu { - padding-left: @labeledIconMargin; - & > .item { + /* 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"]).input > .ui.dropdown, + .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea, + .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input { + padding-right: @labeledMargin; + } + .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown, + .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; + } + .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { + margin-right: @labeledIconMargin; + } + + /* Left Labeled */ + .ui[class*="left icon"].input > .ui.dropdown:first-child, + .ui[class*="left icon"].input > i.icon + .ui.dropdown, + .ui[class*="left corner labeled"].input > .ui.dropdown, + .ui[class*="left corner labeled"].input > textarea, + .ui[class*="left corner labeled"].input > input { padding-left: @labeledMargin; - margin-left: -@labeledIconMargin; - } - } - } - .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown { - & > .search { - padding-left: @labeledAndIconMargin; - } - & > .menu > .item { - padding-left: @labeledAndIconMargin; - } - } - .ui.icon.input:not([class*="left icon"]) > .ui.dropdown, - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown { - & > .search { - padding-right: @labeledMargin + @labeledIconInputMargin; - } - & > .remove.icon, - > .dropdown.icon { - padding-right: @labeledMargin; - } - } - .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown { - & > .search { - padding-right: @labeledAndIconMargin + @labeledIconInputMargin; - } - & > .remove.icon, - > .dropdown.icon { - padding-right: @labeledAndIconMargin; - } - } - .ui.icon.input > .ui.visible.dropdown ~ i.icon, - .ui.icon.input > .ui.active.dropdown ~ i.icon, - .ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label, - .ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label { - z-index: @labeledDropdownZIndex; - } + } + & when (@variationInputIcon) { + .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown, + .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea, + .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input { + padding-right: @labeledIconInputMargin; + } + .ui.ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown, + .ui.ui[class*="left corner labeled"][class*="left icon"].input > textarea, + .ui.ui[class*="left corner labeled"][class*="left icon"].input > input { + padding-left: @labeledAndIconMargin; + } + .ui[class*="left corner labeled"].icon.input > i.icon { + margin-left: @labeledIconMargin; + } + .ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input { + padding-right: @labeledMargin; + } + .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input { + padding-right: @labeledMargin * 2; + } + } + + .ui[class*="left icon"].input > .ui.dropdown, + .ui[class*="left corner labeled"].input > .ui.dropdown { + & > .search { + padding-left: @labeledMargin; + } + & > .menu { + padding-left: @labeledIconMargin; + & > .item { + padding-left: @labeledMargin; + margin-left: -@labeledIconMargin; + } + } + } + .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown { + & > .search { + padding-left: @labeledAndIconMargin; + } + & > .menu > .item { + padding-left: @labeledAndIconMargin; + } + } + .ui.icon.input:not([class*="left icon"]) > .ui.dropdown, + .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown { + & > .search { + padding-right: @labeledMargin + @labeledIconInputMargin; + } + & > .remove.icon, + > .dropdown.icon { + padding-right: @labeledMargin; + } + } + @supports selector(:has(.f)) { + .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon { + padding-right: initial; + } + .ui.icon.input:not([class*="left icon"]):not(:has(.ui.dropdown ~ input)) > .ui.dropdown > .dropdown.icon { + padding-right: @labeledMargin; + } + } + .ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown { + & > .search { + padding-right: @labeledAndIconMargin + @labeledIconInputMargin; + } + & > .remove.icon, + > .dropdown.icon { + padding-right: @labeledAndIconMargin; + } + } + .ui.icon.input > .ui.visible.dropdown ~ i.icon, + .ui.icon.input > .ui.active.dropdown ~ i.icon, + .ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label, + .ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label { + z-index: @labeledDropdownZIndex; + } } & when (@variationInputIcon) { - .ui.icon.input > textarea ~ i.icon { - height: @textareaIconHeight; - } - :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { - height: @transparentTextareaIconHeight; - } + .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; - } + /* 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)) and not (@variationInputStates = false) { - /* Labeled and action input states */ - each(@variationInputStates, { - @state: @value; - @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; - } - }) + /* Labeled and action input states */ + each(@variationInputStates, { + @state: @value; + @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; - } + /* -------------------- + 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; - } + /* -------------------- + Inverted + --------------------- */ + + /* Standard */ + .ui.inverted.input > input { + border: none; + } } & when (@variationInputFluid) { - /*-------------------- - Fluid - ---------------------*/ - - .ui.fluid.input { - display: flex; - } - .ui.fluid.input > input { - width: 0 !important; - } -} + /* -------------------- + Fluid + --------------------- */ + .ui.fluid.input { + display: flex; + } + .ui.fluid.input > input { + width: 0 !important; + } +} & when (@variationInputFile) { - /*-------------------- - File - ---------------------*/ - - /* width hack for chrome/edge */ - .ui.file.input { - width: 100%; - & input[type="file"] { - width: 0; - } - } - - .ui.form .field > input[type="file"], - .ui.file.input:not(.action) input[type="file"] { - padding: 0; - } - - .ui.action.file.input input[type="file"]::-webkit-file-upload-button { - display: none; - } - .ui.form .field input[type="file"]::-webkit-file-upload-button, - .ui.file.input input[type="file"]::-webkit-file-upload-button { - border: none; - cursor: pointer; - padding: @padding; - margin-right: @fileButtonMargin; - background: @fileButtonBackground; - font-weight: @fileButtonFontWeight; - color: @fileButtonTextColor; - &:hover { - background: @fileButtonBackgroundHover; - color: @fileButtonTextColor; - } - } - & when (@supportIE) { - .ui.action.file.input input[type="file"]::-ms-browse { - display: none; - } - .ui.form .field input[type="file"]::-ms-browse, - .ui.file.input input[type="file"]::-ms-browse { - border: none; - cursor: pointer; - padding: @padding; - margin: 0; - background: @fileButtonBackground; - font-weight: @fileButtonFontWeight; - color: @fileButtonTextColor; - &:hover { - background: @fileButtonBackgroundHover; + /* -------------------- + File + --------------------- */ + + /* width hack for chrome/edge */ + .ui.file.input { + width: 100%; + & input[type="file"] { + width: 0; + } + } + + .ui.form .field > input[type="file"], + .ui.file.input:not(.action) input[type="file"] { + padding: 0; + } + + .ui.action.file.input input[type="file"]::-webkit-file-upload-button { + display: none; + } + .ui.form .field input[type="file"]::-webkit-file-upload-button, + .ui.file.input input[type="file"]::-webkit-file-upload-button { + border: none; + cursor: pointer; + padding: @padding; + margin-right: @fileButtonMargin; + background: @fileButtonBackground; + font-weight: @fileButtonFontWeight; color: @fileButtonTextColor; - } - } - /* IE needs additional styling for input field :S */ - @media all and (-ms-high-contrast: none) { - .ui.file.input > input[type="file"], - input[type="file"].ui.file.input { - padding: 0 !important; - } - } - } - - .ui.action.file.input input[type="file"]::file-selector-button { - display: none; - } - .ui.form .field input[type="file"]::file-selector-button, - .ui.file.input input[type="file"]::file-selector-button { - border: none; - cursor: pointer; - padding: @padding; - margin-right: @fileButtonMargin; - background: @fileButtonBackground; - font-weight: @fileButtonFontWeight; - color: @fileButtonTextColor; - &:hover { - background: @fileButtonBackgroundHover; - color: @fileButtonTextColor; - } - } - - .ui.form .field input[type="file"]:required:invalid, - .ui.file.input input[type="file"]:required:invalid { - color: @negativeTextColor; - background: @negativeBackgroundColor ; - border-color: @negativeBorderColor; - } - - input[type="file"].ui.invisible.file.input, - .ui.invisible.file.input input[type="file"] { - left: -99999px; - position: absolute; - } - - input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary), - .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) { - background: @fileButtonBackgroundHover; - color: @hoveredTextColor; - &.inverted { - background: @fileButtonInvertedBackgroundHover; - } - } - - /* this is related to existing buttons, so the button color variable is used here! */ - & when not (@variationButtonColors = false) { - each(@variationButtonColors, { - @color: @value; - @h: @colors[@@color][hover]; - @lh: @colors[@@color][lightHover]; - - input[type="file"].ui.file.input:focus + label.ui.@{color}.button:not(.basic):not(.tertiary), - .ui.file.input input[type="file"]:focus + label.ui.@{color}.button:not(.basic):not(.tertiary) { - background-color: @h; - color: @white; - &.inverted when (@variationButtonInverted) { - background-color: @lh; - } - } - }) - } - - & when not (@variationInputColors = false) { - each(@variationInputColors, { - @color: @value; - @c: @colors[@@color][color]; - @h: @colors[@@color][hover]; - - input[type="file"].ui.@{color}.file.input::-webkit-file-upload-button, - .ui.@{color}.file.input input[type="file"]::-webkit-file-upload-button { - background: @c; - color: @white; &:hover { - background: @h; - } - } - & when (@supportIE) { - input[type="file"].ui.@{color}.file.input::-ms-browse, - .ui.@{color}.file.input input[type="file"]::-ms-browse { - background: @c; - color: @white; - &:hover { - background: @h; - } - } - } - input[type="file"].ui.@{color}.file.input::file-selector-button, - .ui.@{color}.file.input input[type="file"]::file-selector-button { - background: @c; - color: @white; + background: @fileButtonBackgroundHover; + color: @fileButtonTextColor; + } + } + & when (@supportIE) { + .ui.action.file.input input[type="file"]::-ms-browse { + display: none; + } + .ui.form .field input[type="file"]::-ms-browse, + .ui.file.input input[type="file"]::-ms-browse { + border: none; + cursor: pointer; + padding: @padding; + margin: 0; + background: @fileButtonBackground; + font-weight: @fileButtonFontWeight; + color: @fileButtonTextColor; + &:hover { + background: @fileButtonBackgroundHover; + color: @fileButtonTextColor; + } + } + + /* IE needs additional styling for input field :S */ + @media all and (-ms-high-contrast: none) { + .ui.file.input > input[type="file"], + input[type="file"].ui.file.input { + padding: 0 !important; + } + } + } + + .ui.action.file.input input[type="file"]::file-selector-button { + display: none; + } + .ui.form .field input[type="file"]::file-selector-button, + .ui.file.input input[type="file"]::file-selector-button { + border: none; + cursor: pointer; + padding: @padding; + margin-right: @fileButtonMargin; + background: @fileButtonBackground; + font-weight: @fileButtonFontWeight; + color: @fileButtonTextColor; &:hover { - background: @h; + background: @fileButtonBackgroundHover; + color: @fileButtonTextColor; + } + } + & when (@variationInputInvalid) { + .ui.form .field input[type="file"]:required:invalid, + .ui.file.input input[type="file"]:required:invalid { + color: @negativeTextColor; + background: @negativeBackgroundColor; + border-color: @negativeBorderColor; } - } - }) - } + } + + input[type="file"].ui.invisible.file.input, + .ui.invisible.file.input input[type="file"] { + left: -99999px; + position: absolute; + } + + input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary), + .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) { + background: @fileButtonBackgroundHover; + color: @hoveredTextColor; + &.inverted { + background: @fileButtonInvertedBackgroundHover; + } + } + + /* this is related to existing buttons, so the button color variable is used here! */ + & when not (@variationButtonColors = false) { + each(@variationButtonColors, { + @color: @value; + @h: @colors[@@color][hover]; + @lh: @colors[@@color][lightHover]; + + input[type="file"].ui.file.input:focus + label.ui.@{color}.button:not(.basic):not(.tertiary), + .ui.file.input input[type="file"]:focus + label.ui.@{color}.button:not(.basic):not(.tertiary) { + background-color: @h; + color: @white; + &.inverted when (@variationButtonInverted) { + background-color: @lh; + } + } + }); + } + + & when not (@variationInputColors = false) { + each(@variationInputColors, { + @color: @value; + @c: @colors[@@color][color]; + @h: @colors[@@color][hover]; + + input[type="file"].ui.@{color}.file.input::-webkit-file-upload-button, + .ui.@{color}.file.input input[type="file"]::-webkit-file-upload-button { + background: @c; + color: @white; + &:hover { + background: @h; + } + } + & when (@supportIE) { + input[type="file"].ui.@{color}.file.input::-ms-browse, + .ui.@{color}.file.input input[type="file"]::-ms-browse { + background: @c; + color: @white; + &:hover { + background: @h; + } + } + } + input[type="file"].ui.@{color}.file.input::file-selector-button, + .ui.@{color}.file.input input[type="file"]::file-selector-button { + background: @c; + color: @white; + &:hover { + background: @h; + } + } + }); + } } -/*-------------------- +/* -------------------- Size ----------------------*/ +--------------------- */ .ui.input { - font-size: @relativeMedium; + font-size: @relativeMedium; } & when not (@variationInputSizes = false) { - each(@variationInputSizes, { - @s: @{value}InputSize; - .ui.@{value}.input { - font-size: @@s; - } - }) + each(@variationInputSizes, { + @s: @{value}InputSize; + .ui.@{value}.input { + font-size: @@s; + } + }); } .loadUIOverrides(); diff --git a/definitions/elements/label.less b/definitions/elements/label.less index d86fea6..338e60a 100644 --- a/definitions/elements/label.less +++ b/definitions/elements/label.less @@ -1,1036 +1,1014 @@ /*! * # Fomantic-UI - Label - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'label'; +@type: "element"; +@element: "label"; -@import (multiple) '../../theme.config'; +@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; + 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; + margin-left: 0; } .ui.label:last-child { - margin-right: 0; + margin-right: 0; } /* Link */ a.ui.label { - cursor: pointer; + cursor: pointer; } /* Inside Link */ .ui.label > a { - cursor: pointer; - color: inherit; - opacity: @linkOpacity; - transition: @linkTransition; + cursor: pointer; + color: inherit; + opacity: @linkOpacity; + transition: @linkTransition; } .ui.label > a:hover { - opacity: 1; + opacity: 1; } /* Image */ .ui.label > img { - width: auto !important; - vertical-align: middle; - height: @imageHeight; + width: auto !important; + vertical-align: middle; + height: @imageHeight; } /* Icon */ .ui.ui[class*="left icon"].label > .icon, .ui.label > .icon { - width: auto; - margin: 0 @iconDistance 0 0; + 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; + display: inline-block; + vertical-align: top; + font-weight: @detailFontWeight; + margin-left: @detailMargin; + opacity: @detailOpacity; } .ui.label > .detail .icon { - margin: 0 @detailIconDistance 0 0; + margin: 0 @detailIconDistance 0 0; } /* Removable label */ .ui.label > .close.icon, .ui.label > .delete.icon { - cursor: pointer; - font-size: @deleteSize; - opacity: @deleteOpacity; - transition: @deleteTransition; + cursor: pointer; + font-size: @deleteSize; + opacity: @deleteOpacity; + transition: @deleteTransition; } .ui.label > .close.icon:hover, .ui.label > .delete.icon:hover { - opacity: 1; + opacity: 1; } /* Backward compatible positioning */ .ui.label[class*="left icon"] > .close.icon, .ui.label[class*="left icon"] > .delete.icon { - margin: 0 @deleteMargin 0 0; - &.right { - margin: 0 0 0 @deleteMargin; - } + margin: 0 @deleteMargin 0 0; + &.right { + margin: 0 0 0 @deleteMargin; + } } .ui.label:not(.icon) > .close.icon, .ui.label:not(.icon) > .delete.icon { - margin: 0 0 0 @deleteMargin; + margin: 0 0 0 @deleteMargin; } /* Label for only an icon */ .ui.icon.label > .icon { - margin: 0 auto; + margin: 0 auto; } /* Right Side Icon */ .ui[class*="right icon"].label > .icon { - margin: 0 0 0 @iconDistance; + margin: 0 0 0 @iconDistance; } -/*------------------- +/* ------------------- Group ---------------------*/ +-------------------- */ .ui.labels > .label { - margin: 0 @groupHorizontalMargin @groupVerticalMargin 0; + margin: 0 @groupHorizontalMargin @groupVerticalMargin 0; } - -/*------------------- +/* ------------------- Coupling ---------------------*/ +-------------------- */ .ui.header > .ui.label { - margin-top: @lineHeightOffset; + 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.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.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.left.attached.label { + border-bottom-left-radius: 0; } -.ui.top.attached.segment > .ui.bottom.right.attached.label { - border-bottom-right-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; + margin-top: @attachedSegmentPadding !important; } .ui.bottom.attached.label ~ :last-child:not(.attached) { - margin-top:0; - margin-bottom: @attachedSegmentPadding !important; + margin-top: 0; + margin-bottom: @attachedSegmentPadding !important; } .ui.segment:not(.basic) > .ui.top.attached.label { - margin-top: @attachedOffset; + margin-top: @attachedOffset; } .ui.segment:not(.basic) > .ui.bottom.attached.label { - margin-bottom: @attachedOffset; + margin-bottom: @attachedOffset; } .ui.segment:not(.basic) > .ui.attached.label:not(.right) { - margin-left: @attachedOffset; + margin-left: @attachedOffset; } .ui.segment:not(.basic) > .ui.right.attached.label { - margin-right: @attachedOffset; + margin-right: @attachedOffset; } .ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { - width: @attachedWidthOffset; + 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 { + 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 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.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; + .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; - } - } + /* ------------------- + 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; + /* ------------------- + 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; + } - 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; - } + /* 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; - } + /* ------------------- + 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; - } + /* ------------------- + 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 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; - } + .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; - } + .ui.disabled.labels .label, + .ui.label.disabled { + opacity: @disabledOpacity; + pointer-events: @disabledPointerEvents; + } } -/*------------------- + +/* ------------------- Hover ---------------------*/ +-------------------- */ .ui.labels a.label:hover, a.ui.label:hover { - background-color: @labelHoverBackgroundColor; - border-color: @labelHoverBackgroundColor; - - background-image: @labelHoverBackgroundImage; - color: @labelHoverTextColor; + background-color: @labelHoverBackgroundColor; + border-color: @labelHoverBackgroundColor; + background-image: @labelHoverBackgroundImage; + color: @labelHoverTextColor; } .ui.labels a.label:hover::before, a.ui.label:hover::before { - color: @labelHoverTextColor; + color: @labelHoverTextColor; } -/*------------------- +/* ------------------- Active ---------------------*/ +-------------------- */ .ui.active.label { - background-color: @labelActiveBackgroundColor; - border-color: @labelActiveBackgroundColor; - - background-image: @labelActiveBackgroundImage; - color: @labelActiveTextColor; + background-color: @labelActiveBackgroundColor; + border-color: @labelActiveBackgroundColor; + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; } .ui.active.label::before { - background-color: @labelActiveBackgroundColor; - background-image: @labelActiveBackgroundImage; - color: @labelActiveTextColor; + 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; + 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; + background-color: @labelActiveHoverBackgroundColor; + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; } - -/*------------------- +/* ------------------- Visible ---------------------*/ +-------------------- */ .ui.labels.visible .label, .ui.label.visible:not(.dropdown) { - display: inline-block !important; + display: inline-block !important; } -/*------------------- +/* ------------------- Hidden ---------------------*/ +-------------------- */ .ui.labels.hidden .label, .ui.label.hidden { - display: none !important; + 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; - } - } + /* ------------------- + 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; - } + /* ------------------- + Fluid + -------------------- */ + + .ui.label.fluid, + .ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; + } +} + +& when (@variationLabelCentered) { + .ui.centered.labels .label, + .ui.centered.label { + text-align: center; + } } & 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; - } + /* ------------------- + 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 ---------------------*/ +-------------------- */ & when not (@variationLabelColors = false) { - each(@variationLabelColors, { - @color: @value; - @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; + each(@variationLabelColors, { + @color: @value; + @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; } - } - & when (@variationLabelRibbon) { - /* Inverted Ribbon */ - .ui.ui.ui.inverted.@{color}.ribbon.label { - border-color: @_labelInvertedRibbonShadow; + /* Link */ + .ui.@{color}.labels a.label:hover, + a.ui.ui.ui.@{color}.label:hover { + background-color: @_labelHover; + border-color: @_labelHover; + color: @_labelHoverTextColor; } - } - & 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; - } + & when (@variationLabelRibbon) { + /* Ribbon */ + .ui.ui.ui.@{color}.ribbon.label { + border-color: @_labelRibbonShadow; + } } - .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 (@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 (@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)); - } + & 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; + margin: 0 @horizontalLabelMargin 0 0; + padding: @horizontalLabelVerticalPadding @horizontalPadding; + min-width: @horizontalLabelMinWidth; + text-align: center; } & when (@variationLabelCircular) { - /*------------------- - Circular - --------------------*/ + /* ------------------- + 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; + } +} - .ui.circular.labels .label, - .ui.circular.label { - min-width: @circularMinSize; - min-height: @circularMinSize; +& when (@variationLabelPointing) { + /* ------------------- + Pointing + -------------------- */ - padding: @circularPadding !important; + .ui.pointing.label { + position: relative; + } - 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; - } -} + .ui.attached.pointing.label { + position: absolute; + } -& 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; - } - } + .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; + 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; - } + /* ------------------ + 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; + font-size: @medium; } & when not (@variationLabelSizes = false) { - each(@variationLabelSizes, { - @s: @@value; - .ui.@{value}.labels .label, - .ui.@{value}.label { - font-size: @s; - } - }) + each(@variationLabelSizes, { + @s: @@value; + .ui.@{value}.labels .label, + .ui.@{value}.label { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/elements/list.less b/definitions/elements/list.less index 0450786..f52f829 100644 --- a/definitions/elements/list.less +++ b/definitions/elements/list.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - List - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,10 +12,10 @@ Theme *******************************/ -@type : 'element'; -@element : 'list'; +@type: "element"; +@element: "list"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* List @@ -24,23 +24,23 @@ ul.ui.list, ol.ui.list, .ui.list { - list-style-type: @listStyleType; - margin: @margin; - padding: @verticalPadding @horizontalPadding; + 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; + 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; + margin-bottom: 0; + padding-bottom: 0; } /******************************* @@ -52,219 +52,218 @@ 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; + 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; + 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; + 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; + padding-bottom: 0; } /* Child List */ ul.ui.list ul, ol.ui.list ol, .ui.list .list:not(.icon) { - clear: both; - margin: 0; - padding: @childListPadding; + 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; + 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; - } + /* 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; - } + /* 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; + 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; - } + .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)); - } + .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 > 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; + margin-left: 0; + padding-left: 0; } & when (@variationListHeader) { - /* Header */ - .ui.list .list > .item .header, - .ui.list > .item .header { - display: block; - margin: 0; - font-family: @itemHeaderFontFamily; - font-weight: @itemHeaderFontWeight; - color: @itemHeaderColor; - } + /* Header */ + .ui.list .list > .item .header, + .ui.list > .item .header { + display: block; + margin: 0; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; + } } & when (@variationListDescription) { - /* Description */ - .ui.list .list > .item .description, - .ui.list > .item .description { - display: block; - color: @itemDescriptionColor; - } + /* 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; + cursor: pointer; } /* Linking Item */ .ui.list .list > a.item, .ui.list > a.item { - cursor: pointer; - color: @itemLinkColor; + cursor: pointer; + color: @itemLinkColor; } .ui.list .list > a.item:hover, .ui.list > a.item:hover { - color: @itemLinkHoverColor; + 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; - } + /* 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; + } } & when (@variationListHeader) { - /* 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; - } + /* 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; - } + /* 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; + } } /******************************* @@ -273,94 +272,91 @@ ol.ui.list ol li, .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; + 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; + border: none; + background: none; } .ui.menu .ui.list .list > .item:first-child, .ui.menu .ui.list > .item:first-child { - padding-top: 0; + padding-top: 0; } .ui.menu .ui.list .list > .item:last-child, .ui.menu .ui.list > .item:last-child { - padding-bottom: 0; + 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, + /* ------------------- + 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 > .item > i.icon + .content { - float: none; - display: inline-block; - width: auto; + .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 (@variationListImage) { - .ui.horizontal.list > .item > .image { - display: inline-block; + & 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; + } } - } } /******************************* @@ -368,33 +364,33 @@ ol.ui.list ol li, *******************************/ & 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; - } - } + /* ------------------- + 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; - } + .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; + } } /******************************* @@ -402,629 +398,629 @@ ol.ui.list ol li, *******************************/ & when (@variationListInverted) { - /*------------------- - Inverted - --------------------*/ - & when (@variationListIcon) { - .ui.inverted.list .list > a.item > i.icon, - .ui.inverted.list > a.item > i.icon { - color: @invertedIconLinkColor; - } - } - & when (@variationListHeader) { - .ui.inverted.list .list > .item .header, - .ui.inverted.list > .item .header { - color: @invertedHeaderColor; - } - } - & when (@variationListDescription) { - .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; - } + /* ------------------- + Inverted + -------------------- */ + & when (@variationListIcon) { + .ui.inverted.list .list > a.item > i.icon, + .ui.inverted.list > a.item > i.icon { + color: @invertedIconLinkColor; + } + } + & when (@variationListHeader) { + .ui.inverted.list .list > .item .header, + .ui.inverted.list > .item .header { + color: @invertedHeaderColor; + } + } + & when (@variationListDescription) { + .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; - } + /* ------------------- + 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; - } - } + /* ------------------- + 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 - --------------------*/ + /* ------------------- + 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; + } - .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 (@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; - } + /* ------------------- + 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; - } + /* ------------------- + 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; - } - } + /* ------------------- + 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; - } - } + /* ------------------- + 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; - } + /* 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; - } - } + /* ------------------- + 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; + /* ------------------- + 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; } -} -& when (@variationListRelaxed) { - /*------------------- - Relaxed - --------------------*/ + /* Padding on all elements */ + .ui.celled.list > .item:first-child, + .ui.celled.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; + } - .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { - padding-top: @relaxedItemVerticalPadding; - } - .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: @relaxedItemVerticalPadding; - } + /* Sub Menu */ + .ui.celled.list .item .list > .item { + border-width: 0; + } + .ui.celled.list .list > .item:first-child { + border-top-width: 0; + } - & when (@variationListHorizontal) { - .ui.horizontal.relaxed.list .list > .item:not(:first-child), - .ui.horizontal.relaxed.list > .item:not(:first-child) { - padding-left: @relaxedHorizontalPadding; + & 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; + } } - .ui.horizontal.relaxed.list .list > .item:not(:last-child), - .ui.horizontal.relaxed.list > .item:not(:last-child) { - padding-right: @relaxedHorizontalPadding; + + & 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 (@variationListVeryRelaxed) { - /* Very Relaxed */ - .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { - padding-top: @veryRelaxedItemVerticalPadding; + + & 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; + } } - .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: @veryRelaxedItemVerticalPadding; + + & 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[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; - } - } - } + .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; + } + } + & when (@variationListVeryRelaxed) { + /* 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; + 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; - } - } - }) + 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/definitions/elements/loader.less b/definitions/elements/loader.less index beb8151..eef2db5 100644 --- a/definitions/elements/loader.less +++ b/definitions/elements/loader.less @@ -1,115 +1,112 @@ /*! * # Fomantic-UI - Loader - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ + /******************************* Theme *******************************/ -@type : 'element'; -@element : 'loader'; +@type: "element"; +@element: "loader"; -@import (multiple) '../../theme.config'; +@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%); + 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; + 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; + 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; - } + /* 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); - } + 100% { + transform: rotate(360deg); + } } -/*------------------- +/* ------------------- Coupling ---------------------*/ +-------------------- */ /* Show inside active dimmer */ .ui.dimmer > .loader { - display: block; + display: block; } /* Black Dimmer */ .ui.dimmer > .ui.loader { - color: @invertedLoaderTextColor; + color: @invertedLoaderTextColor; } .ui.dimmer > .ui.loader:not(.elastic)::before { - border-color: @invertedLoaderFillColor; + border-color: @invertedLoaderFillColor; } /* White Dimmer (Inverted) */ .ui.inverted.dimmer > .ui.loader { - color: @loaderTextColor; + color: @loaderTextColor; } .ui.inverted.dimmer > .ui.loader:not(.elastic)::before { - border-color: @loaderFillColor; + border-color: @loaderFillColor; } /******************************* @@ -117,121 +114,119 @@ *******************************/ & when (@variationLoaderText) { - /*------------------- - Text - --------------------*/ - - .ui.ui.ui.ui.text.loader { - width: auto; - height: auto; - text-align: center; - font-style: normal; - } + /* ------------------- + 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.indeterminate.loader::after { + animation-direction: @indeterminateDirection; + animation-duration: @indeterminateSpeed; + } } .ui.loader.active, .ui.loader.visible { - display: block; + display: block; } .ui.loader.disabled, .ui.loader.hidden { - display: none; + display: none; } /******************************* Variations *******************************/ - -/*------------------- +/* ------------------- Sizes ---------------------*/ +-------------------- */ .ui.loader { - width: @medium; - height: @medium; - font-size: @mediumFontSize; + width: @medium; + height: @medium; + font-size: @mediumFontSize; } .ui.loader::before, .ui.loader::after { - width: @medium; - height: @medium; - margin: @mediumOffset; + width: @medium; + height: @medium; + margin: @mediumOffset; } & when (@variationLoaderText) { - .ui.text.loader { - min-width: @medium; - padding-top: (@medium + @textDistance); - } + .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); - } - } - }) + 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 ---------------------*/ +-------------------- */ & when not (@variationLoaderColors = false) { - each(@variationLoaderColors, { - @color: @value; - @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):not(.segments):not(.card)::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):not(.segments):not(.card)::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; - } - }) + each(@variationLoaderColors, { + @color: @value; + @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):not(.segments):not(.card)::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):not(.segments):not(.card)::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, @@ -242,180 +237,190 @@ .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; + border-color: currentColor; } .ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before { - color: @invertedLoaderLineColor; + color: @invertedLoaderLineColor; } .ui.elastic.basic.loading.button::before, .ui.elastic.basic.loading.button::after { - color: @loaderLineColor; + color: @loaderLineColor; } .ui.double.loading.loading.loading.loading.button::after { - border-bottom-color: currentColor; + border-bottom-color: currentColor; } & when (@variationLoaderInline) { - /*------------------- - Inline - --------------------*/ - - .ui.inline.loader { - position: relative; - vertical-align: @inlineVerticalAlign; - margin: @inlineMargin; - left: 0; - top: 0; - transform: none; - } + /* ------------------- + 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; - } + .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; - } + /* 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; + 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; + border-bottom-color: transparent; } .ui.loading.loading.loading.loading.loading.loading.card::after, .ui.loading.loading.loading.loading.loading.loading.segments::after, .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; + border-left-color: @loaderFillColor; + border-right-color: @loaderFillColor; } .ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after, .ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after, .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; + border-bottom-color: @loaderFillColor; } & when (@variationLoaderElastic) { - /*------------------- - Elastic - --------------------*/ + /* ------------------- + Elastic + -------------------- */ - .ui.dimmer > .ui.elastic.loader { - color: @invertedLoaderLineColor; - } - .ui.inverted.dimmer > .ui.elastic.loader { - color: @loaderLineColor; - } - .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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):not(.segments):not(.card)::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; + .ui.dimmer > .ui.elastic.loader { + color: @invertedLoaderLineColor; } - } - & when (@variationLoaderSpeeds) { - .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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.inverted.dimmer > .ui.elastic.loader { + color: @loaderLineColor; } - .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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(0.27, 1.05, 0.92, 0.61); + animation-delay: 0.3s; } - .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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(0.27, 1.05, 0.92, 0.61); + // https://github.com/fomantic/Fomantic-UI/pull/363 + // stylelint-disable-next-line property-no-vendor-prefix + -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); + border-right-color: transparent; } - .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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; + & when (@variationLoaderInline) { + .ui.elastic.inline.loader:empty { + animation: loader 8s infinite linear; + } } - } - @keyframes elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent + & when (@variationLoaderSpeeds) { + .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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):not(.segments):not(.card)::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):not(.segments):not(.card)::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.2s; + } + .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::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; + } } - 1.1%, 50% { - border-left-color: inherit; + @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); + } } - 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); + @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/definitions/elements/placeholder.less b/definitions/elements/placeholder.less index ea95a66..5695579 100644 --- a/definitions/elements/placeholder.less +++ b/definitions/elements/placeholder.less @@ -1,59 +1,60 @@ /*! * # Fomantic-UI - Loader - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ + /******************************* Theme *******************************/ -@type : 'element'; -@element : 'placeholder'; +@type: "element"; +@element: "placeholder"; -@import (multiple) '../../theme.config'; +@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; + 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 - } +@keyframes placeholderShimmer { + 0% { + background-position: -@placeholderLoadingGradientWidth 0; + } + 100% { + background-position: @placeholderLoadingGradientWidth 0; + } } .ui.placeholder + .ui.placeholder { - margin-top: @consecutivePlaceholderSpacing; + margin-top: @consecutivePlaceholderSpacing; } .ui.placeholder + .ui.placeholder { - animation-delay: @placeholderAnimationInterval; + animation-delay: @placeholderAnimationInterval; } .ui.placeholder + .ui.placeholder + .ui.placeholder { - animation-delay: (@placeholderAnimationInterval * 2); + animation-delay: (@placeholderAnimationInterval * 2); } .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { - animation-delay: (@placeholderAnimationInterval * 3); + animation-delay: (@placeholderAnimationInterval * 3); } .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { - animation-delay: (@placeholderAnimationInterval * 4); + animation-delay: (@placeholderAnimationInterval * 4); } .ui.placeholder, @@ -61,188 +62,190 @@ .ui.placeholder .image.header::after, .ui.placeholder .line, .ui.placeholder .line::after { - background-color: @white; + background-color: @white; } .ui.placeholder.hidden { - display:none; + 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%; - } + /* 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; - } + /* 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; - } - } + /* 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; + 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; + 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; - } + /* 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; - } + .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 - --------------------*/ + /* ------------------- + Fluid + -------------------- */ - .ui.fluid.placeholder { - max-width: none; - } + .ui.fluid.placeholder { + max-width: none; + } } .loadUIOverrides(); diff --git a/definitions/elements/rail.less b/definitions/elements/rail.less index d7ffc51..b81ecb0 100644 --- a/definitions/elements/rail.less +++ b/definitions/elements/rail.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Rail - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,34 +12,34 @@ Theme *******************************/ -@type : 'element'; -@element : 'rail'; +@type: "element"; +@element: "rail"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Rails *******************************/ .ui.rail { - position: absolute; - top: 0; - width: @width; - height: @height; + 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; + 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; + left: 100%; + right: auto; + padding: 0 0 0 @splitDistance; + margin: 0 0 0 @splitDistance; } /******************************* @@ -47,101 +47,101 @@ *******************************/ & when (@variationRailInternal) { - /*-------------- - Internal - ---------------*/ - - .ui.left.internal.rail { - left: 0; - right: auto; - padding: 0 0 0 @splitDistance; - margin: 0 0 0 @splitDistance; - } + /* -------------- + 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; - } + .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; - } + /* -------------- + 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; - } + /* -------------- + 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; - } + /* -------------- + Attached + --------------- */ + + .ui.attached.left.rail, + .ui.attached.right.rail { + padding: 0; + margin: 0; + } } -/*-------------- +/* -------------- Sizing ----------------*/ +--------------- */ .ui.rail { - font-size: @medium; + font-size: @medium; } & when not (@variationRailSizes = false) { - each(@variationRailSizes, { - @s: @@value; - .ui.@{value}.rail { - font-size: @s; - } - }) + each(@variationRailSizes, { + @s: @@value; + .ui.@{value}.rail { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/elements/reveal.less b/definitions/elements/reveal.less index 839668e..366cad0 100644 --- a/definitions/elements/reveal.less +++ b/definitions/elements/reveal.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Reveal - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,212 +12,208 @@ Theme *******************************/ -@type : 'element'; -@element : 'reveal'; +@type: "element"; +@element: "reveal"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Reveal *******************************/ -.ui.reveal { - display: inherit; - position: relative !important; - font-size: 0; +.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; + 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; + 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; + z-index: @activeZIndex !important; } - /******************************* Types *******************************/ & when (@variationRevealSlide) { - /*-------------- - Slide - ---------------*/ + /* -------------- + Slide + --------------- */ + + .ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; + } - .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 > .content { - display: block; - width: 100%; - white-space: normal; - float: left; + .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; + } - margin: 0; - transition: @slideTransition; - } + .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.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; - } + .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; - } + /* -------------- + 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 - ---------------*/ + /* -------------- + Move + --------------- */ + + .ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; + } - .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 > .content { - display: block; - float: left; - white-space: normal; + .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; + } +} - margin: 0; - transition: @moveTransition; - } +& when (@variationRevealRotate) { + /* -------------- + Rotate + --------------- */ - .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; - } -} + .ui.rotate.reveal > .visible.content { + transition-duration: @transitionDuration; + transform: rotate(0); + } + .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); + } -& 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); - } + .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); + } } /******************************* @@ -225,65 +221,63 @@ *******************************/ & 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; - } + .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; + z-index: @overlayZIndex; } /******************************* Variations *******************************/ -/*-------------- +/* -------------- Visible ----------------*/ +--------------- */ .ui.visible.reveal { - overflow: visible; + overflow: visible; } -/*-------------- +/* -------------- Instant ----------------*/ +--------------- */ .ui.instant.reveal > .content { - transition-delay: 0s !important; + transition-delay: 0s !important; } - -/*-------------- +/* -------------- Sizing ----------------*/ +--------------- */ .ui.reveal > .content { - font-size: @medium; + font-size: @medium; } & when not (@variationRevealSizes = false) { - each(@variationRevealSizes, { - @s: @@value; - .ui.@{value}.reveal > .content { - font-size: @s; - } - }) + each(@variationRevealSizes, { + @s: @@value; + .ui.@{value}.reveal > .content { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/elements/segment.less b/definitions/elements/segment.less index e61da3b..fcd9c30 100644 --- a/definitions/elements/segment.less +++ b/definitions/elements/segment.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Segment - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,109 +12,107 @@ Theme *******************************/ -@type : 'element'; -@element : 'segment'; +@type: "element"; +@element: "segment"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Segment *******************************/ .ui.segment { - position: relative; - background: @background; - box-shadow: @boxShadow; - margin: @margin; - padding: @padding; - border-radius: @borderRadius; - border: @border; + position: relative; + background: @background; + box-shadow: @boxShadow; + margin: @margin; + padding: @padding; + border-radius: @borderRadius; + border: @border; } .ui.segment:first-child { - margin-top: 0; + margin-top: 0; } .ui.segment:last-child { - margin-bottom: 0; + 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-top: @borderWidth solid @borderColor; - } - .ui.vertical.segment:first-child { - border-top: none; - } + /* Vertical */ + .ui.vertical.segment { + margin: 0; + padding-left: 0; + padding-right: 0; + background: none transparent; + border-radius: 0; + box-shadow: none; + border: none; + border-top: @borderWidth solid @borderColor; + } + .ui.vertical.segment:first-child { + border-top: none; + } } - -/*------------------- +/* ------------------- Loose Coupling ---------------------*/ +-------------------- */ & when (@variationSegmentInverted) { - /* Header */ - .ui.inverted.segments .segment > .ui.header .sub.header, - .ui.inverted.segments .segment > .ui.header, - .ui.inverted.segment > .ui.header .sub.header, - .ui.inverted.segment > .ui.header { - color: @white; - } + /* Header */ + .ui.inverted.segments .segment > .ui.header .sub.header, + .ui.inverted.segments .segment > .ui.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; - } + /* 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; + padding-top: @pageGridMargin; + padding-bottom: @pageGridMargin; } .ui.grid.segment { - margin: @margin; - border-radius: @borderRadius; + margin: @margin; + border-radius: @borderRadius; } /* Table */ .ui.basic.table.segment { - background: @background; - border: @border; - box-shadow: @boxShadow; + background: @background; + border: @border; + box-shadow: @boxShadow; } .ui[class*="very basic"].table.segment { - padding: @padding; + padding: @padding; } /* Tab */ .ui.segment.tab:last-child { - margin-bottom: @verticalMargin; + margin-bottom: @verticalMargin; } /******************************* @@ -122,796 +120,791 @@ *******************************/ & 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; - &.tab { - display: none; - &.active { + /* ------------------- + Placeholder + -------------------- */ + + .ui.placeholder.segment { display: flex; - } - } - } - - .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; - } + 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; + &.tab { + display: none; + &.active { + display: flex; + } + } + } + + .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; - } - } + /* ------------------- + 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; - } - } + /* ------------------- + 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 - --------------------*/ + /* ------------------- + Padded + -------------------- */ - .ui.padded.segment { - padding: @paddedSegmentPadding; - } - & when (@variationSegmentVeryPadded) { - .ui[class*="very padded"].segment { - padding: @veryPaddedSegmentPadding; + .ui.padded.segment { + padding: @paddedSegmentPadding; + } + & when (@variationSegmentVeryPadded) { + .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 (@variationSegmentVertical) { + /* Padded vertical */ + .ui.padded.segment.vertical.segment, + .ui[class*="very padded"].vertical.segment { + padding-left: 0; + padding-right: 0; + } } - } } & when (@variationSegmentCompact) { - /*------------------- - Compact - --------------------*/ + /* ------------------- + Compact + -------------------- */ - .ui.compact.segment { - display: table; - } + .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; - } + /* 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 - --------------------*/ + /* ------------------- + Circular + -------------------- */ - .ui.circular.segment { - display: table-cell; - padding: @circularPadding; - text-align: center; - vertical-align: middle; - border-radius: 500em; - } + .ui.circular.segment { + display: table-cell; + padding: @circularPadding; + text-align: center; + vertical-align: middle; + border-radius: 500em; + } } & when (@variationSegmentRaised) { - /*------------------- - Raised - --------------------*/ + /* ------------------- + Raised + -------------------- */ - .ui.raised.raised.segments, - .ui.raised.raised.segment { - box-shadow: @raisedBoxShadow; - } + .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; - } + /******************************* + 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: @groupedBoxShadow; + margin: @groupedMargin; + border-radius: @groupedBorderRadius; + border: @groupedBorder; + } + .ui.stackable.horizontal.segments { + flex-wrap: wrap; + } - & when (@variationSegmentHorizontal) { - /* Horizontal Group */ - .ui.horizontal.segments { - display: flex; - flex-direction: row; - background-color: transparent; - padding: 0; - box-shadow: @groupedBoxShadow; - margin: @groupedMargin; - border-radius: @groupedBorderRadius; - border: @groupedBorder; - } - .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; + } - /* 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; + & when (@supportIE) { + // https://github.com/Semantic-Org/Semantic-UI/issues/2550 + // stylelint-disable-next-line property-no-vendor-prefix + -ms-flex: 1 1 0; + } + } + .ui.horizontal.segments > .segment { + margin: 0; + min-width: 0; + border-radius: 0; + border: none; + box-shadow: none; + border-left: @borderWidth solid @borderColor; + } - /* Horizontal Segment */ - .ui.horizontal.segments:not(.compact) > .segment:not(.compact) { - flex: 1 1 auto; - & when (@supportIE) { - -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; + } - /* 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; - } - /* Equal Width */ - .ui[class*="equal width"].horizontal.segments > .segment { - width: 100%; + /* Equal Width */ + .ui[class*="equal width"].horizontal.segments > .segment { + width: 100%; + } } - } } - /******************************* States *******************************/ & when (@variationSegmentDisabled) { - /*-------------- - Disabled - ---------------*/ + /* -------------- + Disabled + --------------- */ - .ui.disabled.segments, - .ui.disabled.segment { - opacity: @disabledOpacity; - color: @disabledTextColor; - pointer-events: none; - user-select: none; - } + .ui.disabled.segments, + .ui.disabled.segment { + opacity: @disabledOpacity; + color: @disabledTextColor; + pointer-events: none; + user-select: none; + } } & when (@variationSegmentLoading) { - /*-------------- - Loading - ---------------*/ - - .ui.loading.segments, - .ui.loading.segment { - position: relative; - cursor: default; - pointer-events: none; - user-select: none; - transition: all 0s linear; - } - .ui.loading.segments::before, - .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.segments::after, - .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; - } + /* -------------- + Loading + --------------- */ + + .ui.loading.segments, + .ui.loading.segment { + position: relative; + cursor: default; + pointer-events: none; + user-select: none; + transition: all 0s linear; + } + .ui.loading.segments::before, + .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.segments::after, + .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 - --------------------*/ + /* ------------------- + Basic + -------------------- */ - .ui.basic.segment, - .ui.segments .ui.basic.segment, - .ui.basic.segments { - background: @basicBackground; - box-shadow: @basicBoxShadow; - border: @basicBorder; - border-radius: @basicBorderRadius; - } + .ui.basic.segment, + .ui.segments .ui.basic.segment, + .ui.basic.segments { + background: @basicBackground; + box-shadow: @basicBoxShadow; + border: @basicBorder; + border-radius: @basicBorderRadius; + } } & when (@variationSegmentClearing) { - /*------------------- - Clearing - --------------------*/ + /* ------------------- + Clearing + -------------------- */ - .ui.clearing.segment::after { - content: ""; - display: block; - clear: both; - } + .ui.clearing.segment::after { + content: ""; + display: block; + clear: both; + } } -/*------------------- +/* ------------------- Colors ---------------------*/ +-------------------- */ & when not (@variationSegmentColors = false) { - each(@variationSegmentColors, { - @color: @value; - @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; + each(@variationSegmentColors, { + @color: @value; + @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 - --------------------*/ + /* ------------------- + 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; - } + .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 - --------------------*/ + /* ------------------- + Floated + -------------------- */ - .ui.floated.segment, - .ui[class*="left floated"].segment { - float: left; - margin-right: @floatedDistance; - } - .ui[class*="right floated"].segment { - float: right; - margin-left: @floatedDistance; - } + .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.segments, - .ui.inverted.segments .segment, - .ui.inverted.segment { - border: none; - box-shadow: none; - } - .ui.inverted.segments .segment, - .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.ui.inverted.attached.segment { - border-color: @solidWhiteBorderColor; - } - } - & when (@variationSegmentLoading) { - /* Loading */ - .ui.inverted.loading.segments, - .ui.inverted.loading.segment { - color: @invertedLoaderLineColor; - } - .ui.inverted.loading.segments::before, - .ui.inverted.loading.segment::before { - background: @loaderInvertedDimmerColor; - } - } -} - -/*------------------- + /* ------------------- + Inverted + -------------------- */ + .ui.inverted.segments, + .ui.inverted.segments .segment, + .ui.inverted.segment { + border: none; + box-shadow: none; + } + .ui.inverted.segments .segment, + .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.ui.inverted.attached.segment { + border-color: @solidWhiteBorderColor; + } + } + & when (@variationSegmentLoading) { + /* Loading */ + .ui.inverted.loading.segments, + .ui.inverted.loading.segment { + color: @invertedLoaderLineColor; + } + .ui.inverted.loading.segments::before, + .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; + /* 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; + /* 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; - &:not(.basic) { - border: @attachedBorder; - } - } - .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) { - border-top: none; - } - - /* Top */ - .ui.segment[class*="top attached"] { - 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; - } - .ui.tab.segment[class*="top attached"]:first-child { - margin-top: @verticalMargin; - } - - /* 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: 0; - } - .ui.tab.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; - } -} - -& when (@variationSegmentScrolling) { - /*-------------- - Scrolling - ---------------*/ - .ui.scrolling.segment { - overflow: auto; - } - @media only screen and (max-width : @largestMobileScreen) { - & when (@variationSegmentScrollingShort) { - .ui.scrolling.segment.short { - max-height: @scrollingMobileMaxHeight * 0.75; - } - } - & when (@variationSegmentScrollingVeryShort) { - .ui.scrolling.segment[class*="very short"] { - max-height: @scrollingMobileMaxHeight * 0.5; - } + /* ------------------- + Attached + -------------------- */ + + /* Middle */ + .ui.attached.segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + &:not(.basic) { + border: @attachedBorder; + } } - .ui.scrolling.segment { - max-height: @scrollingMobileMaxHeight; + .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) { + border-top: none; + } + + /* Top */ + .ui.segment[class*="top attached"] { + bottom: 0; + margin-bottom: 0; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0 0; } - & when (@variationSegmentScrollingLong) { - .ui.scrolling.segment.long { - max-height: @scrollingMobileMaxHeight * 2; - } + .ui.segment[class*="top attached"]:first-child { + margin-top: 0; } - & when (@variationSegmentScrollingVeryLong) { - .ui.scrolling.segment[class*="very long"] { - max-height: @scrollingMobileMaxHeight * 3; - } + .ui.tab.segment[class*="top attached"]:first-child { + margin-top: @verticalMargin; } - } - @media only screen and (min-width: @tabletBreakpoint) { - & when (@variationSegmentScrollingShort) { - .ui.scrolling.segment.short { - max-height: @scrollingTabletMaxHeight * 0.75; - } + /* 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; } - & when (@variationSegmentScrollingVeryShort) { - .ui.scrolling.segment[class*="very short"] { - max-height: @scrollingTabletMaxHeight * 0.5; - } + .ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0; } - .ui.scrolling.segment { - max-height: @scrollingTabletMaxHeight; - } - & when (@variationSegmentScrollingLong) { - .ui.scrolling.segment.long { - max-height: @scrollingTabletMaxHeight * 2; - } - } - & when (@variationSegmentScrollingVeryLong) { - .ui.scrolling.segment[class*="very long"] { - max-height: @scrollingTabletMaxHeight * 3; - } - } - } - @media only screen and (min-width: @computerBreakpoint) { - & when (@variationSegmentScrollingShort) { - .ui.scrolling.segment.short { - max-height: @scrollingComputerMaxHeight * 0.75; - } - } - & when (@variationSegmentScrollingVeryShort) { - .ui.scrolling.segment[class*="very short"] { - max-height: @scrollingComputerMaxHeight * 0.5; - } + .ui.tab.segment[class*="bottom attached"]:last-child { + margin-bottom: @verticalMargin; } - .ui.scrolling.segment { - max-height: @scrollingComputerMaxHeight; - } - & when (@variationSegmentScrollingLong) { - .ui.scrolling.segment.long { - max-height: @scrollingComputerMaxHeight * 2; - } - } - & when (@variationSegmentScrollingVeryLong) { - .ui.scrolling.segment[class*="very long"]{ - max-height: @scrollingComputerMaxHeight * 3; - } - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - & when (@variationSegmentScrollingShort) { - .ui.scrolling.segment.short { - max-height: @scrollingWidescreenMaxHeight * 0.75; - } - } - & when (@variationSegmentScrollingVeryShort) { - .ui.scrolling.segment[class*="very short"] { - max-height: @scrollingWidescreenMaxHeight * 0.5; - } +} + +& 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; } +} + +& when (@variationSegmentScrolling) { + /* -------------- + Scrolling + --------------- */ .ui.scrolling.segment { - max-height: @scrollingWidescreenMaxHeight; + overflow: auto; + overscroll-behavior: @overscrollBehavior; + } + @media only screen and (max-width: @largestMobileScreen) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingMobileMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingMobileMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingMobileMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingMobileMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingMobileMaxHeight * 3; + } + } + } + + @media only screen and (min-width: @tabletBreakpoint) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingTabletMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingTabletMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingTabletMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingTabletMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingTabletMaxHeight * 3; + } + } } - & when (@variationSegmentScrollingLong) { - .ui.scrolling.segment.long { - max-height: @scrollingWidescreenMaxHeight * 2; - } + @media only screen and (min-width: @computerBreakpoint) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingComputerMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingComputerMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingComputerMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingComputerMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingComputerMaxHeight * 3; + } + } } - & when (@variationSegmentScrollingVeryLong) { - .ui.scrolling.segment[class*="very long"] { - max-height: @scrollingWidescreenMaxHeight * 3; - } + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + & when (@variationSegmentScrollingShort) { + .ui.scrolling.segment.short { + max-height: @scrollingWidescreenMaxHeight * 0.75; + } + } + & when (@variationSegmentScrollingVeryShort) { + .ui.scrolling.segment[class*="very short"] { + max-height: @scrollingWidescreenMaxHeight * 0.5; + } + } + .ui.scrolling.segment { + max-height: @scrollingWidescreenMaxHeight; + } + & when (@variationSegmentScrollingLong) { + .ui.scrolling.segment.long { + max-height: @scrollingWidescreenMaxHeight * 2; + } + } + & when (@variationSegmentScrollingVeryLong) { + .ui.scrolling.segment[class*="very long"] { + max-height: @scrollingWidescreenMaxHeight * 3; + } + } } - } } -/*------------------- + +/* ------------------- Size ---------------------*/ +-------------------- */ .ui.segments .segment, .ui.segment { - font-size: @medium; + font-size: @medium; } & when not (@variationSegmentSizes = false) { - each(@variationSegmentSizes, { - @s: @@value; - .ui.@{value}.segments .segment, - .ui.@{value}.segment { - font-size: @s; - } - }) + each(@variationSegmentSizes, { + @s: @@value; + .ui.@{value}.segments .segment, + .ui.@{value}.segment { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/elements/step.less b/definitions/elements/step.less index e074db6..3f44425 100644 --- a/definitions/elements/step.less +++ b/definitions/elements/step.less @@ -1,170 +1,163 @@ /*! * # Fomantic-UI - Step - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Step *******************************/ -/*-------------- +/* -------------- Load Theme ----------------*/ +--------------- */ -@type : 'element'; -@element : 'step'; +@type: "element"; +@element: "step"; -@import (multiple) '../../theme.config'; +@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; + 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; + flex-wrap: wrap; } /* First Steps */ .ui.steps:first-child { - margin-top: 0; + margin-top: 0; } /* Last Steps */ .ui.steps:last-child { - margin-bottom: 0; + 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; + position: relative; + display: flex; + flex: 1 0 auto; + flex-flow: row wrap; + 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); + 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; + 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; + border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0; + border-right: none; + margin-right: 0; } /* Only Step */ .ui.steps .step:only-child { - border-radius: @stepsBorderRadius; + border-radius: @stepsBorderRadius; } - /******************************* Content *******************************/ /* Title */ .ui.steps .step .title { - font-family: @titleFontFamily; - font-size: @titleFontSize; - font-weight: @titleFontWeight; + font-family: @titleFontFamily; + font-size: @titleFontSize; + font-weight: @titleFontWeight; } .ui.steps .step > .title { - width: 100%; + width: 100%; } /* Description */ .ui.steps .step .description { - font-weight: @descriptionFontWeight; - font-size: @descriptionFontSize; - color: @descriptionColor; + font-weight: @descriptionFontWeight; + font-size: @descriptionFontSize; + color: @descriptionColor; } .ui.steps .step > .description { - width: 100%; + width: 100%; } .ui.steps .step .title ~ .description { - margin-top: @descriptionDistance; + margin-top: @descriptionDistance; } /* Icon */ .ui.steps .step > i.icon { - line-height: 1; - font-size: @iconSize; - margin: 0 @iconDistance 0 0; + 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; + display: block; + flex: 0 1 auto; + align-self: @iconAlign; } /* Horizontal Icon */ .ui.steps:not(.vertical) .step > i.icon { - width: auto; + width: auto; } /* Link */ .ui.steps .link.step, .ui.steps a.step { - cursor: pointer; + cursor: pointer; } /******************************* @@ -172,140 +165,137 @@ *******************************/ & 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; - } + /* -------------- + Ordered + --------------- */ - .ui.ordered.steps .step > * { - display: block; - align-self: @iconAlign; - } + .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 - ---------------*/ + /* -------------- + 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; + } - .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; - } -} - - -/*--------------- + /* 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; + } - .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); - } - & when (@variationStepVertical) { - .ui.vertical.steps .active.step:last-child::after { - display: none; + /* Arrow */ + .ui.steps:not(.unstackable) .step::after { + top: unset; + bottom: -@arrowSize; + right: 50%; + transform: translateY(-50%) translateX(50%) rotate(45deg); + } + & when (@variationStepVertical) { + .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; - } + /* 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; + } } /******************************* @@ -317,8 +307,8 @@ .ui.steps .link.step:hover, .ui.steps a.step:hover::after, .ui.steps a.step:hover { - background: @hoverBackground; - color: @hoverColor; + background: @hoverBackground; + color: @hoverColor; } /* Link Down */ @@ -326,38 +316,38 @@ .ui.steps .link.step:active, .ui.steps a.step:active::after, .ui.steps a.step:active { - background: @downBackground; - color: @downColor; + background: @downBackground; + color: @downColor; } /* Active */ .ui.steps .step.active { - cursor: auto; - background: @activeBackground; + cursor: auto; + background: @activeBackground; } .ui.steps .step.active::after { - background: @activeBackground; + background: @activeBackground; } .ui.steps .step.active .title { - color: @activeColor; + color: @activeColor; } .ui.ordered.steps .step.active::before, .ui.steps .active.step i.icon { - color: @activeIconColor; + color: @activeIconColor; } /* Active Arrow */ .ui.steps .step::after { - display: @arrowDisplay; + display: @arrowDisplay; } .ui.steps .active.step::after { - display: @activeArrowDisplay; + display: @activeArrowDisplay; } .ui.steps .step:last-child::after { - display: @lastArrowDisplay; + display: @lastArrowDisplay; } .ui.steps .active.step:last-child::after { - display: @activeLastArrowDisplay; + display: @activeLastArrowDisplay; } /* Active Hover */ @@ -365,270 +355,266 @@ .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; + cursor: pointer; + background: @activeHoverBackground; + color: @activeHoverColor; } /* Completed */ .ui.steps .step.completed > i.icon::before, .ui.ordered.steps .step.completed::before { - color: @completedColor; + 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; - } + /* 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) { + /* -------------- + 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; + } + } +} - .ui[class*="tablet stackable"].steps { - display: inline-flex; - overflow: visible; - flex-direction: column; +& when (@variationStepFluid) { + /* -------------- + Fluid + --------------- */ + + /* Fluid */ + .ui.fluid.steps { + display: flex; + width: 100%; } +} - /* Steps */ - .ui[class*="tablet stackable"].steps .step { - flex-direction: column; - border-radius: @borderRadius; - padding: @verticalPadding @horizontalPadding; - border-right: none; - border-bottom: @stepsBorder; +& when (@variationStepAttached) { + /* -------------- + Attached + --------------- */ + + /* Top */ + .ui.attached.steps { + width: @attachedWidth !important; + margin: 0 @attachedHorizontalOffset @attachedVerticalOffset; + max-width: @attachedWidth; + border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; } - .ui[class*="tablet stackable"].steps .step:first-child { - padding: @verticalPadding @horizontalPadding; - border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; + .ui.attached.steps .step:first-child { + border-radius: @stepsBorderRadius 0 0 0; } - .ui[class*="tablet stackable"].steps .step:last-child { - border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; - border-bottom: none; + .ui.attached.steps .step:last-child { + border-radius: 0 @stepsBorderRadius 0 0; } - /* Arrow */ - .ui[class*="tablet stackable"].steps .step::after { - top: unset; - bottom: -@arrowSize; - right: 50%; - transform: translateY(-50%) translateX(50%) rotate(45deg); + /* Bottom */ + .ui.bottom.attached.steps { + margin: @attachedVerticalOffset @attachedHorizontalOffset 0; + border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; } - - /* Content */ - .ui[class*="tablet stackable"].steps .step .content { - text-align: center; + .ui.bottom.attached.steps .step:first-child { + border-radius: 0 0 0 @stepsBorderRadius; } - - /* Icon */ - .ui[class*="tablet stackable"].steps .step > i.icon, - .ui[class*="tablet stackable"].ordered.steps .step::before { - margin: 0 0 @mobileIconDistance 0; + .ui.bottom.attached.steps .step:last-child { + border-radius: 0 0 @stepsBorderRadius 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; - } +& when (@variationStepEqualWidth) { + /* ------------------- + 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.5%; + } } -& when (@variationStepEqualWidth) { - /*------------------- - 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; + font-size: @medium; } & when not (@variationStepSizes = false) { - each(@variationStepSizes, { - @s: @@value; - .ui.@{value}.steps .step, - .ui.@{value}.step { - font-size: @s; - } - }) + 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; - } -} + /* -------------- + 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/definitions/elements/text.less b/definitions/elements/text.less index f048831..d9882a9 100644 --- a/definitions/elements/text.less +++ b/definitions/elements/text.less @@ -1,6 +1,6 @@ /*! * # Fomantic-UI - Text - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license @@ -8,69 +8,67 @@ * */ - /******************************* Theme *******************************/ -@type : 'element'; -@element : 'text'; - -@import (multiple) '../../theme.config'; +@type: "element"; +@element: "text"; +@import (multiple) "../../theme.config"; /******************************* Text *******************************/ span.ui.text { - line-height: @lineHeight; + line-height: @lineHeight; } & when not (@variationTextColors = false) { - each(@variationTextColors, { - @color: @value; - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; + each(@variationTextColors, { + @color: @value; + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; - span.ui.@{color}.text { - color: @c; - } - & when (@variationTextInverted) { - span.ui.inverted.@{color}.text { - color: @l; - } - } - }) + span.ui.@{color}.text { + color: @c; + } + & when (@variationTextInverted) { + span.ui.inverted.@{color}.text { + color: @l; + } + } + }); } & when not (@variationTextStates = false) { - each(@variationTextStates, { - @state: @value; - @c: @textStates[@@state][color]; + each(@variationTextStates, { + @state: @value; + @c: @textStates[@@state][color]; - span.ui.@{state}.text { - color: @c; - } - }) + span.ui.@{state}.text { + color: @c; + } + }); } & when (@variationTextDisabled) { - span.ui.disabled.text { - opacity: @disabledOpacity; - } + span.ui.disabled.text { + opacity: @disabledOpacity; + } } /* Sizes */ span.ui.medium.text { - font-size: @medium; + font-size: @medium; } & when not (@variationTextSizes = false) { - each(@variationTextSizes, { - @s: @@value; - span.ui.@{value}.text { - font-size: @s; - } - }) + each(@variationTextSizes, { + @s: @@value; + span.ui.@{value}.text { + font-size: @s; + } + }); } .loadUIOverrides(); diff --git a/definitions/globals/reset.less b/definitions/globals/reset.less index c6b4220..ec345b6 100644 --- a/definitions/globals/reset.less +++ b/definitions/globals/reset.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Reset - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,10 +12,10 @@ Theme *******************************/ -@type : 'global'; -@element : 'reset'; +@type: "global"; +@element: "reset"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Reset @@ -25,16 +25,19 @@ *, *::before, *::after { - box-sizing: inherit; + box-sizing: inherit; } html { - box-sizing: border-box; + 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! */ +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/definitions/globals/site.js b/definitions/globals/site.js index 9cdbcf7..93e21f0 100644 --- a/definitions/globals/site.js +++ b/definitions/globals/site.js @@ -1,493 +1,453 @@ /*! * # Fomantic-UI - Site - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://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); } - ; - } - } - }, +(function ($, window, document) { + 'use strict'; + + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } - moduleExists: function(name) { - return ($.fn[name] !== undefined && $.fn[name].settings !== undefined); - }, + window = window !== undefined && window.Math === Math + ? window + : globalThis; - 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) { + $.fn.site = function (parameters) { 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 + time = Date.now(), + 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 ; - $.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); - } + module = { + + initialize: function () { + module.instantiate(); + }, + + instantiate: function () { + module.verbose('Storing instance of site', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + normalize: function () { + // keep the function for backward compatibility + // eslint-disable-next-line no-useless-return + return; + }, + + fix: { + consoleClear: function () { + module.debug('Disabling programmatic console clearing'); + window.console.clear = function () {}; + }, + }, + + 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 () {}, + table: 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 = Date.now(); + 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 (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 = context || element; + 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(); } - } - }); - }, - 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); - } + module.invoke(query); + } else { + if (instance !== undefined) { + module.destroy(); } - } - }); - } - }, - - 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); + module.initialize(); } - 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 = context || element; - 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 ); + return returnedValue !== undefined + ? returnedValue + : this; + }; + $.site = $.fn.site; + + $.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', + 'flyout', + 'form', + 'modal', + 'nag', + 'popup', + 'progress', + 'rating', + 'search', + 'shape', + 'sidebar', + 'slider', + 'state', + 'sticky', + 'tab', + 'toast', + 'transition', + 'visibility', + ], + + siteNamespace: 'site', + namespaceStub: { + cache: {}, + config: {}, + sections: {}, + section: {}, + utilities: {}, + }, + + }; + + // allows for selection of elements with data attributes + $.extend($.expr.pseudos, { + data: $.expr.createPseudo(function (dataName) { + return function (elem) { + return !!$.data(elem, dataName); + }; + }), + }); +})(jQuery, window, document); diff --git a/definitions/globals/site.less b/definitions/globals/site.less index c34cc19..4aa3ca0 100644 --- a/definitions/globals/site.less +++ b/definitions/globals/site.less @@ -1,22 +1,21 @@ /*! * # Fomantic-UI - Site - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ - /******************************* Theme *******************************/ -@type : 'global'; -@element : 'site'; +@type: "global"; +@element: "site"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Page @@ -26,23 +25,23 @@ html, body { - height: 100%; + height: 100%; } html { - font-size: @emSize; + 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; + margin: 0; + padding: 0; + overflow-x: @pageOverflowX; + min-width: @pageMinWidth; + background: @pageBackground; + font-family: @pageFont; + font-size: @fontSize; + line-height: @lineHeight; + color: @textColor; } /******************************* @@ -54,28 +53,28 @@ h2, h3, h4, h5 { - font-family: @headerFont; - line-height: @headerLineHeight; - margin: @headerMargin; - font-weight: @headerFontWeight; - padding: 0; + font-family: @headerFont; + line-height: @headerLineHeight; + margin: @headerMargin; + font-weight: @headerFontWeight; + padding: 0; } h1 { - min-height: 1rem; - font-size: @h1; + min-height: 1rem; + font-size: @h1; } h2 { - font-size: @h2; + font-size: @h2; } h3 { - font-size: @h3; + font-size: @h3; } h4 { - font-size: @h4; + font-size: @h4; } h5 { - font-size: @h5; + font-size: @h5; } h1:first-child, @@ -83,7 +82,7 @@ h2:first-child, h3:first-child, h4:first-child, h5:first-child { - margin-top: 0; + margin-top: 0; } h1:last-child, @@ -91,105 +90,104 @@ h2:last-child, h3:last-child, h4:last-child, h5:last-child { - margin-bottom: 0; + margin-bottom: 0; } - /******************************* Text *******************************/ p { - margin: @paragraphMargin; - line-height: @paragraphLineHeight; + margin: @paragraphMargin; + line-height: @paragraphLineHeight; } p:first-child { - margin-top: 0; + margin-top: 0; } p:last-child { - margin-bottom: 0; + margin-bottom: 0; } -/*------------------- +/* ------------------- Links ---------------------*/ +-------------------- */ a { - color: @linkColor; - text-decoration: @linkUnderline; + color: @linkColor; + text-decoration: @linkUnderline; } a:hover { - color: @linkHoverColor; - text-decoration: @linkHoverUnderline; + color: @linkHoverColor; + text-decoration: @linkHoverUnderline; } - /******************************* Scrollbars *******************************/ & 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; + } + body .ui { + & when (@supportIE) { + /* IE11 */ + scrollbar-face-color: @thumbBackgroundHex; + scrollbar-shadow-color: @thumbBackgroundHex; + scrollbar-track-color: @trackBackgroundHex; + scrollbar-arrow-color: @trackBackgroundHex; + } + + /* firefox: first color thumb, second track */ + scrollbar-color: @thumbBackground @trackBackground; + scrollbar-width: thin; + } - /* 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; - } - body .ui { - & when (@supportIE) { - /* IE11 */ - scrollbar-face-color: @thumbBackgroundHex; - scrollbar-shadow-color: @thumbBackgroundHex; - scrollbar-track-color: @trackBackgroundHex; - scrollbar-arrow-color: @trackBackgroundHex; + /* Inverted UI */ + body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track { + background: @trackInvertedBackground; + } + body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb { + background: @thumbInvertedBackground; } - /* firefox : first color thumb, second track*/ - scrollbar-color: @thumbBackground @trackBackground; - scrollbar-width: thin; - } - - /* 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; - } - - body .ui.inverted:not(.dimmer) { - & when (@supportIE) { - /* IE11 */ - scrollbar-face-color: @thumbInvertedBackgroundHex; - scrollbar-shadow-color: @thumbInvertedBackgroundHex; - scrollbar-track-color: @trackInvertedBackgroundHex; - scrollbar-arrow-color: @trackInvertedBackgroundHex; + body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInvertedInactiveBackground; + } + body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { + background: @thumbInvertedHoverBackground; + } + + body .ui.inverted:not(.dimmer) { + & when (@supportIE) { + /* IE11 */ + scrollbar-face-color: @thumbInvertedBackgroundHex; + scrollbar-shadow-color: @thumbInvertedBackgroundHex; + scrollbar-track-color: @trackInvertedBackgroundHex; + scrollbar-arrow-color: @trackInvertedBackgroundHex; + } + + /* firefox: first color thumb, second track */ + scrollbar-color: @thumbInvertedBackground @trackInvertedBackground; } - /* firefox : first color thumb, second track */ - scrollbar-color: @thumbInvertedBackground @trackInvertedBackground; - } } /******************************* @@ -198,33 +196,33 @@ a:hover { /* Site */ ::-webkit-selection { - background-color: @highlightBackground; - color: @highlightColor; + background-color: @highlightBackground; + color: @highlightColor; } ::-moz-selection { - background-color: @highlightBackground; - color: @highlightColor; + background-color: @highlightBackground; + color: @highlightColor; } ::selection { - background-color: @highlightBackground; - color: @highlightColor; + background-color: @highlightBackground; + color: @highlightColor; } /* Form */ textarea::-webkit-selection, input::-webkit-selection { - background-color: @inputHighlightBackground; - color: @inputHighlightColor; + background-color: @inputHighlightBackground; + color: @inputHighlightColor; } textarea::-moz-selection, input::-moz-selection { - background-color: @inputHighlightBackground; - color: @inputHighlightColor; + background-color: @inputHighlightBackground; + color: @inputHighlightColor; } textarea::selection, input::selection { - background-color: @inputHighlightBackground; - color: @inputHighlightColor; + background-color: @inputHighlightBackground; + color: @inputHighlightColor; } .loadUIOverrides(); diff --git a/definitions/modules/accordion.js b/definitions/modules/accordion.js index 6e108ee..5b9a928 100644 --- a/definitions/modules/accordion.js +++ b/definitions/modules/accordion.js @@ -1,624 +1,597 @@ /*! * # Fomantic-UI - Accordion - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://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(); - }, +(function ($, window, document) { + 'use strict'; - instantiate: function() { - instance = module; - $module - .data(moduleNamespace, module) - ; - }, + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } - destroy: function() { - module.debug('Destroying previous instance', $module); - $module - .off(eventNamespace) - .removeData(moduleNamespace) - ; - }, + window = window !== undefined && window.Math === Math + ? window + : globalThis; - refresh: function() { - $title = $module.find(selector.title); - $content = $module.find(selector.content); - }, + $.fn.accordion = function (parameters) { + var + $allModules = $(this), - 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); - } - }, + time = Date.now(), + performance = [], - bind: { - events: function() { - module.debug('Binding delegated events'); - $module - .on(settings.on + eventNamespace, selector.trigger, module.event.click) - ; - } - }, + query = arguments[0], + methodInvoked = typeof query === 'string', + queryArguments = [].slice.call(arguments, 1), - event: { - click: function(event) { - if($(event.target).closest(selector.ignore).length === 0) { - module.toggle.call(this); - } - } - }, + 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 + ; - 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); - } - }, + module = { - 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, - silent : settings.silent, - duration : settings.duration, - skipInlineHidden : true, - onComplete: function() { - $activeContent.children().removeClass(className.transition); + 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 (event) { + if ($(event.target).closest(selector.ignore).length === 0) { + 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, + silent: settings.silent, + 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, + silent: settings.silent, + 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, + silent: settings.silent, + 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); + var $element = $(this); + $element.css('display', ''); + if ($element.attr('style') === '') { + $element + .attr('style', '') + .removeAttr('style') + ; + } + }, + + opacity: function () { + module.verbose('Removing inline opacity from element', this); + var $element = $(this); + $element.css('opacity', ''); + if ($element.attr('style') === '') { + $element + .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 = Date.now(); + 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 (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 = context || element; + 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; } - }) - ; - } - 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, - silent : settings.silent, - duration : settings.duration, - skipInlineHidden : true - }) - ; - } - else { - $activeContent - .children() - .stop(true, true) - .animate({ - opacity: 0 - }, settings.duration, module.resetOpacity) - ; - } + return found; + }, + }; + if (methodInvoked) { + if (instance === undefined) { + module.initialize(); + } + module.invoke(query); + } else { + if (instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); } - $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, - silent : settings.silent, - 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); - }) - ; - } - }, + return returnedValue !== undefined + ? returnedValue + : this; + }; - reset: { + $.fn.accordion.settings = { - 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') - ; - } - }, + name: 'Accordion', + namespace: 'accordion', - }, + silent: false, + debug: false, + verbose: false, + performance: 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) { - 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); - } - } + 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', }, - error: function() { - if(!settings.silent) { - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); - module.error.apply(console, arguments); - } + + className: { + active: 'active', + animating: 'animating', + transition: 'transition', }, - 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 = []; - } + + selector: { + accordion: '.accordion', + title: '.title', + trigger: '.title', + ignore: '.ui.dropdown', + content: '.content', }, - invoke: function(query, passedArguments, context) { - var - object = instance, - maxDepth, - found, - response - ; - passedArguments = passedArguments || queryArguments; - context = context || element; - 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', - ignore : '.ui.dropdown', - content : '.content' - } - -}; - -// Adds easing -$.extend( $.easing, { - easeOutQuad: function (x, t, b, c, d) { - return -c *(t/=d)*(t-2) + b; - } -}); - -})( jQuery, window, document ); + }; + + // Adds easing + $.extend($.easing, { + easeOutQuad: function (x) { + return 1 - (1 - x) * (1 - x); + }, + }); +})(jQuery, window, document); diff --git a/definitions/modules/accordion.less b/definitions/modules/accordion.less index 4ad2f78..fbbb855 100644 --- a/definitions/modules/accordion.less +++ b/definitions/modules/accordion.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Accordion - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,10 +12,10 @@ Theme *******************************/ -@type : 'module'; -@element : 'accordion'; +@type: "module"; +@element: "accordion"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Accordion @@ -23,76 +23,76 @@ .ui.accordion, .ui.accordion .accordion { - max-width: 100%; + max-width: 100%; } .ui.accordion .accordion { - margin: @childAccordionMargin; - padding: @childAccordionPadding; + margin: @childAccordionMargin; + padding: @childAccordionPadding; } /* Title */ .ui.accordion.menu .item > .title, .ui.accordion > .title, .ui.accordion .accordion > .title { - cursor: pointer; - padding: @titlePadding; - font-family: @titleFont; - font-size: @titleFontSize; - color: @titleColor; - list-style: none; - line-height: @titleLineHeight; + cursor: pointer; + padding: @titlePadding; + font-family: @titleFont; + font-size: @titleFontSize; + color: @titleColor; + list-style: none; + line-height: @titleLineHeight; } /* Default Styling */ .ui.accordion:not(.styled) .title ~ .content, .ui.accordion:not(.styled) .accordion .title ~ .content { - margin: @contentMargin; - padding: @contentPadding; + margin: @contentMargin; + padding: @contentPadding; } .ui.accordion:not(.styled) .title ~ .content:last-child { - padding-bottom: 0; + padding-bottom: 0; } /* Arrow */ .ui.accordion .ui.header > .dropdown.icon, .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; - &.right when (@variationAccordionRightDropdown) { - float:right; - transform: @iconTransformRight; - } + display: @iconDisplay; + float: @iconFloat; + opacity: @iconOpacity; + width: @iconWidth; + height: @iconHeight; + margin: @iconMargin; + padding: @iconPadding; + font-size: @iconFontSize; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + transform: @iconTransform; + &.right when (@variationAccordionRightDropdown) { + float: right; + transform: @iconTransformRight; + } } -/*-------------- +/* -------------- Coupling ----------------*/ +--------------- */ /* Menu */ .ui.accordion.menu .item .title { - display: block; - padding: @menuTitlePadding; + display: block; + padding: @menuTitlePadding; } .ui.accordion.menu .item .title > .dropdown.icon { - float: @menuIconFloat; - margin: @menuIconMargin; - transform: @menuIconTransform; + float: @menuIconFloat; + margin: @menuIconMargin; + transform: @menuIconTransform; } /* Header */ .ui.accordion .ui.header > .dropdown.icon { - font-size: @iconFontSize; - margin: @iconMargin; + font-size: @iconFontSize; + margin: @iconMargin; } /******************************* @@ -103,11 +103,11 @@ .ui.accordion .accordion[open] > .title > .dropdown.icon, .ui.accordion .active.title > .dropdown.icon, .ui.accordion .accordion .active.title > .dropdown.icon { - transform: @activeIconTransform; + transform: @activeIconTransform; } .ui.accordion.menu .item .active.title > .dropdown.icon { - transform: @activeIconTransform; + transform: @activeIconTransform; } /******************************* @@ -115,137 +115,134 @@ *******************************/ & 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 { - margin: @styledContentMargin; - padding: @styledContentPadding; - } - .ui.styled.accordion .accordion > .content { - margin: @styledChildContentMargin; - padding: @styledChildContentPadding; - } - - - /* Hover */ - .ui.styled.accordion > .title:hover { - background: @styledTitleHoverBackground; - color: @styledTitleHoverColor; - } - .ui.styled.accordion .accordion > .title:hover { - background: @styledHoverChildTitleBackground; - color: @styledHoverChildTitleColor; - } - - - /* Active */ - .ui.styled.accordion[open] > .title, - .ui.styled.accordion .active.title { - background: @styledActiveTitleBackground; - color: @styledActiveTitleColor; - } - .ui.styled.accordion .accordion[open] > .title, - .ui.styled.accordion .accordion .active.title { - background: @styledActiveChildTitleBackground; - color: @styledActiveChildTitleColor; - } + /* -------------- + 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 { + margin: @styledContentMargin; + padding: @styledContentPadding; + } + .ui.styled.accordion .accordion > .content { + margin: @styledChildContentMargin; + padding: @styledChildContentPadding; + } + + /* Hover */ + .ui.styled.accordion > .title:hover { + background: @styledTitleHoverBackground; + color: @styledTitleHoverColor; + } + .ui.styled.accordion .accordion > .title:hover { + background: @styledHoverChildTitleBackground; + color: @styledHoverChildTitleColor; + } + + /* Active */ + .ui.styled.accordion[open] > .title, + .ui.styled.accordion .active.title { + background: @styledActiveTitleBackground; + color: @styledActiveTitleColor; + } + .ui.styled.accordion .accordion[open] > .title, + .ui.styled.accordion .accordion .active.title { + background: @styledActiveChildTitleBackground; + color: @styledActiveChildTitleColor; + } } & when (@variationAccordionCompact) { - /*-------------- - Compact - ---------------*/ + /* -------------- + Compact + --------------- */ - /* Default Styling */ + /* Default Styling */ - .ui.compact.accordion:not(.styled) > .title, - .ui.compact.accordion:not(.styled) .accordion > .title { - padding: @titlePaddingCompact; - } + .ui.compact.accordion:not(.styled) > .title, + .ui.compact.accordion:not(.styled) .accordion > .title { + padding: @titlePaddingCompact; + } - .ui.compact.accordion:not(.styled) .title ~ .content, - .ui.compact.accordion:not(.styled) .accordion .title ~ .content { - padding: @contentPaddingCompact; - } + .ui.compact.accordion:not(.styled) .title ~ .content, + .ui.compact.accordion:not(.styled) .accordion .title ~ .content { + padding: @contentPaddingCompact; + } - /* Styled */ + /* Styled */ - .ui.compact.styled.accordion > .title, - .ui.compact.styled.accordion .accordion > .title { - padding: @styledTitlePaddingCompact; - } + .ui.compact.styled.accordion > .title, + .ui.compact.styled.accordion .accordion > .title { + padding: @styledTitlePaddingCompact; + } - .ui.compact.styled.accordion .title ~ .content, - .ui.compact.styled.accordion .accordion .title ~ .content { - padding: @styledContentPaddingCompact; - } + .ui.compact.styled.accordion .title ~ .content, + .ui.compact.styled.accordion .accordion .title ~ .content { + padding: @styledContentPaddingCompact; + } } - /*-------------- + +/* -------------- Very Compact - ---------------*/ + --------------- */ & when (@variationAccordionVeryCompact) { - .ui[class*="very compact"].accordion:not(.styled) > .title, - .ui[class*="very compact"].accordion:not(.styled) .accordion > .title { - padding: @titlePaddingVeryCompact; - } - - .ui[class*="very compact"].accordion:not(.styled) .title ~ .content, - .ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content { - padding: @contentPaddingVeryCompact; - } - - .ui[class*="very compact"].styled.accordion > .title, - .ui[class*="very compact"].styled.accordion .accordion > .title { - padding: @styledTitlePaddingVeryCompact; - } - - .ui[class*="very compact"].styled.accordion .title ~ .content, - .ui[class*="very compact"].styled.accordion .accordion .title ~ .content { - padding: @styledContentPaddingVeryCompact; - } -} + .ui[class*="very compact"].accordion:not(.styled) > .title, + .ui[class*="very compact"].accordion:not(.styled) .accordion > .title { + padding: @titlePaddingVeryCompact; + } + + .ui[class*="very compact"].accordion:not(.styled) .title ~ .content, + .ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content { + padding: @contentPaddingVeryCompact; + } + .ui[class*="very compact"].styled.accordion > .title, + .ui[class*="very compact"].styled.accordion .accordion > .title { + padding: @styledTitlePaddingVeryCompact; + } + + .ui[class*="very compact"].styled.accordion .title ~ .content, + .ui[class*="very compact"].styled.accordion .accordion .title ~ .content { + padding: @styledContentPaddingVeryCompact; + } +} /******************************* States *******************************/ -/*-------------- +/* -------------- Not Active ----------------*/ +--------------- */ .ui.accordion:not(details) .title ~ .content:not(.active), .ui.accordion .accordion:not(details) .title ~ .content:not(.active) { - display: none; + display: none; } /******************************* @@ -253,119 +250,118 @@ *******************************/ & when (@variationAccordionFluid) { - /*-------------- - Fluid - ---------------*/ - - .ui.fluid.accordion, - .ui.fluid.accordion .accordion { - width: 100%; - } + /* -------------- + Fluid + --------------- */ + + .ui.fluid.accordion, + .ui.fluid.accordion .accordion { + width: 100%; + } } & when (@variationAccordionInverted) { - /*-------------- - Inverted - ---------------*/ - - .ui.inverted.accordion.menu .item > .title, - .ui.inverted.accordion > .title, - .ui.inverted.accordion .accordion > .title { - color: @invertedTitleColor; - } - & when (@variationAccordionStyled) { - .ui.inverted.styled.accordion, - .ui.inverted.styled.accordion .accordion { - background: @invertedStyledBackground; - box-shadow: @invertedStyledBoxShadow; + /* -------------- + Inverted + --------------- */ + + .ui.inverted.accordion.menu .item > .title, + .ui.inverted.accordion > .title, + .ui.inverted.accordion .accordion > .title { + color: @invertedTitleColor; } - .ui.inverted.styled.accordion > .title, - .ui.inverted.styled.accordion .accordion > .title { - color: @invertedStyledTitleColor; - border-top: @invertedStyledTitleBorder; + & when (@variationAccordionStyled) { + .ui.inverted.styled.accordion, + .ui.inverted.styled.accordion .accordion { + background: @invertedStyledBackground; + box-shadow: @invertedStyledBoxShadow; + } + .ui.inverted.styled.accordion > .title, + .ui.inverted.styled.accordion .accordion > .title { + color: @invertedStyledTitleColor; + border-top: @invertedStyledTitleBorder; + } + + /* Hover */ + .ui.inverted.styled.accordion > .title:hover { + background: @invertedStyledTitleHoverBackground; + color: @invertedStyledTitleHoverColor; + } + .ui.inverted.styled.accordion .accordion > .title:hover { + background: @invertedStyledHoverChildTitleBackground; + color: @invertedStyledHoverChildTitleColor; + } + + /* Active */ + .ui.inverted.styled.accordion[open] > .title, + .ui.inverted.styled.accordion .active.title { + background: @invertedStyledActiveTitleBackground; + color: @invertedStyledActiveTitleColor; + } + .ui.inverted.styled.accordion .accordion[open] > .title, + .ui.inverted.styled.accordion .accordion .active.title { + background: @invertedStyledActiveChildTitleBackground; + color: @invertedStyledActiveChildTitleColor; + } } +} - /* Hover */ - .ui.inverted.styled.accordion > .title:hover { - background: @invertedStyledTitleHoverBackground; - color: @invertedStyledTitleHoverColor; +& when (@variationAccordionBasicStyled) { + .ui.basic.styled.accordion, + .ui.basic.styled.accordion .accordion { + background: transparent; + box-shadow: none; } - .ui.inverted.styled.accordion .accordion > .title:hover { - background: @invertedStyledHoverChildTitleBackground; - color: @invertedStyledHoverChildTitleColor; + .ui.basic.styled.accordion > .title, + .ui.basic.styled.accordion .accordion > .title { + border: none; + color: @basicStyledTitleColor; } - - /* Active */ - .ui.inverted.styled.accordion[open] > .title, - .ui.inverted.styled.accordion .active.title { - background: @invertedStyledActiveTitleBackground; - color: @invertedStyledActiveTitleColor; + .ui.basic.styled.accordion > .title:hover, + .ui.basic.styled.accordion .accordion > .title:hover { + background: transparent; + color: @basicStyledTitleHoverColor; + } + .ui.basic.styled.accordion[open] > .title, + .ui.basic.styled.accordion .active.title, + .ui.basic.styled.accordion .accordion[open] > .title, + .ui.basic.styled.accordion .accordion .active.title { + background: transparent; + color: @basicStyledActiveTitleColor; } - .ui.inverted.styled.accordion .accordion[open] > .title, - .ui.inverted.styled.accordion .accordion .active.title { - background: @invertedStyledActiveChildTitleBackground; - color: @invertedStyledActiveChildTitleColor; + & when (@variationAccordionInverted) { + .ui.inverted.basic.styled.accordion > .title, + .ui.inverted.basic.styled.accordion .accordion > .title { + background: transparent; + color: @invertedBasicStyledTitleColor; + } + .ui.inverted.basic.styled.accordion > .title:hover, + .ui.inverted.basic.styled.accordion .accordion > .title:hover { + background: transparent; + color: @invertedBasicStyledTitleHoverColor; + } + .ui.inverted.basic.styled.accordion[open] > .title, + .ui.inverted.basic.styled.accordion .active.title, + .ui.inverted.basic.styled.accordion .accordion[open] > .title, + .ui.inverted.basic.styled.accordion .accordion .active.title { + background: transparent; + color: @invertedBasicStyledActiveTitleColor; + } } - } } -& when (@variationAccordionBasicStyled) { - .ui.basic.styled.accordion, - .ui.basic.styled.accordion .accordion { - background: transparent; - box-shadow: none; - } - .ui.basic.styled.accordion > .title, - .ui.basic.styled.accordion .accordion > .title { - border: none; - color: @basicStyledTitleColor; - } - .ui.basic.styled.accordion > .title:hover, - .ui.basic.styled.accordion .accordion > .title:hover { - background: transparent; - color: @basicStyledTitleHoverColor; - } - .ui.basic.styled.accordion[open] > .title, - .ui.basic.styled.accordion .active.title, - .ui.basic.styled.accordion .accordion[open] > .title, - .ui.basic.styled.accordion .accordion .active.title { - background: transparent; - color: @basicStyledActiveTitleColor; - } - & when (@variationAccordionInverted) { - .ui.inverted.basic.styled.accordion > .title, - .ui.inverted.basic.styled.accordion .accordion > .title { - background: transparent; - color: @invertedBasicStyledTitleColor; +& when (@variationAccordionTree) { + .ui.tree.accordion:not(.styled) .title ~ .content, + .ui.tree.accordion:not(.styled) .accordion .title ~ .content { + padding: @treeContentPadding; } - .ui.inverted.basic.styled.accordion > .title:hover, - .ui.inverted.basic.styled.accordion .accordion > .title:hover { - background: transparent; - color: @invertedBasicStyledTitleHoverColor; + .ui.tree.accordion > .content, + .ui.tree.accordion .accordion > .content { + margin-left: @treeContentLeftMargin; } - .ui.inverted.basic.styled.accordion[open] > .title, - .ui.inverted.basic.styled.accordion .active.title, - .ui.inverted.basic.styled.accordion .accordion[open] > .title, - .ui.inverted.basic.styled.accordion .accordion .active.title { - background: transparent; - color: @invertedBasicStyledActiveTitleColor; + .ui.tree.accordion .accordion { + margin-top: @treeContentTopMargin; } - } -} - -& when (@variationAccordionTree) { - .ui.tree.accordion:not(.styled) .title ~ .content, - .ui.tree.accordion:not(.styled) .accordion .title ~ .content { - padding:@treeContentPadding; - } - .ui.tree.accordion > .content, - .ui.tree.accordion .accordion > .content { - margin-left: @treeContentLeftMargin; - } - .ui.tree.accordion .accordion { - margin-top: @treeContentTopMargin; - } } .loadUIOverrides(); - diff --git a/definitions/modules/calendar.js b/definitions/modules/calendar.js index 336f85d..99051d4 100644 --- a/definitions/modules/calendar.js +++ b/definitions/modules/calendar.js @@ -1,1890 +1,2015 @@ /*! * # Fomantic-UI - Calendar - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://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 || '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 = $('
').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 = function () { - module.blur(); - return settings.onHidden.apply($container, arguments) - } - 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); - }; - } - 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 = $('
').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); - } - } - }, +(function ($, window, document) { + 'use strict'; - 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); - } + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } + window = window !== undefined && window.Math === Math + ? window + : globalThis; + + $.fn.calendar = function (parameters) { + var + $allModules = $(this), + $document = $(document), + + moduleSelector = $allModules.selector || '', + + time = Date.now(), + 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 - isYear = mode === 'year', - isMonth = mode === 'month', - isDay = mode === 'day', - isHour = mode === 'hour', - isMinute = mode === 'minute', - isTimeOnly = settings.type === 'time' + 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), + $activator = $module.find(selector.activator), + + element = this, + instance = $module.data(moduleNamespace), + $container = instance && instance.popupId ? $document.find('#' + instance.popupId) : $module.find(selector.popup), + + isTouch, + isTouchDown = false, + isInverted = $module.hasClass(className.inverted), + focusDateUsedForRange = false, + selectionComplete = false, + classObserver, + module ; - var multiMonth = Math.max(settings.multiMonth, 1); - var monthOffset = !isDay ? 0 : module.get.monthOffset(); + 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 || 'click'); + }, + popup: function () { + if (settings.inline) { + return; + } + if ($activator.length === 0) { + $activator = $module.children().first(); + if ($activator.length === 0) { + return; + } + } + if ($.fn.popup === undefined) { + module.error(error.popup); - var - minute = display.getMinutes(), - hour = display.getHours(), - day = display.getDate(), - startMonth = display.getMonth() + monthOffset, - year = display.getFullYear() - ; + return; + } + if ($container.length === 0) { + if (settings.context) { + module.popupId = namespace + '_popup_' + (Math.random().toString(16) + '000000000').slice(2, 10); + $container = $('
', { id: module.popupId }).addClass(className.popup).appendTo($document.find(settings.context)); + } else { + // 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 = $('
').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 = function () { + module.blur(); + + return settings.onHidden.apply($container, arguments); + }; + if ($input.length === 0) { + // no input, $container has to handle focus/blur + $container.attr('tabindex', '0'); + onVisible = function () { + module.refreshTooltips(); + module.focus(); + + return settings.onVisible.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, + movePopup: !settings.context, + 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 > 0 && !settings.inline) { + return; + } + settings.inline = true; + $container = $('
').addClass(className.calendar).appendTo($module); + if ($input.length === 0) { + $container.attr('tabindex', '0'); + } + }, + input: function () { + if (settings.touchReadonly && $input.length > 0 && 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 > 0) { + 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 || parser.date(settings.initialDate, settings) || today) + ; + + if (!focusDate) { + focusDate = display; + module.set.focusDate(focusDate, false, false); + } - var columns = isDay ? settings.showWeekNumbers ? 8 : 7 : isHour ? 4 : timeGap['column']; - var rows = isDay || isHour ? 6 : timeGap['row']; - var pages = isDay ? multiMonth : 1; + 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 = $('
').addClass(className.grid).appendTo(container); + } - var container = $container; - var tooltipPosition = container.hasClass("left") ? "right center" : "left center"; - container.empty(); - if (pages > 1) { - pageGrid = $('
').addClass(className.grid).appendTo(container); - } + for (p = 0; p < pages; p++) { + if (pages > 1) { + var pageColumn = $('
').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 // eslint-disable-line unicorn/no-nested-ternary + ? 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 // eslint-disable-line unicorn/no-nested-ternary + ? new Date(year, month + 1, 1) + : new Date(year, month, day + 1))) + ; + + var tempMode = mode; + if (isDay && settings.showWeekNumbers) { + tempMode += ' andweek'; + } + var 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 = $('').appendTo(table); + + row = $('').appendTo(thead); + cell = $('').appendTo(thead); + if (settings.showWeekNumbers) { + cell = $('').appendTo(table); + i = isYear + ? Math.ceil(year / 10) * 10 - 9 + : (isDay ? 1 - firstMonthDayColumn : 0); + for (r = 0; r < rows; r++) { + row = $('').appendTo(tbody); + if (isDay && settings.showWeekNumbers) { + cell = $('').appendTo(tbody); + var todayButton = $('
').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 = $('').addClass(className.link).appendTo(cell); + headerText.text(module.helper.dateFormat(formatter[mode + 'Header'], headerDate)); + var newMode = isMonth + ? (settings.disableYear ? 'day' : 'year') + : (isDay + ? (settings.disableMonth ? 'year' : 'month') // eslint-disable-line unicorn/no-nested-ternary + : 'day'); + headerText.data(metadata.mode, newMode); + + if (p === 0) { + var prev = $('').addClass(className.prev).appendTo(cell); + prev.data(metadata.focusDate, prevDate); + prev.toggleClass(className.disabledCell, !module.helper.isDateInRange(prevLast, mode)); + $('').addClass(className.prevIcon).appendTo(prev); + } + + if (p === pages - 1) { + var next = $('').addClass(className.next).appendTo(cell); + next.data(metadata.focusDate, nextDate); + next.toggleClass(className.disabledCell, !module.helper.isDateInRange(nextFirst, mode)); + $('').addClass(className.nextIcon).appendTo(next); + } + if (isDay) { + row = $('
').appendTo(row); + cell.text(settings.text.weekNo); + cell.addClass(className.weekCell); + textColumns--; + } + for (i = 0; i < textColumns; i++) { + cell = $('').appendTo(row); + cell.text(formatter.dayColumnHeader((i + settings.firstDayOfWeek) % 7, settings)); + } + } + } + + var tbody = $('
').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 // eslint-disable-line unicorn/no-nested-ternary + ? 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 // eslint-disable-line unicorn/no-nested-ternary + ? cellDate.getDate() + : module.helper.dateFormat(formatter.cellTime, cellDate))); + cell = $('').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); + var eventDate; + 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]); + } + } + if (mode === 'hour') { + var disabledHour = module.helper.findHourAsObject(cellDate, mode, settings.disabledHours); + if (disabledHour !== null && disabledHour[metadata.message]) { + cell.attr('data-tooltip', disabledHour[metadata.message]); + cell.attr('data-position', disabledHour[metadata.position] || tooltipPosition); + if (disabledHour[metadata.inverted] || (isInverted && disabledHour[metadata.inverted] === undefined)) { + cell.attr('data-inverted', ''); + } + if (disabledHour[metadata.variation]) { + cell.attr('data-variation', disabledHour[metadata.variation]); + } + } + } + } else { + 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 && !eventDate); + cell.toggleClass(className.disabledCell, disabled); + cell.toggleClass(className.activeCell, active && !(adjacent && disabled)); + 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 = $('
').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(/[^\d.]/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 > 0) { + $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 > 0) { + $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 > 0) { + // 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 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 === 9) { + // tab + module.popup('hide'); + } - for (p = 0; p < pages; p++) { - if (pages > 1) { - var pageColumn = $('
').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 = $('').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 = $('').appendTo(table); - - row = $('').appendTo(thead); - cell = $('').appendTo(thead); - if(settings.showWeekNumbers) { - cell = $('').appendTo(table); - i = isYear ? Math.ceil(year / 10) * 10 - 9 : isDay ? 1 - firstMonthDayColumn : 0; - for (r = 0; r < rows; r++) { - row = $('').appendTo(tbody); - if(isDay && settings.showWeekNumbers){ - cell = $('').appendTo(tbody); - var todayButton = $('
').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 = $('').addClass(className.link).appendTo(cell); - headerText.text(module.helper.dateFormat(formatter[mode+'Header'], headerDate)); - var newMode = isMonth ? (settings.disableYear ? 'day' : 'year') : - isDay ? (settings.disableMonth ? 'year' : 'month') : 'day'; - headerText.data(metadata.mode, newMode); - - if (p === 0) { - var prev = $('').addClass(className.prev).appendTo(cell); - prev.data(metadata.focusDate, prevDate); - prev.toggleClass(className.disabledCell, !module.helper.isDateInRange(prevLast, mode)); - $('').addClass(className.prevIcon).appendTo(prev); - } + if (module.popup('is visible')) { + var mode = module.get.mode(); + switch (keyCode) { + // arrow keys + case 37: + case 38: + case 39: + case 40: { + var bigIncrement = mode === 'day' + ? 7 + : (mode === 'hour' + ? 4 + : (mode === 'minute' ? timeGap.column : 3)); // eslint-disable-line unicorn/no-nested-ternary + var increment = keyCode === 37 + ? -1 + : (keyCode === 38 + ? -bigIncrement + : (keyCode === 39 ? 1 : bigIncrement)); // eslint-disable-line unicorn/no-nested-ternary + 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); + } + + break; + } + // enter key + case 13: { + var date = module.get.focusDate(); + if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) { + if (settings.onSelect.call(element, date, module.get.mode()) !== false) { + module.selectDate(date); + } + } + // disable form submission: + event.preventDefault(); + event.stopPropagation(); + + break; + } + // escape key + case 27: { + module.popup('hide'); + event.stopPropagation(); + + break; + } + } + } - if (p === pages - 1) { - var next = $('').addClass(className.next).appendTo(cell); - next.data(metadata.focusDate, nextDate); - next.toggleClass(className.disabledCell, !module.helper.isDateInRange(nextFirst, mode)); - $('').addClass(className.nextIcon).appendTo(next); - } - if (isDay) { - row = $('
').appendTo(row); - cell.text(settings.text.weekNo); - cell.addClass(className.weekCell); - textColumns--; - } - for (i = 0; i < textColumns; i++) { - cell = $('').appendTo(row); - cell.text(formatter.dayColumnHeader((i + settings.firstDayOfWeek) % 7, settings)); - } - } - } - - var tbody = $('
').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() : - module.helper.dateFormat(formatter.cellTime,cellDate); - cell = $('').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); - var eventDate; - 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]); - } - } - if (mode === 'hour') { - var disabledHour = module.helper.findHourAsObject(cellDate, mode, settings.disabledHours); - if (disabledHour !== null && disabledHour[metadata.message]) { - cell.attr("data-tooltip", disabledHour[metadata.message]); - cell.attr("data-position", disabledHour[metadata.position] || tooltipPosition); - if(disabledHour[metadata.inverted] || (isInverted && disabledHour[metadata.inverted] === undefined)) { - cell.attr("data-inverted", ''); - } - if(disabledHour[metadata.variation]) { - cell.attr("data-variation", disabledHour[metadata.variation]); - } - } - } - } else { - 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]); - } - } + 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 = module.helper.dateFormat(formatter[settings.type], date); + $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(); } - } - var active = module.helper.dateEqual(cellDate, date, mode); - var isToday = module.helper.dateEqual(cellDate, today, mode); - cell.toggleClass(className.adjacentCell, adjacent && !eventDate); - cell.toggleClass(className.disabledCell, disabled); - cell.toggleClass(className.activeCell, active && !(adjacent && disabled)); - 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 = $('
').attr('colspan', '' + columns).addClass(className.today).appendTo(todayRow); - todayButton.text(formatter.today(settings)); - todayButton.data(metadata.date, today); - } + disconnect: { + classObserver: function () { + if ($input.length > 0 && classObserver) { + classObserver.disconnect(); + } + }, + }, + + observe: { + class: function () { + if ($input.length > 0 && 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 = 24 * 3600 * 1000, + ms7d = 7 * ms1d, + 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; + }, + formattedDate: function (format, date) { + return module.helper.dateFormat(format || formatter[settings.type], date || module.get.date()); + }, + 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) || settings.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; + } - module.update.focus(false, table); + return settings.type === 'time' + ? 'hour' + : (settings.type === 'month' + ? 'month' + : (settings.type === 'year' ? 'year' : 'day')); // eslint-disable-line unicorn/no-nested-ternary + }, + 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'); + } + } - if(settings.inline){ - module.refreshTooltips(); - } - } - } - }, + return validModes; + }, + isTouch: function () { + try { + document.createEvent('TouchEvent'); - 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); - }); - } - }, + return true; + } catch (e) { + return false; + } + }, + calendarModule: function (selector) { + if (!selector) { + return null; + } + if (!(selector instanceof $)) { + selector = $document.find(selector).first(); + } - refresh: function () { - module.create.calendar(); - }, + // assume range related calendars are using the same namespace + return selector.data(moduleNamespace); + }, + }, - 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)); - } - }); - }, + set: { + date: function (date, updateInput, fireChange) { + updateInput = updateInput !== false; + fireChange = fireChange !== false; + date = module.helper.sanitiseDate(date); + date = module.helper.dateInRange(date); - 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); - } - } - }, + var mode = module.get.mode(); + var text = module.helper.dateFormat(formatter[settings.type], date); - unbind: { - events: function () { - module.debug('Unbinding events'); - $container.off(eventNamespace); - if ($input.length) { - $input.off(eventNamespace); - } - } - }, + if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) { + return false; + } - 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 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 === 9) { - //tab - module.popup('hide'); - } + module.set.focusDate(date); - if (module.popup('is visible')) { - var mode = module.get.mode(); - if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) { - //arrow keys - 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 date = module.get.focusDate(); - if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) { - if (settings.onSelect.call(element, date, module.get.mode()) !== false) { - module.selectDate(date); - } - } - //disable form submission: - event.preventDefault(); - event.stopPropagation(); - } else if (keyCode === 27) { - module.popup('hide'); - event.stopPropagation(); - } - } + if (settings.isDisabled(date, mode)) { + return false; + } - 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 = module.helper.dateFormat(formatter[settings.type], date); - $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(); - } - }); - } - } - }, + 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(); + } + module.set.dataKeyValue(metadata.date, date); - observeChanges: function() { - if('MutationObserver' in window) { - classObserver = new MutationObserver(module.event.class.mutation); - module.debug('Setting up mutation observer', classObserver); - module.observe.class(); - } - }, + if (updateInput && $input.length > 0) { + $input.val(text); + } - disconnect: { - classObserver: function() { - if($input.length && classObserver) { - classObserver.disconnect(); - } - } - }, + 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(); + } - observe: { - class: function() { - if($input.length && classObserver) { - classObserver.observe($module[0], { - attributes : true - }); - } - } - }, + 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) { + endModule.refresh(); + 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')); // eslint-disable-line unicorn/no-nested-ternary + 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); + } + } + }, - is: { - disabled: function() { - return $module.hasClass(className.disabled); - } - }, + changeDate: function (date) { + module.set.date(date); + }, - check: { - disabled: function(){ - $input.attr('tabindex',module.is.disabled() ? -1 : 0); - } - }, + clear: function () { + module.set.date(); + }, - 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; - }(); - }, - formattedDate: function(format, date) { - return module.helper.dateFormat(format || formatter[settings.type], date || module.get.date()); - }, - 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) || settings.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 = $(document).find(selector).first(); - } - //assume range related calendars are using the same namespace - return selector.data(moduleNamespace); - } - }, + popup: function () { + return $activator.popup.apply($activator, arguments); + }, - set: { - date: function (date, updateInput, fireChange) { - updateInput = updateInput !== false; - fireChange = fireChange !== false; - date = module.helper.sanitiseDate(date); - date = module.helper.dateInRange(date); + focus: function () { + if ($input.length > 0) { + $input.trigger('focus'); + } else { + $container.trigger('focus'); + } + }, + blur: function () { + if ($input.length > 0) { + $input.trigger('blur'); + } else { + $container.trigger('blur'); + } + }, - var mode = module.get.mode(); - var text = module.helper.dateFormat(formatter[settings.type],date); + helper: { + dateFormat: function (format, date) { + if (!(date instanceof Date)) { + return ''; + } + if (typeof format === 'function') { + return format.call(module, date, settings); + } - if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) { - return false; - } + var + D = date.getDate(), + M = date.getMonth(), + Y = date.getFullYear(), + d = date.getDay(), + H = date.getHours(), + m = date.getMinutes(), + s = date.getSeconds(), + w = module.get.weekOfYear(Y, M, D + 1 - settings.firstDayOfWeek), + h = H % 12 || 12, + a = H < 12 ? settings.text.am.toLowerCase() : settings.text.pm.toLowerCase(), + tokens = { + D: D, + DD: ('0' + D).slice(-2), + M: M + 1, + MM: ('0' + (M + 1)).slice(-2), + MMM: settings.text.monthsShort[M], + MMMM: settings.text.months[M], + Y: Y, + YY: String(Y).slice(2), + YYYY: Y, + d: d, + dd: settings.text.dayNamesShort[d].slice(0, 2), + ddd: settings.text.dayNamesShort[d], + dddd: settings.text.dayNames[d], + h: h, + hh: ('0' + h).slice(-2), + H: H, + HH: ('0' + H).slice(-2), + m: m, + mm: ('0' + m).slice(-2), + s: s, + ss: ('0' + s).slice(-2), + a: a, + A: a.toUpperCase(), + S: ['th', 'st', 'nd', 'rd'][(D % 10) > 3 ? 0 : ((D % 100) - (D % 10) === 10 ? 0 : D % 10)], + w: w, + ww: ('0' + w).slice(-2), + } + ; + + return format.replace(settings.regExp.token, function (match) { + if (match in tokens) { + return tokens[match]; + } + + return match.slice(1, -1); + }); + }, + isDisabled: function (date, mode) { + return (mode === 'day' || mode === 'month' || mode === 'year' || mode === 'hour') && (((mode === 'day' && settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function (d) { + var blocked = false; + + if (typeof d === 'string') { + d = module.helper.sanitiseDate(d); + } + if (d instanceof Date) { + blocked = module.helper.dateEqual(date, d, mode); + } else if (d !== null && typeof d === 'object') { + if (d[metadata.year]) { + if (typeof d[metadata.year] === 'number') { + blocked = date.getFullYear() === d[metadata.year]; + } else if (Array.isArray(d[metadata.year])) { + blocked = d[metadata.year].indexOf(date.getFullYear()) > -1; + } + } else if (d[metadata.month]) { + if (typeof d[metadata.month] === 'number') { + blocked = date.getMonth() === d[metadata.month]; + } else if (Array.isArray(d[metadata.month])) { + blocked = d[metadata.month].indexOf(date.getMonth()) > -1; + } else if (d[metadata.month] instanceof Date) { + var sdate = module.helper.sanitiseDate(d[metadata.month]); + + blocked = (date.getMonth() === sdate.getMonth()) && (date.getFullYear() === sdate.getFullYear()); + } + } else if (d[metadata.date] && mode === 'day') { + if (d[metadata.date] instanceof Date) { + blocked = module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode); + } else if (Array.isArray(d[metadata.date])) { + blocked = d[metadata.date].some(function (idate) { + return module.helper.dateEqual(date, idate, mode); + }); + } + } + } + + return blocked; + })) || (mode === 'hour' && settings.disabledHours.some(function (d) { + var blocked = false; + + if (typeof d === 'string') { + d = module.helper.sanitiseDate(d); + } + if (d instanceof Date) { + blocked = module.helper.dateEqual(date, d, mode); + } else if (typeof d === 'number') { + blocked = date.getHours() === d; + } else if (d !== null && typeof d === 'object') { + if (d[metadata.date]) { + if (d[metadata.date] instanceof Date) { + blocked = module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date])); + } else if (Array.isArray(d[metadata.date])) { + blocked = d[metadata.date].some(function (idate) { + return module.helper.dateEqual(date, idate, mode); + }); + } + } + + if (d[metadata.days]) { + if (typeof d[metadata.days] === 'number') { + blocked = date.getDay() === d[metadata.days]; + } else if (Array.isArray(d[metadata.days])) { + blocked = d[metadata.days].indexOf(date.getDay()) > -1; + } + } + + if (d[metadata.hours]) { + if (typeof d[metadata.hours] === 'number') { + blocked = blocked && date.getHours() === d[metadata.hours]; + } else if (Array.isArray(d[metadata.hours])) { + blocked = blocked && d[metadata.hours].indexOf(date.getHours()) > -1; + } + } + } + + return blocked; + }))); + }, + isEnabled: function (date, mode) { + if (mode === 'day') { + return settings.enabledDates.length === 0 || settings.enabledDates.some(function (d) { + var enabled = false; + + if (typeof d === 'string') { + d = module.helper.sanitiseDate(d); + } + if (d instanceof Date) { + enabled = module.helper.dateEqual(date, d, mode); + } else if (d !== null && typeof d === 'object' && d[metadata.date]) { + enabled = module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode); + } + + return enabled; + }); + } - module.set.focusDate(date); + 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; + } + if (d !== null && typeof d === 'object') { + if (d[metadata.year]) { + if (typeof d[metadata.year] === 'number' && date.getFullYear() === d[metadata.year]) { + return d; + } + 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; + } + 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; + } + if (Array.isArray(d[metadata.date])) { + if (d[metadata.date].some(function (idate) { + return module.helper.dateEqual(date, idate, mode); + })) { + return d; + } + } + } + } + } + } - if (settings.isDisabled(date, mode)) { - return false; - } + return null; + }, + findHourAsObject: function (date, mode, hours) { + if (mode === 'hour') { + var d; + var hourCheck = function (date, d) { + if (d[metadata.hours]) { + if (typeof d[metadata.hours] === 'number' && date.getHours() === d[metadata.hours]) { + return d; + } + if (Array.isArray(d[metadata.hours])) { + if (d[metadata.hours].indexOf(date.getHours()) > -1) { + return d; + } + } + } + }; + for (var i = 0; i < hours.length; i++) { + d = hours[i]; + if (typeof d === 'number' && date.getHours() === d) { + return null; + } + if (d !== null && typeof d === 'object') { + if (d[metadata.days] && hourCheck(date, d)) { + if (typeof d[metadata.days] === 'number' && date.getDay() === d[metadata.days]) { + return d; + } + if (Array.isArray(d[metadata.days])) { + if (d[metadata.days].indexOf(date.getDay()) > -1) { + return d; + } + } + } else if (d[metadata.date] && hourCheck(date, d)) { + if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]))) { + return d; + } + if (Array.isArray(d[metadata.date])) { + if (d[metadata.date].some(function (idate) { + return module.helper.dateEqual(date, idate, mode); + })) { + return d; + } + } + } else if (hourCheck(date, d)) { + return d; + } + } + } + } - 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); + return null; + }, + sanitiseDate: function (date) { + if (!(date instanceof Date)) { + date = parser.date('' + date, settings); + } + if (!date || isNaN(date.getTime())) { + return null; + } - if (updateInput && $input.length) { - $input.val(text); - } + return date; + }, + dateDiff: function (date1, date2, mode) { + if (!mode) { + mode = 'day'; + } - 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; - } - }, + 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) // eslint-disable-line unicorn/no-nested-ternary + : (maxDate && module.helper.dateDiff(maxDate, date, 'minute') > 0 // eslint-disable-line unicorn/no-nested-ternary + ? (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 = Date.now(); + 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 (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 = context || element; + 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; + } - 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) { - endModule.refresh(); - if (endModule.setting('on') !== 'focus') { - endModule.popup('show'); - } - endModule.focus(); + return found; + }, + }; + + if (methodInvoked) { + if (instance === undefined) { + module.initialize(); } - } - } - } 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); + module.invoke(query); } else { - module.set.focusDate(date); - } - } + 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: true, + + context: 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 date from 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 + 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 + monthOffset: 0, // position current month by offset when multimonth > 1 + minTimeGap: 5, + showWeekNumbers: false, // show Number of Week at the very first column of a dayView + disabledHours: [], // specific hour(s) which won't be selectable and contain additional information. + 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', + observeChanges: false, + hideOnScroll: false, }, - changeDate: function (date) { - module.set.date(date); + text: { + days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], + dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], + 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', }, - clear: function () { - module.set.date(undefined); + formatter: { + yearHeader: function (date, settings) { + var decadeYear = Math.ceil(date.getFullYear() / 10) * 10; + + return (decadeYear - 9) + ' - ' + (decadeYear + 2); + }, + monthHeader: 'YYYY', + dayHeader: 'MMMM YYYY', + hourHeader: 'MMMM D, YYYY', + minuteHeader: 'MMMM D, YYYY', + dayColumnHeader: function (day, settings) { + return settings.text.days[day]; + }, + datetime: 'MMMM D, YYYY h:mm A', + date: 'MMMM D, YYYY', + time: 'h:mm A', + cellTime: 'h:mm A', + month: 'MMMM YYYY', + year: 'YYYY', + today: function (settings) { + return settings.type === 'date' ? settings.text.today : settings.text.now; + }, + cell: function (cell, date, cellOptions) {}, }, - popup: function () { - return $activator.popup.apply($activator, arguments); - }, + parser: { + date: function (text, settings) { + if (text instanceof Date) { + return text; + } + if (!text) { + return null; + } + text = String(text).trim().replace(/([./:-])\s+/g, '$1').replace(/\s+([./:-])/g, '$1') + .replace(/\s+/g, ' '); + if (text.length === 0) { + return null; + } + if (/^\d{4}(?:[./-]\d{1,2}){2}$/.test(text)) { + text = text.replace(/[./-]/g, '/') + ' 00:00:00'; + } + // Reverse date and month in some cases + text = settings.monthFirst || !/^\d{1,2}[./-]/.test(text) ? text : text.replace(/[./-]/g, '/').replace(/(\d+)\/(\d+)/, '$2/$1'); + var textDate = new Date(text); + var numberOnly = text.match(/^\d+$/) !== null; + if (!numberOnly && !isNaN(textDate.getDate())) { + return textDate; + } + text = text.toLowerCase(); - focus: function () { - if ($input.length) { - $input.focus(); - } else { - $container.focus(); - } - }, - blur: function () { - if ($input.length) { - $input.blur(); - } else { - $container.blur(); - } - }, + var + i, + j, + k + ; + var + minute = -1, + hour = -1, + day = -1, + month = -1, + year = -1 + ; + var isAm; - helper: { - dateFormat: function(format,date) { - if (!(date instanceof Date)) { - return ''; - } - if(typeof format === 'function') { - return format.call(module, date, settings); - } + var isTimeOnly = settings.type === 'time'; + var isDateOnly = settings.type.indexOf('time') < 0; - var D = date.getDate(), - M = date.getMonth(), - Y = date.getFullYear(), - d = date.getDay(), - H = date.getHours(), - m = date.getMinutes(), - s = date.getSeconds(), - w = module.get.weekOfYear(Y,M,D+1-settings.firstDayOfWeek), - h = H % 12 || 12, - a = H < 12 ? settings.text.am.toLowerCase() : settings.text.pm.toLowerCase(), - tokens = { - D: D, - DD: ('0'+D).slice(-2), - M: M + 1, - MM: ('0'+(M+1)).slice(-2), - MMM: settings.text.monthsShort[M], - MMMM: settings.text.months[M], - Y: Y, - YY: String(Y).slice(2), - YYYY: Y, - d: d, - dd: settings.text.dayNamesShort[d].slice(0,2), - ddd: settings.text.dayNamesShort[d], - dddd: settings.text.dayNames[d], - h: h, - hh: ('0'+h).slice(-2), - H: H, - HH: ('0'+H).slice(-2), - m: m, - mm: ('0'+m).slice(-2), - s: s, - ss: ('0'+s).slice(-2), - a: a, - A: a.toUpperCase(), - S: ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D % 100 - D % 10 !== 10) * D % 10], - w: w, - ww: ('0'+w).slice(-2) - } - ; - return format.replace(settings.regExp.token, function (match) { - if (match in tokens) { - return tokens[match]; - } - return match.slice(1, match.length - 1); - }); - }, - isDisabled: function(date, mode) { - return (mode === 'day' || mode === 'month' || mode === 'year' || mode === 'hour') && (((mode === 'day' && 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); - }); - } - } - } - })) || (mode === 'hour' && settings.disabledHours.some(function(d){ - if (typeof d === 'string') { - d = module.helper.sanitiseDate(d); - } - if (d instanceof Date) { - return module.helper.dateEqual(date, d, mode); - } else if (typeof d === 'number') { - return date.getHours() === d; - } - if (d !== null && typeof d === 'object') { - var blocked = true; - - if (d[metadata.date]) { - if (d[metadata.date] instanceof Date) { - blocked = module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date])); - } else if (Array.isArray(d[metadata.date])) { - return d[metadata.date].some(function(idate) { - blocked = module.helper.dateEqual(date, idate, mode); - }); - } + 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], 10); + if (isNaN(j)) { + j = 0; + } + if (k === 0) { + hour = j % 24; + } else { + minute = j % 60; + } + } + } + numbers.splice(i, 1); + } + } } - if (d[metadata.days]) { - if (typeof d[metadata.days] === 'number') { - blocked = date.getDay() == d[metadata.days]; - } else if (Array.isArray(d[metadata.days])) { - blocked = d[metadata.days].indexOf(date.getDay()) > -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.slice(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], 10); + 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], 10); + if (isNaN(j)) { + continue; + } + if (j >= 1 && j <= 12) { + month = j; + numbers.splice(k, 1); + + break; + } + } + } + + // day + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i], 10); + if (isNaN(j)) { + continue; + } + if (j >= 1 && 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], 10); + if (isNaN(j)) { + continue; + } + if (j <= 99) { + j += settings.currentCentury; + } + year = j; + numbers.splice(i, 1); + + break; + } + } } - if (d[metadata.hours]) { - if (typeof d[metadata.hours] === 'number') { - return blocked && date.getHours() == d[metadata.hours]; - } else if (Array.isArray(d[metadata.hours])) { - return blocked && d[metadata.hours].indexOf(date.getHours()) > -1; - } + if (!isDateOnly) { + // hour + if (hour < 0) { + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i], 10); + if (isNaN(j)) { + continue; + } + if (j >= 0 && j <= 23) { + hour = j; + numbers.splice(i, 1); + + break; + } + } + } + + // minute + if (minute < 0) { + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i], 10); + if (isNaN(j)) { + continue; + } + if (j >= 0 && j <= 59) { + minute = j; + numbers.splice(i, 1); + + break; + } + } + } } - } - }))); - }, - 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 (minute < 0 && hour < 0 && day < 0 && month < 0 && year < 0) { + return null; } - if (d instanceof Date) { - return module.helper.dateEqual(date, d, mode); + + if (minute < 0) { + minute = 0; } - if (d !== null && typeof d === 'object' && d[metadata.date]) { - return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode); + if (hour < 0) { + hour = 0; } - }); - } 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 (day < 0) { + day = 1; } - if (d instanceof Date && module.helper.dateEqual(date, d, mode)) { - var dateObject = {}; - dateObject[metadata.date] = d; - return dateObject; + if (month < 0) { + month = 1; } - 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; - } - } - } + if (year < 0) { + year = new Date().getFullYear(); } - } - } - return null; - }, - findHourAsObject: function(date, mode, hours) { - if (mode === 'hour') { - var d; - var hourCheck = function(date, d) { - if (d[metadata.hours]) { - if (typeof d[metadata.hours] === 'number' && date.getHours() == d[metadata.hours]) { - return d; - } else if (Array.isArray(d[metadata.hours])) { - if (d[metadata.hours].indexOf(date.getHours()) > -1) { - return d; + + if (isAm !== undefined) { + if (isAm) { + if (hour === 12) { + hour = 0; + } + } else if (hour < 12) { + hour += 12; } - } } - } - for (var i = 0; i < hours.length; i++) { - d = hours[i]; - if (typeof d === 'number' && date.getHours() == d) { - return null; - } else if (d !== null && typeof d === 'object') { - if (d[metadata.days] && hourCheck(date,d)) { - if (typeof d[metadata.days] === 'number' && date.getDay() == d[metadata.days]) { - return d; - } else if (Array.isArray(d[metadata.days])) { - if (d[metadata.days].indexOf(date.getDay()) > -1) { - return d; - } - } - } else if (d[metadata.date] && hourCheck(date,d)) { - if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]))) { - 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; - } - } - } else if (hourCheck(date,d)) { - return d; - } + + 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 null; - }, - sanitiseDate: function (date) { - if (!(date instanceof Date)) { - date = parser.date('' + date, settings); - } - if (!date || isNaN(date.getTime())) { - return null; - } - 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; - } + + return isNaN(date.getTime()) ? null : date; + }, }, - 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]; - } + // 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; }, - internal: function (name, value) { - if( $.isPlainObject(name) ) { - $.extend(true, module, name); - } - else if(value !== undefined) { - module[name] = value; - } - else { - return module[name]; - } + + selector: { + popup: '.ui.popup', + input: 'input', + activator: 'input', + append: '.inline.field,.inline.fields', }, - 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); - } - } + + regExp: { + dateWords: /[^A-Za-z\u00C0-\u024F]+/g, + dateNumbers: /[^\d:]+/g, + token: /d{1,4}|D{1,2}|M{1,4}|YY(?:YY)?|([Hhmsw])\1?|[ASYa]|"[^"]*"|'[^']*'/g, }, - 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: { + popup: 'UI Popup, a required component is not included in this page', + method: 'The method you called is not defined.', }, - error: function () { - if (!settings.silent) { - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); - module.error.apply(console, arguments); - } + + 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', }, - 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 = []; - } + + 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', + hours: 'hours', + days: 'days', }, - invoke: function (query, passedArguments, context) { - var - object = instance, - maxDepth, - found, - response - ; - passedArguments = passedArguments || queryArguments; - context = context || element; - 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: true, - - 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 date from 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 - 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 - monthOffset : 0, // position current month by offset when multimonth > 1 - minTimeGap : 5, - showWeekNumbers : false, // show Number of Week at the very first column of a dayView - disabledHours : [], // specific hour(s) which won't be selectable and contain additional information. - 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', - observeChanges: false, - hideOnScroll: false - }, - - text: { - days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], - dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], - dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], - 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: { - yearHeader: function (date, settings) { - var decadeYear = Math.ceil(date.getFullYear() / 10) * 10; - return (decadeYear - 9) + ' - ' + (decadeYear + 2); - }, - monthHeader: 'YYYY', - dayHeader: 'MMMM YYYY', - hourHeader: 'MMMM D, YYYY', - minuteHeader: 'MMMM D, YYYY', - dayColumnHeader: function (day, settings) { - return settings.text.days[day]; - }, - datetime: 'MMMM D, YYYY h:mm A', - date: 'MMMM D, YYYY', - time: 'h:mm A', - cellTime: 'h:mm A', - month: 'MMMM YYYY', - year: 'YYYY', - 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().replace(/([.:\/\-])\s+/g,'$1').replace(/\s+([.:\/-])/g,'$1').replace(/\s+/g,' '); - if (text.length === 0) { - return null; - } - if(text.match(/^[0-9]{4}[\/\-\.][0-9]{1,2}[\/\-\.][0-9]{1,2}$/)){ - text = text.replace(/[\/\-\.]/g,'/') + ' 00:00:00'; - } - // Reverse date and month in some cases - text = settings.monthFirst || !text.match(/^[0-9]{1,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, - token: /d{1,4}|D{1,2}|M{1,4}|YY(?:YY)?|([Hhmsw])\1?|[SAaY]|"[^"]*"|'[^']*'/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', - hours: 'hours', - days: 'days' - }, - - eventClass: 'blue' -}; + eventClass: 'blue', + }; })(jQuery, window, document); diff --git a/definitions/modules/calendar.less b/definitions/modules/calendar.less index 4342546..0356852 100644 --- a/definitions/modules/calendar.less +++ b/definitions/modules/calendar.less @@ -1,10 +1,10 @@ /*! * # Fomantic-UI - Calendar - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ @@ -12,41 +12,45 @@ Theme *******************************/ -@type : 'module'; -@element : 'calendar'; +@type: "module"; +@element: "calendar"; -@import (multiple) '../../theme.config'; +@import (multiple) "../../theme.config"; /******************************* Popup *******************************/ -.ui.calendar .ui.popup { - max-width: none; - padding: 0; - border: none; - user-select: none; +.ui.calendar.popup { + max-width: none; + padding: 0; + border: none; + user-select: none; + &.inverted::before when (@variationCalendarInverted) { + background: @invertedArrowBackground; + } } /******************************* Calendar *******************************/ -.ui.calendar .calendar:focus { - outline: 0; +.ui.calendar .calendar:focus, +.ui.calendar.popup:focus { + outline: 0; } /******************************* Grid *******************************/ -.ui.calendar .ui.popup .ui.grid { - display: block; - white-space: nowrap; +.ui.calendar.popup .ui.grid { + display: block; + white-space: nowrap; } -.ui.calendar .ui.popup .ui.grid > .column { - width: auto; +.ui.calendar.popup .ui.grid > .column { + width: auto; } /******************************* @@ -56,140 +60,140 @@ .ui.calendar .ui.table.year, .ui.calendar .ui.table.month, .ui.calendar .ui.table.minute { - min-width: 15em; + min-width: 15em; } .ui.calendar .ui.table.day { - min-width: 18em; + min-width: 18em; } .ui.calendar .ui.table.day.andweek { - min-width: 22em; + min-width: 22em; } .ui.calendar .ui.table.hour { - min-width: 20em; + min-width: 20em; } .ui.calendar .ui.table tr th, .ui.calendar .ui.table tr td { - padding: 0.5em; - white-space: nowrap; + padding: 0.5em; + white-space: nowrap; } .ui.calendar .ui.table tr th { - border-left: none; + border-left: none; } .ui.calendar .ui.table tr th i.icon { - margin: 0; + margin: 0; } .ui.calendar .ui.table tr:first-child th { - position: relative; - padding-left: 0; - padding-right: 0; + position: relative; + padding-left: 0; + padding-right: 0; } .ui.calendar .ui.table.day tr:first-child th { - border: none; + border: none; } .ui.calendar .ui.table.day tr:nth-child(2) th { - padding-top: 0.2em; - padding-bottom: 0.3em; + padding-top: 0.2em; + padding-bottom: 0.3em; } .ui.calendar .ui.table tr td { - padding-left: 0.1em; - padding-right: 0.1em; + padding-left: 0.1em; + padding-right: 0.1em; } .ui.calendar .ui.table tr .link { - cursor: pointer; + cursor: pointer; } .ui.calendar .ui.table tr .prev.link { - width: 14.28571429%; - position: absolute; - left: 0; + width: 14.28571%; + position: absolute; + left: 0; } .ui.calendar .ui.table tr .next.link { - width: 14.28571429%; - position: absolute; - right: 0; + width: 14.28571%; + position: absolute; + right: 0; } .ui.ui.calendar .ui.table tr .disabled { - pointer-events: auto; - cursor: default; - color: @disabledTextColor; + pointer-events: auto; + cursor: default; + color: @disabledTextColor; } .ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active) { - color: @adjacentTextColor; - background: @adjacentBackground; + color: @adjacentTextColor; + background: @adjacentBackground; } -/*-------------- +/* -------------- States ----------------*/ +--------------- */ .ui.calendar .ui.table tr td.today { - font-weight: @todayFontWeight; + font-weight: @todayFontWeight; } .ui.calendar .ui.table tr td.range { - background: @rangeBackground; - color: @rangeTextColor; - box-shadow: @rangeBoxShadow; + 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; +.ui.calendar:not(.disabled):focus .ui.table tbody tr td.focus, +.ui.calendar:not(.disabled).popup.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):not(.active) { - color: @adjacentInvertedTextColor; - background: @adjacentInvertedBackground; - } + .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).popup.active .ui.table.inverted tbody tr td.focus { + box-shadow: @focusInvertedBoxShadow; + } + .ui.inverted.calendar .ui.ui.ui.inverted.table tr .disabled { + color: @invertedDisabledTextColor; + } + + .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) { + color: @adjacentInvertedTextColor; + background: @adjacentInvertedBackground; + } } & when (@variationCalendarMultiMonth) { - .ui.calendar.popup > .ui.ui.grid { - margin: @multiMonthMargin; - & > .column:not(:first-child) { - padding-left: @multiMonthPadding; - & > .ui.table { - border-top-left-radius:0; - border-bottom-left-radius:0; - } - } - & > .column:not(:last-child) { - padding-right:@multiMonthPadding; - & > .ui.table { - border-top-right-radius:0; - border-bottom-right-radius:0; - } + .ui.calendar.popup > .ui.ui.grid { + margin: @multiMonthMargin; + & > .column:not(:first-child) { + padding-left: @multiMonthPadding; + & > .ui.table { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + & > .column:not(:last-child) { + padding-right: @multiMonthPadding; + & > .ui.table { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } } - } } /******************************* @@ -197,19 +201,18 @@ *******************************/ & when (@variationCalendarDisabled) { - /*-------------------- - Disabled - ---------------------*/ + /* -------------------- + Disabled + --------------------- */ - .ui.disabled.calendar { - opacity: @disabledOpacity; - } + .ui.disabled.calendar { + opacity: @disabledOpacity; + } - .ui.disabled.calendar > .input, - .ui.disabled.calendar .ui.table tr .link { - pointer-events: none; - } + .ui.disabled.calendar > .input, + .ui.disabled.calendar .ui.table tr .link { + pointer-events: none; + } } - .loadUIOverrides(); diff --git a/definitions/modules/checkbox.js b/definitions/modules/checkbox.js index 0c0fd8b..9c72ee2 100644 --- a/definitions/modules/checkbox.js +++ b/definitions/modules/checkbox.js @@ -1,883 +1,884 @@ /*! * # Fomantic-UI - Checkbox - * http://github.com/fomantic/Fomantic-UI/ + * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license - * http://opensource.org/licenses/MIT + * https://opensource.org/licenses/MIT * */ -;(function ($, window, document, undefined) { +(function ($, window, document) { + 'use strict'; -'use strict'; + function isFunction(obj) { + return typeof obj === 'function' && typeof obj.nodeType !== 'number'; + } -$.isFunction = $.isFunction || function(obj) { - return typeof obj === "function" && typeof obj.nodeType !== "number"; -}; + window = window !== undefined && window.Math === Math + ? window + : globalThis; -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 || '', -$.fn.checkbox = function(parameters) { - var - $allModules = $(this), - moduleSelector = $allModules.selector || '', + time = Date.now(), + performance = [], - time = new Date().getTime(), - performance = [], + query = arguments[0], + methodInvoked = typeof query === 'string', + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; - 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); - }, + $allModules.each(function () { + var + settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), - fix: { - reference: function() { - if( $module.is(selector.input) ) { - module.debug('Behavior called on adjusting invoked element'); - $module = $module.closest(selector.checkbox); - module.refresh(); - } - } - }, + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, - 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(); - }, + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, - refresh: function() { - $label = $module.children(selector.label); - $input = $module.children(selector.input); - input = $input[0]; - }, + $module = $(this), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], - hide: { - input: function() { - module.verbose('Modifying z-index to be unselectable'); - $input.addClass(className.hidden); - } - }, - show: { - input: function() { - module.verbose('Modifying z-index to be selectable'); - $input.removeClass(className.hidden); - } - }, + initialLoad = false, + shortcutPressed = false, + instance = $module.data(moduleNamespace), - 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 - } + observer, + element = this, + module ; - 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; - } - } - - shortcutPressed = false; - if(key == keyCode.escape) { - module.verbose('Escape key pressed blurring field'); - $input.blur(); - shortcutPressed = true; - event.stopPropagation(); - } - else if(!event.ctrlKey && module.can.change()) { - if( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey) ) { - module.verbose('Enter/space key pressed, toggling checkbox'); - module.toggle(); - shortcutPressed = true; - } else if($module.is('.toggle, .slider') && !module.is.radio()) { - if(key == keyCode.left && module.is.checked()) { - module.uncheck(); - shortcutPressed = true; - } else if(key == keyCode.right && module.is.unchecked()) { - module.check(); - shortcutPressed = true; - } + 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 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 z-index to be unselectable'); + $input.addClass(className.hidden); + }, + }, + show: { + input: function () { + module.verbose('Modifying 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 (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.trigger('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; + } + } + + shortcutPressed = false; + if (key === keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $input.trigger('blur'); + shortcutPressed = true; + event.stopPropagation(); + } else if (!event.ctrlKey && module.can.change()) { + if (key === keyCode.space || (key === keyCode.enter && settings.enableEnterKey)) { + module.verbose('Enter/space key pressed, toggling checkbox'); + module.toggle(); + shortcutPressed = true; + } else if ($module.is('.toggle, .slider') && !module.is.radio()) { + if (key === keyCode.left && module.is.checked()) { + module.uncheck(); + shortcutPressed = true; + } else if (key === keyCode.right && module.is.unchecked()) { + module.check(); + shortcutPressed = true; + } + } + } + }, + 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); + } + }, + + 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); + } + }, + + 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 = $('