From d0a1c650245b606ea1998350ed3be53330a0acc7 Mon Sep 17 00:00:00 2001 From: Lubber Date: Thu, 7 Sep 2023 21:10:48 +0200 Subject: [PATCH] chore(release): update dist --- definitions/behaviors/api.js | 37 +- definitions/behaviors/form.js | 155 ++- definitions/behaviors/state.js | 43 +- definitions/behaviors/visibility.js | 21 +- definitions/collections/breadcrumb.less | 3 +- definitions/collections/form.less | 40 +- definitions/collections/grid.less | 215 ++-- definitions/collections/menu.less | 54 +- definitions/collections/message.less | 3 +- definitions/collections/table.less | 69 +- definitions/elements/button.less | 6 +- definitions/elements/container.less | 66 +- definitions/elements/divider.less | 3 +- definitions/elements/emoji.less | 3 +- definitions/elements/flag.less | 3 +- definitions/elements/header.less | 3 +- definitions/elements/icon.less | 13 +- definitions/elements/image.less | 3 +- definitions/elements/input.less | 7 +- definitions/elements/label.less | 25 +- definitions/elements/list.less | 29 +- definitions/elements/loader.less | 145 +-- definitions/elements/placeholder.less | 3 +- definitions/elements/rail.less | 3 +- definitions/elements/reveal.less | 3 +- definitions/elements/segment.less | 129 +- definitions/elements/step.less | 3 +- definitions/elements/text.less | 3 +- definitions/globals/reset.less | 3 +- definitions/globals/site.js | 2 +- definitions/globals/site.less | 3 +- definitions/modules/accordion.js | 6 +- definitions/modules/accordion.less | 3 +- definitions/modules/calendar.js | 7 +- definitions/modules/calendar.less | 56 +- definitions/modules/checkbox.js | 10 +- definitions/modules/checkbox.less | 69 +- definitions/modules/dimmer.js | 6 +- definitions/modules/dimmer.less | 7 +- definitions/modules/dropdown.js | 89 +- definitions/modules/dropdown.less | 169 ++- definitions/modules/embed.js | 7 +- definitions/modules/embed.less | 3 +- definitions/modules/flyout.js | 98 +- definitions/modules/flyout.less | 3 +- definitions/modules/modal.js | 78 +- definitions/modules/modal.less | 16 +- definitions/modules/nag.js | 26 +- definitions/modules/nag.less | 4 +- definitions/modules/popup.js | 46 +- definitions/modules/popup.less | 85 +- definitions/modules/progress.js | 7 +- definitions/modules/progress.less | 3 +- definitions/modules/rating.js | 6 +- definitions/modules/rating.less | 3 +- definitions/modules/search.js | 11 +- definitions/modules/search.less | 34 +- definitions/modules/shape.js | 6 +- definitions/modules/shape.less | 3 +- definitions/modules/sidebar.js | 53 +- definitions/modules/sidebar.less | 3 +- definitions/modules/slider.js | 164 ++- definitions/modules/slider.less | 3 +- definitions/modules/sticky.js | 33 +- definitions/modules/sticky.less | 3 +- definitions/modules/tab.js | 26 +- definitions/modules/tab.less | 3 +- definitions/modules/toast.js | 26 +- definitions/modules/toast.less | 10 +- definitions/modules/transition.js | 8 +- definitions/modules/transition.less | 3 +- definitions/views/ad.less | 3 +- definitions/views/card.less | 3 +- definitions/views/comment.less | 10 +- definitions/views/feed.less | 273 +++- definitions/views/item.less | 10 +- definitions/views/statistic.less | 3 +- overrides.less | 7 + theme.less | 15 +- themes/amazon/elements/button.variables | 6 +- themes/bootstrap3/elements/button.variables | 6 +- themes/chubby/elements/header.variables | 7 +- themes/default/collections/message.variables | 12 +- themes/default/collections/table.variables | 19 +- themes/default/elements/button.variables | 18 +- themes/default/elements/container.variables | 3 + themes/default/elements/emoji.variables | 246 +++- themes/default/elements/flag.variables | 2 +- themes/default/elements/label.variables | 7 +- themes/default/elements/segment.variables | 8 + themes/default/globals/site.variables | 703 ++++++----- themes/default/globals/variation.variables | 25 +- themes/default/modules/calendar.variables | 11 + themes/default/modules/checkbox.variables | 12 + themes/default/modules/dropdown.variables | 17 +- themes/default/modules/modal.variables | 4 + themes/default/modules/popup.variables | 6 +- themes/default/modules/search.variables | 3 + themes/default/modules/toast.variables | 11 +- themes/default/views/card.variables | 16 +- themes/default/views/feed.variables | 56 +- themes/default/views/item.variables | 10 +- themes/flat/collections/form.variables | 8 +- themes/flat/globals/site.variables | 2 +- themes/github/elements/button.variables | 6 +- themes/joypixels/elements/emoji.variables | 252 ++-- themes/material/globals/site.variables | 2 +- themes/twitter/elements/button.variables | 6 +- themes/twitter/elements/emoji.variables | 244 +++- types/fomantic-ui-accordion.d.ts | 244 ++++ types/fomantic-ui-api.d.ts | 555 ++++++++ types/fomantic-ui-calendar.d.ts | 766 ++++++++++++ types/fomantic-ui-checkbox.d.ts | 332 +++++ types/fomantic-ui-dimmer.d.ts | 408 ++++++ types/fomantic-ui-dropdown.d.ts | 1183 ++++++++++++++++++ types/fomantic-ui-embed.d.ts | 326 +++++ types/fomantic-ui-flyout.d.ts | 525 ++++++++ types/fomantic-ui-form.d.ts | 651 ++++++++++ types/fomantic-ui-modal.d.ts | 471 +++++++ types/fomantic-ui-nag.d.ts | 270 ++++ types/fomantic-ui-popup.d.ts | 523 ++++++++ types/fomantic-ui-progress.d.ts | 459 +++++++ types/fomantic-ui-rating.d.ts | 187 +++ types/fomantic-ui-search.d.ts | 496 ++++++++ types/fomantic-ui-shape.d.ts | 274 ++++ types/fomantic-ui-sidebar.d.ts | 402 ++++++ types/fomantic-ui-slider.d.ts | 316 +++++ types/fomantic-ui-sticky.d.ts | 215 ++++ types/fomantic-ui-tab.d.ts | 361 ++++++ types/fomantic-ui-tests.ts | 25 + types/fomantic-ui-toast.d.ts | 514 ++++++++ types/fomantic-ui-transition.d.ts | 355 ++++++ types/fomantic-ui-visibility.d.ts | 355 ++++++ types/index.d.ts | 63 + types/tsconfig.json | 23 + types/tslint.json | 1 + 136 files changed, 13202 insertions(+), 1444 deletions(-) create mode 100644 overrides.less create mode 100644 types/fomantic-ui-accordion.d.ts create mode 100644 types/fomantic-ui-api.d.ts create mode 100644 types/fomantic-ui-calendar.d.ts create mode 100644 types/fomantic-ui-checkbox.d.ts create mode 100644 types/fomantic-ui-dimmer.d.ts create mode 100644 types/fomantic-ui-dropdown.d.ts create mode 100644 types/fomantic-ui-embed.d.ts create mode 100644 types/fomantic-ui-flyout.d.ts create mode 100644 types/fomantic-ui-form.d.ts create mode 100644 types/fomantic-ui-modal.d.ts create mode 100644 types/fomantic-ui-nag.d.ts create mode 100644 types/fomantic-ui-popup.d.ts create mode 100644 types/fomantic-ui-progress.d.ts create mode 100644 types/fomantic-ui-rating.d.ts create mode 100644 types/fomantic-ui-search.d.ts create mode 100644 types/fomantic-ui-shape.d.ts create mode 100644 types/fomantic-ui-sidebar.d.ts create mode 100644 types/fomantic-ui-slider.d.ts create mode 100644 types/fomantic-ui-sticky.d.ts create mode 100644 types/fomantic-ui-tab.d.ts create mode 100644 types/fomantic-ui-tests.ts create mode 100644 types/fomantic-ui-toast.d.ts create mode 100644 types/fomantic-ui-transition.d.ts create mode 100644 types/fomantic-ui-visibility.d.ts create mode 100644 types/index.d.ts create mode 100644 types/tsconfig.json create mode 100644 types/tslint.json diff --git a/definitions/behaviors/api.js b/definitions/behaviors/api.js index a2e09b5..11aa1ae 100644 --- a/definitions/behaviors/api.js +++ b/definitions/behaviors/api.js @@ -29,14 +29,25 @@ $allModules = isFunction(this) ? $(window) : $(this), - moduleSelector = $allModules.selector || '', time = Date.now(), performance = [], query = arguments[0], methodInvoked = typeof query === 'string', queryArguments = [].slice.call(arguments, 1), + contextCheck = function (context, win) { + var $context; + if ([window, document].indexOf(context) >= 0) { + $context = $(context); + } else { + $context = $(win.document).find(context); + if ($context.length === 0) { + $context = win.frameElement ? contextCheck(context, win.parent) : window; + } + } + return $context; + }, returnedValue ; @@ -47,6 +58,7 @@ : $.extend({}, $.fn.api.settings), // internal aliases + regExp = settings.regExp, namespace = settings.namespace, metadata = settings.metadata, selector = settings.selector, @@ -62,9 +74,7 @@ $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, + $context = settings.stateContext ? contextCheck(settings.stateContext, window) : $module, // request details ajaxSettings, @@ -351,8 +361,8 @@ optionalVariables ; if (url) { - requiredVariables = url.match(settings.regExp.required); - optionalVariables = url.match(settings.regExp.optional); + requiredVariables = url.match(regExp.required); + optionalVariables = url.match(regExp.optional); urlData = urlData || settings.urlData; if (requiredVariables) { module.debug('Looking for required URL variables', requiredVariables); @@ -449,7 +459,7 @@ }); }); $.each(formArray, function (i, el) { - if (!settings.regExp.validate.test(el.name)) { + if (!regExp.validate.test(el.name)) { return; } var @@ -460,7 +470,7 @@ || (String(floatValue) === el.value ? floatValue : (el.value === 'false' ? false : el.value)), - nameKeys = el.name.match(settings.regExp.key) || [], + nameKeys = el.name.match(regExp.key) || [], pushKey = el.name.replace(/\[]$/, '') ; if (!(pushKey in pushes)) { @@ -480,9 +490,9 @@ if (k === '' && !Array.isArray(value)) { // foo[] value = build([], pushes[pushKey]++, value); - } else if (settings.regExp.fixed.test(k)) { // foo[n] + } else if (regExp.fixed.test(k)) { // foo[n] value = build([], k, value); - } else if (settings.regExp.named.test(k)) { // foo; foo[bar] + } else if (regExp.named.test(k)) { // foo; foo[bar] value = build({}, k, value); } } @@ -637,7 +647,7 @@ module.debug('Adding error state'); module.set.error(); if (module.should.removeError()) { - setTimeout(module.remove.error, settings.errorDuration); + setTimeout(function () { module.remove.error(); }, settings.errorDuration); } } module.debug('API Request failed', errorMessage, xhr); @@ -961,7 +971,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -974,9 +984,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { diff --git a/definitions/behaviors/form.js b/definitions/behaviors/form.js index 8ed799d..1ae8306 100644 --- a/definitions/behaviors/form.js +++ b/definitions/behaviors/form.js @@ -22,7 +22,7 @@ $.fn.form = function (parameters) { var $allModules = $(this), - moduleSelector = $allModules.selector || '', + $window = $(window), time = Date.now(), performance = [], @@ -61,6 +61,8 @@ namespace, moduleNamespace, eventNamespace, + attachEventsSelector, + attachEventsAction, submitting = false, dirty = false, @@ -75,6 +77,7 @@ initialize: function () { // settings grabbed at run time module.get.settings(); + $module.addClass(className.initial); if (methodInvoked) { if (instance === undefined) { module.instantiate(); @@ -128,10 +131,13 @@ module.bindEvents(); }, - submit: function () { + submit: function (event) { module.verbose('Submitting form', $module); submitting = true; $module.trigger('submit'); + if (event) { + event.preventDefault(); + } }, attachEvents: function (selector, action) { @@ -143,6 +149,9 @@ module[action](); event.preventDefault(); }); + + attachEventsSelector = selector; + attachEventsAction = action; }, bindEvents: function () { @@ -154,6 +163,7 @@ .on('click' + eventNamespace, selector.reset, module.reset) .on('click' + eventNamespace, selector.clear, module.clear) ; + $field.on('invalid' + eventNamespace, module.event.field.invalid); if (settings.keyboardShortcuts) { $module.on('keydown' + eventNamespace, selector.field, module.event.field.keydown); } @@ -168,10 +178,14 @@ // Dirty events if (settings.preventLeaving) { - $(window).on('beforeunload' + eventNamespace, module.event.beforeUnload); + $window.on('beforeunload' + eventNamespace, module.event.beforeUnload); } - $field.on('change click keyup keydown blur', function (e) { + $field.on('change' + eventNamespace + + ' click' + eventNamespace + + ' keyup' + eventNamespace + + ' keydown' + eventNamespace + + ' blur' + eventNamespace, function (e) { module.determine.isDirty(); }); @@ -182,6 +196,9 @@ $module.on('clean' + eventNamespace, function (e) { settings.onClean.call(); }); + if (attachEventsSelector) { + module.attachEvents(attachEventsSelector, attachEventsAction); + } }, clear: function () { @@ -230,6 +247,7 @@ isCheckbox = $field.is(selector.checkbox), isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'), isCalendar = $calendar.length > 0 && module.can.useElement('calendar'), + isFile = $field.is(selector.file), isErrored = $fieldGroup.hasClass(className.error) ; if (defaultValue === undefined) { @@ -250,7 +268,7 @@ $calendar.calendar('set date', defaultValue); } else { module.verbose('Resetting field value', $field, defaultValue); - $field.val(defaultValue); + $field.val(isFile ? '' : defaultValue); } }); module.remove.states(); @@ -261,8 +279,12 @@ var allValid = true ; - $.each(validation, function (fieldName, field) { - if (!module.validate.field(field, fieldName, true)) { + $field.each(function (index, el) { + var $el = $(el), + validation = module.get.validation($el) || {}, + identifier = module.get.identifier(validation, $el) + ; + if (!module.validate.field(validation, identifier, true)) { allValid = false; } }); @@ -386,6 +408,13 @@ $module.off(eventNamespace); $field.off(eventNamespace); $submit.off(eventNamespace); + if (settings.preventLeaving) { + $window.off(eventNamespace); + } + if (attachEventsSelector) { + $(attachEventsSelector).off(eventNamespace); + attachEventsSelector = undefined; + } }, event: { @@ -411,9 +440,8 @@ if (!event.ctrlKey && key === keyCode.enter && isInput && !isInDropdown && !isCheckbox) { if (!keyHeldDown) { $field.one('keyup' + eventNamespace, module.event.field.keyup); - module.submit(); + module.submit(event); module.debug('Enter pressed on input submitting form'); - event.preventDefault(); } keyHeldDown = true; } @@ -421,15 +449,18 @@ keyup: function () { keyHeldDown = false; }, + invalid: function (event) { + event.preventDefault(); + }, blur: function (event) { var $field = $(this), - $fieldGroup = $field.closest($group), - validationRules = module.get.validation($field) + validationRules = module.get.validation($field) || {}, + identifier = module.get.identifier(validationRules, $field) ; - if (validationRules && (settings.on === 'blur' || ($fieldGroup.hasClass(className.error) && settings.revalidate))) { + if (settings.on === 'blur' || (!$module.hasClass(className.initial) && settings.revalidate)) { module.debug('Revalidating field', $field, validationRules); - module.validate.field(validationRules); + module.validate.field(validationRules, identifier); if (!settings.inline) { module.validate.form(false, true); } @@ -438,14 +469,14 @@ change: function (event) { var $field = $(this), - $fieldGroup = $field.closest($group), - validationRules = module.get.validation($field) + validationRules = module.get.validation($field) || {}, + identifier = module.get.identifier(validationRules, $field) ; - if (validationRules && (settings.on === 'change' || ($fieldGroup.hasClass(className.error) && settings.revalidate))) { + if (settings.on === 'change' || (!$module.hasClass(className.initial) && settings.revalidate)) { clearTimeout(module.timer); module.timer = setTimeout(function () { module.debug('Revalidating field', $field, validationRules); - module.validate.field(validationRules); + module.validate.field(validationRules, identifier); if (!settings.inline) { module.validate.form(false, true); } @@ -487,18 +518,7 @@ 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'); + return ['file', 'checkbox', 'radio', 'hidden'].indexOf(type) >= 0 || $input.is('select') ? 'change' : 'input'; }, fieldsFromShorthand: function (fields) { var @@ -522,6 +542,9 @@ return fullFields; }, + identifier: function (validation, $el) { + return validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate); + }, prompt: function (rule, field) { var ruleName = module.get.ruleName(rule), @@ -634,7 +657,7 @@ var $field = typeof identifier === 'string' ? module.get.field(identifier) : identifier, - $label = $field.closest(selector.group).find('label').eq(0) + $label = $field.closest(selector.group).find('label:not(:empty)').eq(0) ; return $label.length === 1 @@ -888,7 +911,8 @@ $field = module.get.field(identifier), $fieldGroup = $field.closest($group), $prompt = $fieldGroup.children(selector.prompt), - promptExists = $prompt.length > 0 + promptExists = $prompt.length > 0, + canTransition = settings.transition && module.can.useElement('transition') ; module.verbose('Adding field error state', identifier); if (!internal) { @@ -897,8 +921,22 @@ ; } if (settings.inline) { + if (promptExists) { + if (canTransition) { + if ($prompt.transition('is animating')) { + $prompt.transition('stop all'); + } + } else if ($prompt.is(':animated')) { + $prompt.stop(true, true); + } + $prompt = $fieldGroup.children(selector.prompt); + promptExists = $prompt.length > 0; + } if (!promptExists) { $prompt = $('
').addClass(className.label); + if (!canTransition) { + $prompt.css('display', 'none'); + } $prompt .appendTo($fieldGroup) ; @@ -907,7 +945,7 @@ .html(settings.templates.prompt(errors)) ; if (!promptExists) { - if (settings.transition && module.can.useElement('transition')) { + if (canTransition) { module.verbose('Displaying error with css transition', settings.transition); $prompt.transition(settings.transition + ' in', settings.duration); } else { @@ -916,9 +954,9 @@ .fadeIn(settings.duration) ; } - } else { - module.verbose('Inline errors are disabled, no inline error added', identifier); } + } else { + module.verbose('Inline errors are disabled, no inline error added', identifier); } }, errors: function (errors) { @@ -965,7 +1003,7 @@ $message.empty(); }, states: function () { - $module.removeClass(className.error).removeClass(className.success); + $module.removeClass(className.error).removeClass(className.success).addClass(className.initial); if (!settings.inline) { module.remove.errors(); } @@ -1103,6 +1141,7 @@ $field = module.get.field(key), $element = $field.parent(), $calendar = $field.closest(selector.uiCalendar), + isFile = $field.is(selector.file), isMultiple = Array.isArray(value), isCheckbox = $element.is(selector.uiCheckbox) && module.can.useElement('checkbox'), isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'), @@ -1145,7 +1184,7 @@ $calendar.calendar('set date', value); } else { module.verbose('Setting field value', value, $field); - $field.val(value); + $field.val(isFile ? '' : value); } } }); @@ -1201,7 +1240,7 @@ return rule.type === 'empty'; }) !== 0 : false, - identifier = validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate) + identifier = module.get.identifier(validation, $el) ; if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) { if (isCheckbox) { @@ -1233,7 +1272,7 @@ if (keyHeldDown) { return false; } - + $module.removeClass(className.initial); // reset errors formErrors = []; if (module.determine.isValid()) { @@ -1305,13 +1344,25 @@ ? module.get.field(field.depends) : false, fieldValid = true, - fieldErrors = [] + fieldErrors = [], + isDisabled = $field.filter(':not(:disabled)').length === 0, + validationMessage = $field[0].validationMessage, + errorLimit ; if (!field.identifier) { module.debug('Using field name as identifier', identifier); field.identifier = identifier; } - var isDisabled = $field.filter(':not(:disabled)').length === 0; + if (validationMessage) { + module.debug('Field is natively invalid', identifier); + fieldErrors.push(validationMessage); + fieldValid = false; + if (showErrors) { + $field.closest($group).addClass(className.error); + } + } else if (showErrors) { + $field.closest($group).removeClass(className.error); + } if (isDisabled) { module.debug('Field is disabled. Skipping', identifier); } else if (field.optional && module.is.blank($field)) { @@ -1319,11 +1370,9 @@ } 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); - } + errorLimit = field.errorLimit || settings.errorLimit; $.each(field.rules, function (index, rule) { - if (module.has.field(identifier)) { + if (module.has.field(identifier) && (!errorLimit || fieldErrors.length < errorLimit)) { var invalidFields = module.validate.rule(field, rule, true) || []; if (invalidFields.length > 0) { module.debug('Field is invalid', identifier, rule.type); @@ -1338,7 +1387,7 @@ } if (fieldValid) { if (showErrors) { - module.remove.prompt(identifier, fieldErrors); + module.remove.prompt(identifier); settings.onValid.call($field); } } else { @@ -1460,7 +1509,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -1473,9 +1522,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if ($allModules.length > 1) { title += ' (' + $allModules.length + ')'; } @@ -1578,6 +1624,7 @@ preventLeaving: false, errorFocus: true, dateHandling: 'date', // 'date', 'input', 'formatter' + errorLimit: 0, onValid: function () {}, onInvalid: function () {}, @@ -1631,8 +1678,8 @@ 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}"', + contains: '{name} must contain "{ruleValue}"', + containsExactly: '{name} must contain exactly "{ruleValue}"', doesntContain: '{name} cannot contain "{ruleValue}"', doesntContainExactly: '{name} cannot contain exactly "{ruleValue}"', minLength: '{name} must be at least {ruleValue} characters', @@ -1651,9 +1698,10 @@ 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', + field: 'input:not(.search):not([type="reset"]):not([type="button"]):not([type="submit"]), textarea, select', + file: 'input[type="file"]', group: '.field', - input: 'input:not([type="file"])', + input: 'input', message: '.error.message', prompt: '.prompt.label', radio: 'input[type="radio"]', @@ -1665,6 +1713,7 @@ }, className: { + initial: 'initial', error: 'error', label: 'ui basic red pointing prompt label', pressed: 'down', diff --git a/definitions/behaviors/state.js b/definitions/behaviors/state.js index 58d3a88..dca08a1 100644 --- a/definitions/behaviors/state.js +++ b/definitions/behaviors/state.js @@ -23,15 +23,25 @@ var $allModules = $(this), - moduleSelector = $allModules.selector || '', - time = Date.now(), performance = [], query = arguments[0], methodInvoked = typeof query === 'string', queryArguments = [].slice.call(arguments, 1), + contextCheck = function (context, win) { + var $context; + if ([window, document].indexOf(context) >= 0) { + $context = $(context); + } else { + $context = $(win.document).find(context); + if ($context.length === 0) { + $context = win.frameElement ? contextCheck(context, win.parent) : window; + } + } + return $context; + }, returnedValue ; $allModules.each(function () { @@ -51,6 +61,7 @@ moduleNamespace = namespace + '-module', $module = $(this), + $context = settings.context ? contextCheck(settings.context, window) : $module, element = this, instance = $module.data(moduleNamespace), @@ -68,19 +79,11 @@ } // 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) - ; - } + $context + .on('mouseenter' + eventNamespace, module.change.text) + .on('mouseleave' + eventNamespace, module.reset.text) + .on('click' + eventNamespace, module.toggle.state) + ; module.instantiate(); }, @@ -94,8 +97,11 @@ destroy: function () { module.verbose('Destroying previous module', instance); - $module + $context .off(eventNamespace) + ; + $module + .removeData(metadata.storedText) .removeData(moduleNamespace) ; }, @@ -476,7 +482,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -489,9 +495,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { diff --git a/definitions/behaviors/visibility.js b/definitions/behaviors/visibility.js index ec67324..21252e1 100644 --- a/definitions/behaviors/visibility.js +++ b/definitions/behaviors/visibility.js @@ -22,7 +22,6 @@ $.fn.visibility = function (parameters) { var $allModules = $(this), - moduleSelector = $allModules.selector || '', time = Date.now(), performance = [], @@ -30,6 +29,19 @@ query = arguments[0], methodInvoked = typeof query === 'string', queryArguments = [].slice.call(arguments, 1), + contextCheck = function (context, win) { + var $context; + if ([window, document].indexOf(context) >= 0) { + $context = $(context); + } else { + $context = $(win.document).find(context); + if ($context.length === 0) { + $context = win.frameElement ? contextCheck(context, win.parent) : window; + } + } + + return $context; + }, returnedValue, moduleCount = $allModules.length, @@ -53,7 +65,7 @@ $window = $(window), $module = $(this), - $context = [window, document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context), + $context = contextCheck(settings.context, window), $placeholder, @@ -1076,7 +1088,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -1089,9 +1101,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { diff --git a/definitions/collections/breadcrumb.less b/definitions/collections/breadcrumb.less index face26f..28f1258 100644 --- a/definitions/collections/breadcrumb.less +++ b/definitions/collections/breadcrumb.less @@ -115,4 +115,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/collections/form.less b/definitions/collections/form.less index 3ea612d..0aeda3e 100644 --- a/definitions/collections/form.less +++ b/definitions/collections/form.less @@ -527,6 +527,12 @@ color: @c; } + @supports selector(:has(.f)) { + .ui.form .fields:has(.@{state}) > label { + color: @c; + } + } + .ui.form .fields.@{state} .field .ui.label, .ui.form .field.@{state} .ui.label { background-color: @lbg; @@ -579,14 +585,7 @@ 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) { + .ui.form:not(.initial) .field input:invalid { color: @c; background: @bg; border-color: @formStates[@@state][borderColor]; @@ -729,6 +728,12 @@ .ui.inverted.form .@{state}.field label { color: @lbg; } + + @supports selector(:has(.f)) { + .ui.inverted.form .fields:has(.@{state}) > label { + color: @lbg; + } + } } }); } @@ -804,10 +809,11 @@ Required Field --------------------- */ - .ui.form .required.fields:not(.grouped) > .field > label::after, + .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after, + .ui.form .required.fields.inline > 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.fields:not(.grouped):not(.inline) > .field > .checkbox::after, .ui.form .required.field > .checkbox::after, .ui.form label.required::after { margin: @requiredMargin; @@ -815,7 +821,8 @@ color: @requiredColor; } - .ui.form .required.fields:not(.grouped) > .field > label::after, + .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after, + .ui.form .required.fields.inline > label::after, .ui.form .required.fields.grouped > label::after, .ui.form .required.field > label::after, .ui.form label.required::after { @@ -823,7 +830,7 @@ vertical-align: top; } - .ui.form .required.fields:not(.grouped) > .field > .checkbox::after, + .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after, .ui.form .required.field > .checkbox::after { position: absolute; top: 0; @@ -831,6 +838,12 @@ } } +.ui.ui.ui.ui.form .fields > label:empty::after, +.ui.ui.ui.ui.form .field > label:empty::after { + content: " "; + display: inline-block; +} + /******************************* Variations *******************************/ @@ -1160,4 +1173,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/collections/grid.less b/definitions/collections/grid.less index 7f9e9b0..e72aa2e 100644 --- a/definitions/collections/grid.less +++ b/definitions/collections/grid.less @@ -1270,8 +1270,8 @@ .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 { + .ui.ui.grid > [class*="left aligned"].column, + .ui.ui.grid > .row > [class*="left aligned"].column { text-align: left; align-self: inherit; } @@ -1281,8 +1281,8 @@ .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 { + .ui.ui.grid > [class*="center aligned"].column, + .ui.ui.grid > .row > [class*="center aligned"].column { text-align: center; align-self: inherit; } @@ -1296,8 +1296,8 @@ .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 { + .ui.ui.grid > [class*="right aligned"].column, + .ui.ui.grid > .row > [class*="right aligned"].column { text-align: right; align-self: inherit; } @@ -1308,8 +1308,8 @@ .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 { + .ui.ui.grid > .justified.column, + .ui.ui.grid > .row > .justified.column { text-align: justify; hyphens: auto; } @@ -1505,77 +1505,77 @@ } .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 { + .ui.ui.grid > [class*="two column"].doubling.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 { + .ui.ui.grid > [class*="three column"].doubling.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 { + .ui.ui.grid > [class*="four column"].doubling.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 { + .ui.ui.grid > [class*="five column"].doubling.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 { + .ui.ui.grid > [class*="six column"].doubling.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 { + .ui.ui.grid > [class*="seven column"].doubling.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 { + .ui.ui.grid > [class*="eight column"].doubling.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 { + .ui.ui.grid > [class*="nine column"].doubling.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 { + .ui.ui.grid > [class*="ten column"].doubling.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 { + .ui.ui.grid > [class*="eleven column"].doubling.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 { + .ui.ui.grid > [class*="twelve column"].doubling.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 { + .ui.ui.grid > [class*="thirteen column"].doubling.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 { + .ui.ui.grid > [class*="fourteen column"].doubling.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 { + .ui.ui.grid > [class*="fifteen column"].doubling.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 { + .ui.ui.grid > [class*="sixteen column"].doubling.row > .column { width: @eightColumn !important; } } @@ -1596,77 +1596,77 @@ } .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 { + .ui.ui.grid > [class*="two column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="three column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="four column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="five column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="six column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="seven column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="eight column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="nine column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="ten column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="eleven column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="twelve column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="thirteen column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="fourteen column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="fifteen column"].doubling:not(.stackable).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 { + .ui.ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column { width: @fourColumn !important; } } @@ -1762,122 +1762,122 @@ /* 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) { + .ui.ui.ui[class*="tablet only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="tablet only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="tablet only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="computer only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="computer only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="computer only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="large screen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="mobile only"].grid:not(.tablet), + .ui.ui.ui.grid > [class*="mobile only"].row:not(.tablet), + .ui.ui.ui.grid > [class*="mobile only"].column:not(.tablet), + .ui.ui.ui.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) { + .ui.ui.ui[class*="computer only"].grid:not(.tablet), + .ui.ui.ui.grid > [class*="computer only"].row:not(.tablet), + .ui.ui.ui.grid > [class*="computer only"].column:not(.tablet), + .ui.ui.ui.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) { + .ui.ui.ui[class*="large screen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="mobile only"].grid:not(.computer), + .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), + .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), + .ui.ui.ui.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) { + .ui.ui.ui[class*="tablet only"].grid:not(.computer), + .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), + .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), + .ui.ui.ui.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) { + .ui.ui.ui[class*="large screen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="mobile only"].grid:not(.computer), + .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), + .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), + .ui.ui.ui.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) { + .ui.ui.ui[class*="tablet only"].grid:not(.computer), + .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), + .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), + .ui.ui.ui.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) { + .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), + .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), + .ui.ui.ui.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) { + .ui.ui.ui[class*="mobile only"].grid:not(.computer), + .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), + .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), + .ui.ui.ui.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) { + .ui.ui.ui[class*="tablet only"].grid:not(.computer), + .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), + .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), + .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } } @@ -1981,4 +1981,5 @@ } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/collections/menu.less b/definitions/collections/menu.less index f79bcde..ab481dc 100644 --- a/definitions/collections/menu.less +++ b/definitions/collections/menu.less @@ -1623,29 +1623,36 @@ Floated Menu / Item } } -/* ------------------- - Evenly Sized --------------------- */ +& when (@variationMenuEqualWidth) { + /* ------------------- + Evenly Sized + -------------------- */ -.ui.item.menu, -.ui.item.menu .item { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; - text-align: center; - justify-content: center; -} -.ui.attached.item.menu:not(.tabular) { - margin: 0 @attachedHorizontalOffset !important; -} + .ui[class*="equal width"].menu > .item { + flex: 1; + } -.ui.item.menu .item:last-child::before { - display: none; -} + .ui[class*="equal width"].menu > .item, + .ui.item.menu, + .ui.item.menu .item { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + text-align: center; + justify-content: center; + } + .ui.attached[class*="equal width"].menu:not(.tabular), + .ui.attached.item.menu:not(.tabular) { + margin: 0 @attachedHorizontalOffset !important; + } + + .ui[class*="equal width"].menu > .item:last-child::before, + .ui.item.menu .item:last-child::before { + display: none; + } -& when (@variationMenuEqualWidth) { .ui.menu.two.item .item { width: 50%; } @@ -1929,7 +1936,7 @@ Floated Menu / Item & .item:first-child::before { display: none; } - &:not(.tabular) .item { + &:not(.secondary):not(.text):not(.tabular):not(.borderless) .item { &:last-of-type, &:last-child { border-right: @dividerSize solid @dividerBackground; @@ -1937,7 +1944,7 @@ Floated Menu / Item } } & when (@variationMenuWrapped) { - .ui.wrapped.menu:not(.tabular) .item { + .ui.wrapped.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item { &:first-child { border-bottom-left-radius: 0; } @@ -2011,4 +2018,5 @@ Floated Menu / Item } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/collections/message.less b/definitions/collections/message.less index e53dcc7..a681030 100644 --- a/definitions/collections/message.less +++ b/definitions/collections/message.less @@ -442,4 +442,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/collections/table.less b/definitions/collections/table.less index 56d9cc2..726859b 100644 --- a/definitions/collections/table.less +++ b/definitions/collections/table.less @@ -265,24 +265,39 @@ & when (@variationTableScrollingShort) { .ui.scrolling.table.short > tbody { max-height: @scrollingMobileMaxBodyHeight * 0.75; + .resizable& when (@variationTableResizable) { + height: @scrollingMobileMaxBodyHeight * 0.75; + } } } & when (@variationTableScrollingVeryShort) { .ui.scrolling.table[class*="very short"] > tbody { max-height: @scrollingMobileMaxBodyHeight * 0.5; + .resizable& when (@variationTableResizable) { + height: @scrollingMobileMaxBodyHeight * 0.5; + } } } .ui.scrolling.table > tbody { max-height: @scrollingMobileMaxBodyHeight; + .resizable& when (@variationTableResizable) { + height: @scrollingMobileMaxBodyHeight; + } } & when (@variationTableScrollingLong) { .ui.scrolling.table.long > tbody { max-height: @scrollingMobileMaxBodyHeight * 2; + .resizable& when (@variationTableResizable) { + height: @scrollingMobileMaxBodyHeight * 2; + } } } & when (@variationTableScrollingVeryLong) { .ui.scrolling.table[class*="very long"] > tbody { max-height: @scrollingMobileMaxBodyHeight * 3; + .resizable& when (@variationTableResizable) { + height: @scrollingMobileMaxBodyHeight * 3; + } } } } @@ -320,24 +335,39 @@ & when (@variationTableScrollingShort) { .ui.scrolling.table.short > tbody { max-height: @scrollingTabletMaxBodyHeight * 0.75; + .resizable& when (@variationTableResizable) { + height: @scrollingTabletMaxBodyHeight * 0.75; + } } } & when (@variationTableScrollingVeryShort) { .ui.scrolling.table[class*="very short"] > tbody { max-height: @scrollingTabletMaxBodyHeight * 0.5; + .resizable& when (@variationTableResizable) { + height: @scrollingTabletMaxBodyHeight * 0.5; + } } } .ui.scrolling.table > tbody { max-height: @scrollingTabletMaxBodyHeight; + .resizable& when (@variationTableResizable) { + height: @scrollingTabletMaxBodyHeight; + } } & when (@variationTableScrollingLong) { .ui.scrolling.table.long > tbody { max-height: @scrollingTabletMaxBodyHeight * 2; + .resizable& when (@variationTableResizable) { + height: @scrollingTabletMaxBodyHeight * 2; + } } } & when (@variationTableScrollingVeryLong) { .ui.scrolling.table[class*="very long"] > tbody { max-height: @scrollingTabletMaxBodyHeight * 3; + .resizable& when (@variationTableResizable) { + height: @scrollingTabletMaxBodyHeight * 3; + } } } } @@ -345,24 +375,39 @@ & when (@variationTableScrollingShort) { .ui.scrolling.table.short > tbody { max-height: @scrollingComputerMaxBodyHeight * 0.75; + .resizable& when (@variationTableResizable) { + height: @scrollingComputerMaxBodyHeight * 0.75; + } } } & when (@variationTableScrollingVeryShort) { .ui.scrolling.table[class*="very short"] > tbody { max-height: @scrollingComputerMaxBodyHeight * 0.5; + .resizable& when (@variationTableResizable) { + height: @scrollingComputerMaxBodyHeight * 0.5; + } } } .ui.scrolling.table > tbody { max-height: @scrollingComputerMaxBodyHeight; + .resizable& when (@variationTableResizable) { + height: @scrollingComputerMaxBodyHeight; + } } & when (@variationTableScrollingLong) { .ui.scrolling.table.long > tbody { max-height: @scrollingComputerMaxBodyHeight * 2; + .resizable& when (@variationTableResizable) { + height: @scrollingComputerMaxBodyHeight * 2; + } } } & when (@variationTableScrollingVeryLong) { .ui.scrolling.table[class*="very long"] > tbody { max-height: @scrollingComputerMaxBodyHeight * 3; + .resizable& when (@variationTableResizable) { + height: @scrollingComputerMaxBodyHeight * 3; + } } } } @@ -370,24 +415,39 @@ & when (@variationTableScrollingShort) { .ui.scrolling.table.short > tbody { max-height: @scrollingWidescreenMaxBodyHeight * 0.75; + .resizable& when (@variationTableResizable) { + height: @scrollingWidescreenMaxBodyHeight * 0.75; + } } } & when (@variationTableScrollingVeryShort) { .ui.scrolling.table[class*="very short"] > tbody { max-height: @scrollingWidescreenMaxBodyHeight * 0.5; + .resizable& when (@variationTableResizable) { + height: @scrollingWidescreenMaxBodyHeight * 0.5; + } } } .ui.scrolling.table > tbody { max-height: @scrollingWidescreenMaxBodyHeight; + .resizable& when (@variationTableResizable) { + height: @scrollingWidescreenMaxBodyHeight; + } } & when (@variationTableScrollingLong) { .ui.scrolling.table.long > tbody { max-height: @scrollingWidescreenMaxBodyHeight * 2; + .resizable& when (@variationTableResizable) { + height: @scrollingWidescreenMaxBodyHeight * 2; + } } } & when (@variationTableScrollingVeryLong) { .ui.scrolling.table[class*="very long"] > tbody { max-height: @scrollingWidescreenMaxBodyHeight * 3; + .resizable& when (@variationTableResizable) { + height: @scrollingWidescreenMaxBodyHeight * 3; + } } } } @@ -489,6 +549,12 @@ scrollbar-color: @thumbInvertedBackground @trackInvertedBackground; } } + & when (@variationTableResizable) { + .ui.resizable.scrolling.table > tbody { + resize: @resizableDirection; + max-height: none; + } + } } & when (@variationTableOverflowing) { /* -------------- @@ -1929,4 +1995,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/button.less b/definitions/elements/button.less index 40bfa6c..07cf1f0 100644 --- a/definitions/elements/button.less +++ b/definitions/elements/button.less @@ -120,7 +120,7 @@ --------------- */ /* Specificity hack */ - .ui.loading.loading.loading.loading.loading.loading.button { + .ui.ui.ui.ui.ui.ui.loading.button { position: relative; cursor: default; text-shadow: none !important; @@ -2005,4 +2005,6 @@ } } } -.loadUIOverrides(); + +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/container.less b/definitions/elements/container.less index c6a637e..8bead4b 100644 --- a/definitions/elements/container.less +++ b/definitions/elements/container.less @@ -195,11 +195,17 @@ & when (@variationContainerScrollingShort) { .ui.scrolling.container.short { max-height: @scrollingMobileMaxHeight * 0.75; + &.resizable when (@variationContainerResizable) { + height: @scrollingMobileMaxHeight * 0.75; + } } } & when (@variationContainerScrollingVeryShort) { .ui.scrolling.container[class*="very short"] { max-height: @scrollingMobileMaxHeight * 0.5; + &.resizable when (@variationContainerResizable) { + height: @scrollingMobileMaxHeight * 0.5; + } } } .ui.scrolling.container { @@ -208,11 +214,17 @@ & when (@variationContainerScrollingLong) { .ui.scrolling.container.long { max-height: @scrollingMobileMaxHeight * 2; + &.resizable when (@variationContainerResizable) { + height: @scrollingMobileMaxHeight * 2; + } } } & when (@variationContainerScrollingVeryLong) { .ui.scrolling.container[class*="very long"] { max-height: @scrollingMobileMaxHeight * 3; + &.resizable when (@variationContainerResizable) { + height: @scrollingMobileMaxHeight * 3; + } } } } @@ -221,24 +233,39 @@ & when (@variationContainerScrollingShort) { .ui.scrolling.container.short { max-height: @scrollingTabletMaxHeight * 0.75; + &.resizable when (@variationContainerResizable) { + height: @scrollingTabletMaxHeight * 0.75; + } } } & when (@variationContainerScrollingVeryShort) { .ui.scrolling.container[class*="very short"] { max-height: @scrollingTabletMaxHeight * 0.5; + &.resizable when (@variationContainerResizable) { + height: @scrollingTabletMaxHeight * 0.5; + } } } .ui.scrolling.container { max-height: @scrollingTabletMaxHeight; + &.resizable when (@variationContainerResizable) { + height: @scrollingTabletMaxHeight; + } } & when (@variationContainerScrollingLong) { .ui.scrolling.container.long { max-height: @scrollingTabletMaxHeight * 2; + &.resizable when (@variationContainerResizable) { + height: @scrollingTabletMaxHeight * 2; + } } } & when (@variationContainerScrollingVeryLong) { .ui.scrolling.container[class*="very long"] { max-height: @scrollingTabletMaxHeight * 3; + &.resizable when (@variationContainerResizable) { + height: @scrollingTabletMaxHeight * 3; + } } } } @@ -246,24 +273,39 @@ & when (@variationContainerScrollingShort) { .ui.scrolling.container.short { max-height: @scrollingComputerMaxHeight * 0.75; + &.resizable when (@variationContainerResizable) { + height: @scrollingComputerMaxHeight * 0.75; + } } } & when (@variationContainerScrollingVeryShort) { .ui.scrolling.container[class*="very short"] { max-height: @scrollingComputerMaxHeight * 0.5; + &.resizable when (@variationContainerResizable) { + height: @scrollingComputerMaxHeight * 0.5; + } } } .ui.scrolling.container { max-height: @scrollingComputerMaxHeight; + &.resizable when (@variationContainerResizable) { + height: @scrollingComputerMaxHeight; + } } & when (@variationContainerScrollingLong) { .ui.scrolling.container.long { max-height: @scrollingComputerMaxHeight * 2; + &.resizable when (@variationContainerResizable) { + height: @scrollingComputerMaxHeight * 2; + } } } & when (@variationContainerScrollingVeryLong) { .ui.scrolling.container[class*="very long"] { max-height: @scrollingComputerMaxHeight * 3; + &.resizable when (@variationContainerResizable) { + height: @scrollingComputerMaxHeight * 3; + } } } } @@ -271,27 +313,49 @@ & when (@variationContainerScrollingShort) { .ui.scrolling.container.short { max-height: @scrollingWidescreenMaxHeight * 0.75; + &.resizable when (@variationContainerResizable) { + height: @scrollingWidescreenMaxHeight * 0.75; + } } } & when (@variationContainerScrollingVeryShort) { .ui.scrolling.container[class*="very short"] { max-height: @scrollingWidescreenMaxHeight * 0.5; + &.resizable when (@variationContainerResizable) { + height: @scrollingWidescreenMaxHeight * 0.5; + } } } .ui.scrolling.container { max-height: @scrollingWidescreenMaxHeight; + &.resizable when (@variationContainerResizable) { + height: @scrollingWidescreenMaxHeight; + } } & when (@variationContainerScrollingLong) { .ui.scrolling.container.long { max-height: @scrollingWidescreenMaxHeight * 2; + &.resizable when (@variationContainerResizable) { + height: @scrollingWidescreenMaxHeight * 2; + } } } & when (@variationContainerScrollingVeryLong) { .ui.scrolling.container[class*="very long"] { max-height: @scrollingWidescreenMaxHeight * 3; + &.resizable when (@variationContainerResizable) { + height: @scrollingWidescreenMaxHeight * 3; + } } } } + & when (@variationContainerResizable) { + .ui.resizable.scrolling.container { + resize: @resizableDirection; + max-height: none; + } + } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/divider.less b/definitions/elements/divider.less index 94a6652..e29d339 100644 --- a/definitions/elements/divider.less +++ b/definitions/elements/divider.less @@ -282,4 +282,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/emoji.less b/definitions/elements/emoji.less index afff5eb..2be392a 100644 --- a/definitions/elements/emoji.less +++ b/definitions/elements/emoji.less @@ -91,4 +91,5 @@ each(@emoji-map, { /* rtl:end:ignore */ -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/flag.less b/definitions/elements/flag.less index 02d6ed9..21649c9 100644 --- a/definitions/elements/flag.less +++ b/definitions/elements/flag.less @@ -83,4 +83,5 @@ each(@flags, { /* rtl:end:ignore */ -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/header.less b/definitions/elements/header.less index 6f94a22..466bf88 100644 --- a/definitions/elements/header.less +++ b/definitions/elements/header.less @@ -490,4 +490,5 @@ font-size: @mediumFontSize; } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/icon.less b/definitions/elements/icon.less index 7a60a26..7138878 100644 --- a/definitions/elements/icon.less +++ b/definitions/elements/icon.less @@ -48,7 +48,7 @@ i.icon { } i.icon::before { - background: none !important; + background: none; } /******************************* @@ -322,16 +322,16 @@ i.emphasized.icons:not(.disabled) { @c: @colors[@@color][color]; @l: @colors[@@color][light]; - i.@{color}.icon.icon.icon.icon.icon { + i.@{color}.icon.icon.icon.icon.icon.icon { color: @c; } & when (@variationIconInverted) { - i.inverted.@{color}.icon.icon.icon.icon.icon { + i.inverted.@{color}.icon.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}.icon.icon.icon.icon.icon.icon, + i.inverted.circular.@{color}.icon.icon.icon.icon.icon.icon, i.inverted.bordered.@{color}.icons, i.inverted.circular.@{color}.icons { background-color: @c; @@ -655,4 +655,5 @@ i.icons { } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/image.less b/definitions/elements/image.less index 348e3fa..862e849 100644 --- a/definitions/elements/image.less +++ b/definitions/elements/image.less @@ -307,4 +307,5 @@ img.ui.image { } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/input.less b/definitions/elements/input.less index 105097b..6be2a90 100644 --- a/definitions/elements/input.less +++ b/definitions/elements/input.less @@ -110,7 +110,7 @@ Loading --------------------- */ - .ui.loading.loading.input > i.icon::before { + .ui.ui.loading.input > i.icon::before { position: absolute; content: ""; top: 50%; @@ -121,7 +121,7 @@ border-radius: @circularRadius; border: @loaderLineWidth solid @loaderFillColor; } - .ui.loading.loading.input > i.icon::after { + .ui.ui.loading.input > i.icon::after { position: absolute; content: ""; top: 50%; @@ -791,4 +791,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/label.less b/definitions/elements/label.less index 338e60a..b08de2e 100644 --- a/definitions/elements/label.less +++ b/definitions/elements/label.less @@ -440,7 +440,22 @@ a.ui.label { border-top-color: inherit; } - /* Inside Table */ + .ui.ui.center.ribbon.label { + top: @ribbonCenterOffset; + z-index: @ribbonZIndex; + } + .ui.bottom.ribbon.label::after { + bottom: 100%; + top: auto; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0; + } + .ui.bottom[class*="right ribbon"].label::after { + border-width: @ribbonTriangleSize 0 0 @ribbonTriangleSize; + border-color: transparent; + border-left-color: inherit; + } + + /* Inside Image */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label { position: absolute; @@ -455,6 +470,11 @@ a.ui.label { left: @rightRibbonImageOffset; padding-left: @horizontalPadding; } + .ui.card .image > .ui.bottom.ribbon.label, + .ui.image > .ui.bottom.ribbon.label { + bottom: @ribbonImageBottomDistance; + top: auto; + } /* Inside Table */ .ui.table td > .ui.ribbon.label { @@ -1011,4 +1031,5 @@ a.ui.active.label:hover::before { }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/list.less b/definitions/elements/list.less index f52f829..2a24245 100644 --- a/definitions/elements/list.less +++ b/definitions/elements/list.less @@ -477,16 +477,16 @@ ol.ui.list ol li, color: @linkListItemColor; transition: @linkListTransition; } - .ui.link.list.list a.item:hover, - .ui.link.list.list .item a:not(.ui):hover { + .ui.ui.link.list a.item:hover, + .ui.ui.link.list .item a:not(.ui):hover { color: @linkListItemHoverColor; } - .ui.link.list.list a.item:active, - .ui.link.list.list .item a:not(.ui):active { + .ui.ui.link.list a.item:active, + .ui.ui.link.list .item a:not(.ui):active { color: @linkListItemDownColor; } - .ui.link.list.list .active.item, - .ui.link.list.list .active.item a:not(.ui) { + .ui.ui.link.list .active.item, + .ui.ui.link.list .active.item a:not(.ui) { color: @linkListItemActiveColor; } & when (@variationListInverted) { @@ -496,16 +496,16 @@ ol.ui.list ol li, .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 { + .ui.ui.inverted.link.list a.item:hover, + .ui.ui.inverted.link.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 { + .ui.ui.inverted.link.list a.item:active, + .ui.ui.inverted.link.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) { + .ui.ui.inverted.link.list a.active.item, + .ui.ui.inverted.link.list .active.item a:not(.ui) { color: @invertedLinkListItemActiveColor; } } @@ -681,7 +681,7 @@ ol.ui.list ol li, .ui.ordered.list, .ui.ordered.list .list:not(.icon), ol.ui.list ol { - counter-reset: ordered; + counter-reset: @orderedCountName; margin-left: @orderedCountDistance; list-style-type: none; } @@ -1023,4 +1023,5 @@ ol.ui.list ol li, }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/loader.less b/definitions/elements/loader.less index eef2db5..71f4090 100644 --- a/definitions/elements/loader.less +++ b/definitions/elements/loader.less @@ -62,16 +62,16 @@ & when (@variationLoaderSpeeds) { /* Speeds */ - .ui.fast.loading.loading::after, - .ui.fast.loading.loading .input > i.icon::after, - .ui.fast.loading.loading > i.icon::after, + .ui.ui.fast.loading::after, + .ui.ui.fast.loading .input > i.icon::after, + .ui.ui.fast.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.ui.slow.loading::after, + .ui.ui.slow.loading .input > i.icon::after, + .ui.ui.slow.loading > i.icon::after, .ui.slow.loader::after { animation-duration: @loaderSpeedSlow; } @@ -204,49 +204,49 @@ @c: @colors[@@color][color]; @l: @colors[@@color][light]; - .ui.@{color}.elastic.loader.loader::before, + .ui.ui.@{color}.elastic.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 { + .ui.ui.ui.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before, + .ui.ui.ui.@{color}.elastic.loading .input > i.icon::before, + .ui.ui.ui.ui.@{color}.elastic.loading > i.icon::before, + .ui.ui.ui.ui.@{color}.loading:not(.usual):not(.button)::after, + .ui.ui.ui.ui.@{color}.loading .input > i.icon::after, + .ui.ui.ui.ui.@{color}.loading > i.icon::after, + .ui.ui.ui.@{color}.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 { + .ui.ui.ui.inverted.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before, + .ui.ui.ui.inverted.@{color}.elastic.loading .input > i.icon::before, + .ui.ui.ui.inverted.@{color}.elastic.loading > i.icon::before, + .ui.ui.ui.ui.inverted.@{color}.loading:not(.usual)::after, + .ui.ui.ui.ui.inverted.@{color}.loading .input > i.icon::after, + .ui.ui.ui.ui.inverted.@{color}.loading > i.icon::after, + .ui.ui.ui.inverted.@{color}.loader::after { color: @l; } }); } -.ui.elastic.loader.loader::before, -.ui.elastic.loading.loading.loading::before, -.ui.elastic.loading.loading.loading .input > i.icon::before, -.ui.elastic.loading.loading.loading > i.icon::before, -.ui.loading.loading.loading.loading:not(.usual)::after, -.ui.loading.loading.loading.loading .input > i.icon::after, -.ui.loading.loading.loading.loading > i.icon::after, -.ui.loader.loader.loader::after { +.ui.ui.elastic.loader::before, +.ui.ui.ui.elastic.loading::before, +.ui.ui.ui.elastic.loading .input > i.icon::before, +.ui.ui.ui.elastic.loading > i.icon::before, +.ui.ui.ui.ui.loading:not(.usual)::after, +.ui.ui.ui.ui.loading .input > i.icon::after, +.ui.ui.ui.ui.loading > i.icon::after, +.ui.ui.ui.loader::after { border-color: currentColor; } -.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before { +.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before { color: @invertedLoaderLineColor; } .ui.elastic.basic.loading.button::before, .ui.elastic.basic.loading.button::after { color: @loaderLineColor; } -.ui.double.loading.loading.loading.loading.button::after { +.ui.ui.ui.ui.double.loading.button::after { border-bottom-color: currentColor; } @@ -278,30 +278,30 @@ } } -.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 { +.ui.ui.ui.ui.ui.ui.loading::after, +.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after, +.ui.ui.ui.ui.ui.ui.loading > i.icon::after, +.ui.ui.ui.ui.ui.loader::after { border-left-color: transparent; border-right-color: transparent; } -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after, -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after, -.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after, -.ui.loader.loader.loader.loader.loader.loader:not(.double)::after { +.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after, +.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after, +.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after, +.ui.ui.ui.ui.ui.ui.loader:not(.double)::after { 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 { +.ui.ui.ui.ui.ui.ui.loading.card::after, +.ui.ui.ui.ui.ui.ui.loading.segments::after, +.ui.ui.ui.ui.ui.ui.loading.segment::after, +.ui.ui.ui.ui.ui.ui.loading.form::after { 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 { +.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after, +.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after, +.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after, +.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after { border-bottom-color: @loaderFillColor; } @@ -316,17 +316,17 @@ .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 { + .ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after, + .ui.ui.elastic.loading .input > i.icon::after, + .ui.ui.elastic.loading > i.icon::after, + .ui.ui.elastic.loader::after { animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.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 { + .ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before, + .ui.ui.ui.elastic.loading .input > i.icon::before, + .ui.ui.ui.elastic.loading > i.icon::before, + .ui.ui.elastic.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 @@ -339,30 +339,30 @@ } } & 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 { + .ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after, + .ui.ui.slow.elastic.loading .input > i.icon::after, + .ui.ui.slow.elastic.loading > i.icon::after, + .ui.ui.slow.elastic.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 { + .ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before, + .ui.ui.ui.slow.elastic.loading .input > i.icon::before, + .ui.ui.ui.slow.elastic.loading > i.icon::before, + .ui.ui.slow.elastic.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 { + .ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after, + .ui.ui.fast.elastic.loading .input > i.icon::after, + .ui.ui.fast.elastic.loading > i.icon::after, + .ui.ui.fast.elastic.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 { + .ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before, + .ui.ui.ui.fast.elastic.loading .input > i.icon::before, + .ui.ui.ui.fast.elastic.loading > i.icon::before, + .ui.ui.fast.elastic.loader::before { animation-duration: 0.66s; } } @@ -423,4 +423,5 @@ } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/placeholder.less b/definitions/elements/placeholder.less index c1534ec..8616812 100644 --- a/definitions/elements/placeholder.less +++ b/definitions/elements/placeholder.less @@ -248,4 +248,5 @@ } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/rail.less b/definitions/elements/rail.less index b81ecb0..11bdf88 100644 --- a/definitions/elements/rail.less +++ b/definitions/elements/rail.less @@ -144,4 +144,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/reveal.less b/definitions/elements/reveal.less index 366cad0..9b4fd6f 100644 --- a/definitions/elements/reveal.less +++ b/definitions/elements/reveal.less @@ -280,4 +280,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/segment.less b/definitions/elements/segment.less index abacbc5..d4bc071 100644 --- a/definitions/elements/segment.less +++ b/definitions/elements/segment.less @@ -189,6 +189,9 @@ margin: @piledMargin 0; box-shadow: @piledBoxShadow; z-index: @piledZIndex; + background-color: @white; + border: @piledBorder; + color: @textColor; } .ui.piled.segment:first-child { margin-top: 0; @@ -200,7 +203,7 @@ .ui.piled.segments::before, .ui.piled.segment::after, .ui.piled.segment::before { - background-color: @white; + background-color: inherit; visibility: visible; content: ""; display: block; @@ -208,9 +211,16 @@ left: 0; position: absolute; width: 100%; - border: @piledBorder; + border: inherit; box-shadow: @piledBoxShadow; } + & when (@variationSegmentInverted) { + .ui.inverted.piled.segment { + background-color: @invertedBackground; + border: @invertedPiledBorder; + color: @invertedTextColor; + } + } .ui.piled.segments::before, .ui.piled.segment::before { transform: rotate(-@piledDegrees); @@ -240,6 +250,12 @@ margin-bottom: 0; } } + @supports selector(:has(.f)) { + *:has(> .ui.piled.segment) { + z-index: 0; + position: relative; + } + } } & when (@variationSegmentStacked) { @@ -258,7 +274,7 @@ position: absolute; bottom: -(@stackedHeight / 2); left: 0; - border-top: 1px solid @borderColor; + border-top: @borderWidth solid @stackedBorderColor; background: @stackedPageBackground; width: 100%; height: @stackedHeight; @@ -277,12 +293,14 @@ } & 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; + .ui.stacked.inverted.segments, + .ui.stacked.inverted.segment { + border: @borderWidth solid @invertedStackedBorderColor; + &::before, + &::after { + background-color: @subtleTransparentBlack; + border-top: @borderWidth solid @invertedStackedBorderColor; + } } } } @@ -350,10 +368,16 @@ Raised -------------------- */ - .ui.raised.raised.segments, - .ui.raised.raised.segment { + .ui.ui.raised.segments, + .ui.ui.raised.segment { box-shadow: @raisedBoxShadow; } + & when (@variationSegmentInverted) { + .ui.ui.inverted.raised.segments, + .ui.ui.inverted.raised.segment { + box-shadow: @invertedRaisedBoxShadow; + } + } } & when (@variationSegmentGroups) { @@ -437,6 +461,7 @@ border-radius: @groupedBorderRadius; border: @groupedBorder; } + .ui.wrapping.horizontal.segments, .ui.stackable.horizontal.segments { flex-wrap: wrap; } @@ -473,7 +498,7 @@ .ui.segments > .horizontal.segments:first-child { border-top: none; } - .ui.horizontal.segments:not(.stackable) > .segment:first-child { + .ui.horizontal.segments:not(.stackable):not(.wrapping) > .segment:first-child { border-left: none; } .ui.horizontal.segments > .segment:first-child { @@ -520,6 +545,7 @@ pointer-events: none; user-select: none; transition: all 0s linear; + min-height: @loadingMinHeight; } .ui.loading.segments::before, .ui.loading.segment::before { @@ -590,13 +616,19 @@ @color: @value; @c: @colors[@@color][color]; & when not (@color=primary) and not (@color=secondary) { - .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) { + .ui.ui.ui.ui.ui.@{color}.segment:not(.inverted) { border-top: @coloredBorderSize solid @c; } & when (@variationSegmentInverted) { - .ui.inverted.@{color}.segment.segment.segment.segment.segment { + .ui.ui.ui.ui.ui.inverted.@{color}.segment { background-color: @c; color: @white; + & when not (@variationSegmentPiled) and ((@variationSegmentAttached) or (@variationSegmentStacked)) { + border-color: c; + } + } + .ui.ui.inverted.@{color}.segment:not(.piled) when (@variationSegmentPiled) and ((@variationSegmentAttached) or (@variationSegmentStacked)) { + border-color: @c; } } } @@ -816,24 +848,39 @@ & when (@variationSegmentScrollingShort) { .ui.scrolling.segment.short { max-height: @scrollingMobileMaxHeight * 0.75; + &.resizable when (@variationSegmentResizable) { + height: @scrollingMobileMaxHeight * 0.75; + } } } & when (@variationSegmentScrollingVeryShort) { .ui.scrolling.segment[class*="very short"] { max-height: @scrollingMobileMaxHeight * 0.5; + &.resizable when (@variationSegmentResizable) { + height: @scrollingMobileMaxHeight * 0.5; + } } } .ui.scrolling.segment { max-height: @scrollingMobileMaxHeight; + &.resizable when (@variationSegmentResizable) { + height: @scrollingMobileMaxHeight; + } } & when (@variationSegmentScrollingLong) { .ui.scrolling.segment.long { max-height: @scrollingMobileMaxHeight * 2; + &.resizable when (@variationSegmentResizable) { + height: @scrollingMobileMaxHeight * 2; + } } } & when (@variationSegmentScrollingVeryLong) { .ui.scrolling.segment[class*="very long"] { max-height: @scrollingMobileMaxHeight * 3; + &.resizable when (@variationSegmentResizable) { + height: @scrollingMobileMaxHeight * 3; + } } } } @@ -842,24 +889,39 @@ & when (@variationSegmentScrollingShort) { .ui.scrolling.segment.short { max-height: @scrollingTabletMaxHeight * 0.75; + &.resizable when (@variationSegmentResizable) { + height: @scrollingTabletMaxHeight * 0.75; + } } } & when (@variationSegmentScrollingVeryShort) { .ui.scrolling.segment[class*="very short"] { max-height: @scrollingTabletMaxHeight * 0.5; + &.resizable when (@variationSegmentResizable) { + height: @scrollingTabletMaxHeight * 0.5; + } } } .ui.scrolling.segment { max-height: @scrollingTabletMaxHeight; + &.resizable when (@variationSegmentResizable) { + height: @scrollingTabletMaxHeight; + } } & when (@variationSegmentScrollingLong) { .ui.scrolling.segment.long { max-height: @scrollingTabletMaxHeight * 2; + &.resizable when (@variationSegmentResizable) { + height: @scrollingTabletMaxHeight * 2; + } } } & when (@variationSegmentScrollingVeryLong) { .ui.scrolling.segment[class*="very long"] { max-height: @scrollingTabletMaxHeight * 3; + &.resizable when (@variationSegmentResizable) { + height: @scrollingTabletMaxHeight * 3; + } } } } @@ -867,24 +929,39 @@ & when (@variationSegmentScrollingShort) { .ui.scrolling.segment.short { max-height: @scrollingComputerMaxHeight * 0.75; + &.resizable when (@variationSegmentResizable) { + height: @scrollingComputerMaxHeight * 0.75; + } } } & when (@variationSegmentScrollingVeryShort) { .ui.scrolling.segment[class*="very short"] { max-height: @scrollingComputerMaxHeight * 0.5; + &.resizable when (@variationSegmentResizable) { + height: @scrollingComputerMaxHeight * 0.5; + } } } .ui.scrolling.segment { max-height: @scrollingComputerMaxHeight; + &.resizable when (@variationSegmentResizable) { + height: @scrollingComputerMaxHeight; + } } & when (@variationSegmentScrollingLong) { .ui.scrolling.segment.long { max-height: @scrollingComputerMaxHeight * 2; + &.resizable when (@variationSegmentResizable) { + height: @scrollingComputerMaxHeight * 2; + } } } & when (@variationSegmentScrollingVeryLong) { .ui.scrolling.segment[class*="very long"] { max-height: @scrollingComputerMaxHeight * 3; + &.resizable when (@variationSegmentResizable) { + height: @scrollingComputerMaxHeight * 3; + } } } } @@ -892,27 +969,48 @@ & when (@variationSegmentScrollingShort) { .ui.scrolling.segment.short { max-height: @scrollingWidescreenMaxHeight * 0.75; + &.resizable when (@variationSegmentResizable) { + height: @scrollingWidescreenMaxHeight * 0.75; + } } } & when (@variationSegmentScrollingVeryShort) { .ui.scrolling.segment[class*="very short"] { max-height: @scrollingWidescreenMaxHeight * 0.5; + &.resizable when (@variationSegmentResizable) { + height: @scrollingWidescreenMaxHeight * 0.5; + } } } .ui.scrolling.segment { max-height: @scrollingWidescreenMaxHeight; + &.resizable when (@variationSegmentResizable) { + height: @scrollingWidescreenMaxHeight; + } } & when (@variationSegmentScrollingLong) { .ui.scrolling.segment.long { max-height: @scrollingWidescreenMaxHeight * 2; + &.resizable when (@variationSegmentResizable) { + height: @scrollingWidescreenMaxHeight * 2; + } } } & when (@variationSegmentScrollingVeryLong) { .ui.scrolling.segment[class*="very long"] { max-height: @scrollingWidescreenMaxHeight * 3; + &.resizable when (@variationSegmentResizable) { + height: @scrollingWidescreenMaxHeight * 3; + } } } } + & when (@variationSegmentResizable) { + .ui.resizable.scrolling.segment { + resize: @resizableDirection; + max-height: none; + } + } } /* ------------------- @@ -933,4 +1031,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/step.less b/definitions/elements/step.less index 3f44425..d6150b9 100644 --- a/definitions/elements/step.less +++ b/definitions/elements/step.less @@ -617,4 +617,5 @@ } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/elements/text.less b/definitions/elements/text.less index de87b84..70c2ceb 100644 --- a/definitions/elements/text.less +++ b/definitions/elements/text.less @@ -71,4 +71,5 @@ span.ui.medium.text { }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/globals/reset.less b/definitions/globals/reset.less index ec345b6..519b72d 100644 --- a/definitions/globals/reset.less +++ b/definitions/globals/reset.less @@ -40,4 +40,5 @@ input[type="password"] { -moz-appearance: none; /* mobile firefox too! */ } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/globals/site.js b/definitions/globals/site.js index 93e21f0..fc84481 100644 --- a/definitions/globals/site.js +++ b/definitions/globals/site.js @@ -292,7 +292,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var diff --git a/definitions/globals/site.less b/definitions/globals/site.less index 257763b..3c6997d 100644 --- a/definitions/globals/site.less +++ b/definitions/globals/site.less @@ -207,4 +207,5 @@ input::selection { color: @inputHighlightColor; } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/modules/accordion.js b/definitions/modules/accordion.js index 7ef4790..ce61a62 100644 --- a/definitions/modules/accordion.js +++ b/definitions/modules/accordion.js @@ -45,7 +45,6 @@ eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', $module = $(this), $title = $module.find(selector.title), @@ -439,7 +438,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -452,9 +451,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { diff --git a/definitions/modules/accordion.less b/definitions/modules/accordion.less index fbbb855..b0ddf58 100644 --- a/definitions/modules/accordion.less +++ b/definitions/modules/accordion.less @@ -364,4 +364,5 @@ } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/modules/calendar.js b/definitions/modules/calendar.js index 99051d4..6a2c849 100644 --- a/definitions/modules/calendar.js +++ b/definitions/modules/calendar.js @@ -24,8 +24,6 @@ $allModules = $(this), $document = $(document), - moduleSelector = $allModules.selector || '', - time = Date.now(), performance = [], @@ -1481,7 +1479,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -1494,9 +1492,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { diff --git a/definitions/modules/calendar.less b/definitions/modules/calendar.less index 0356852..0d65b56 100644 --- a/definitions/modules/calendar.less +++ b/definitions/modules/calendar.less @@ -60,24 +60,24 @@ .ui.calendar .ui.table.year, .ui.calendar .ui.table.month, .ui.calendar .ui.table.minute { - min-width: 15em; + min-width: @widthYearMonthMinute; } .ui.calendar .ui.table.day { - min-width: 18em; + min-width: @widthDay; } .ui.calendar .ui.table.day.andweek { - min-width: 22em; + min-width: @widthDayAndWeek; } .ui.calendar .ui.table.hour { - min-width: 20em; + min-width: @widthHour; } .ui.calendar .ui.table tr th, .ui.calendar .ui.table tr td { - padding: 0.5em; + padding: @cellPadding; white-space: nowrap; } @@ -100,13 +100,13 @@ } .ui.calendar .ui.table.day tr:nth-child(2) th { - padding-top: 0.2em; - padding-bottom: 0.3em; + padding-top: @cellHeaderTopPadding; + padding-bottom: @cellHeaderBottomPadding; } .ui.calendar .ui.table tr td { - padding-left: 0.1em; - padding-right: 0.1em; + padding-left: @cellLeftRightPadding; + padding-right: @cellLeftRightPadding; } .ui.calendar .ui.table tr .link { @@ -114,13 +114,13 @@ } .ui.calendar .ui.table tr .prev.link { - width: 14.28571%; + width: @widthPrevNext; position: absolute; left: 0; } .ui.calendar .ui.table tr .next.link { - width: 14.28571%; + width: @widthPrevNext; position: absolute; right: 0; } @@ -177,7 +177,7 @@ } & when (@variationCalendarMultiMonth) { - .ui.calendar.popup > .ui.ui.grid { + .ui.ui.ui.calendar.popup > .ui.ui.grid { margin: @multiMonthMargin; & > .column:not(:first-child) { padding-left: @multiMonthPadding; @@ -196,6 +196,35 @@ } } +/* -------------------- + Sizes +--------------------- */ + +& when not (@variationCalendarSizes = false) { + each(@variationCalendarSizes, { + @s: @@value; + .ui.@{value}.calendar, + .ui.@{value}.calendar .ui.table tr th, + .ui.@{value}.calendar .ui.table tr td { + font-size: @s; + } + .ui.@{value}.calendar .ui.table.year, + .ui.@{value}.calendar .ui.table.month, + .ui.@{value}.calendar .ui.table.minute { + min-width: unit(@widthYearMonthMinute * @s, em); + } + .ui.@{value}.calendar .ui.table.day { + min-width: unit(@widthDay * @s, em); + } + .ui.@{value}.calendar .ui.table.day.andweek { + min-width: unit(@widthDayAndWeek * @s, em); + } + .ui.@{value}.calendar .ui.table.hour { + min-width: unit(@widthHour * @s, em); + } + }); +} + /******************************* States *******************************/ @@ -215,4 +244,5 @@ } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/modules/checkbox.js b/definitions/modules/checkbox.js index 9c72ee2..4162a58 100644 --- a/definitions/modules/checkbox.js +++ b/definitions/modules/checkbox.js @@ -22,7 +22,6 @@ $.fn.checkbox = function (parameters) { var $allModules = $(this), - moduleSelector = $allModules.selector || '', time = Date.now(), performance = [], @@ -242,7 +241,9 @@ $input.trigger('blur'); shortcutPressed = true; event.stopPropagation(); - } else if (!event.ctrlKey && module.can.change()) { + } else if (!module.can.change()) { + shortcutPressed = true; + } else if (!event.ctrlKey) { if (key === keyCode.space || (key === keyCode.enter && settings.enableEnterKey)) { module.verbose('Enter/space key pressed, toggling checkbox'); module.toggle(); @@ -724,7 +725,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -737,9 +738,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { diff --git a/definitions/modules/checkbox.less b/definitions/modules/checkbox.less index e4ddeac..9c7d932 100644 --- a/definitions/modules/checkbox.less +++ b/definitions/modules/checkbox.less @@ -56,11 +56,14 @@ cursor: auto; position: relative; display: block; - padding-left: @labelDistance; outline: none; font-size: @labelFontSize; } +.ui.checkbox:not(.invisible) label { + padding-left: @labelDistance; +} + .ui.checkbox label::before { position: absolute; top: 0; @@ -130,8 +133,8 @@ background: @checkboxHoverBackground; border-color: @checkboxHoverBorderColor; } -.ui.checkbox label:hover, -.ui.checkbox + label:hover { +.ui.checkbox:not(.invisible) label:hover, +.ui.checkbox:not(.invisible) + label:hover { color: @labelHoverColor; } @@ -146,7 +149,7 @@ .ui.checkbox label:active::after { color: @checkboxPressedColor; } -.ui.checkbox input:active ~ label { +.ui.checkbox:not(.invisible) input:active ~ label { color: @labelPressedColor; } @@ -161,7 +164,7 @@ .ui.checkbox input:focus ~ label::after { color: @checkboxFocusCheckColor; } -.ui.checkbox input:focus ~ label { +.ui.checkbox:not(.invisible) input:focus ~ label { color: @labelFocusColor; } @@ -652,6 +655,59 @@ } } } +& when (@variationCheckboxInvisible) { + /* -------------- + Invisible + --------------- */ + + .ui.invisible.checkbox { + &:not(.compact) { + display: block; + } + & input { + left: -99999px; + position: absolute; + } + & label::before, + & label::after { + display: none; + } + & label { + transition: @invisibleCheckboxLabelTransition; + } + } + .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) { + & + label { + background: @invisibleCheckboxBackground; + border-color: @invisibleCheckboxBorderColor; + box-shadow: @invisibleCheckboxBoxShadow; + color: @invisibleCheckboxColor; + } + &:not(:hover):focus + label:not(.image) { + box-shadow: @invisibleCheckboxFocusBoxShadow; + } + & + label.image, + .basic& + label { + box-shadow: none; + } + } + + .ui.invisible.checkbox input:not(:checked) { + & + label.image { + opacity: @invisibleCheckboxImageOpacityUnchecked; + filter: @invisibleCheckboxImageFilterUnchecked; + } + &:not(:hover):focus + label.image { + opacity: @invisibleCheckboxImageOpacityFocus; + } + & when (@variationCheckboxDisabled) { + &[disabled] + label.image, + .disabled& + label.image { + opacity: @invisibleCheckboxImageOpacityUncheckedDisabled; + } + } + } +} /* -------------------- Size @@ -696,4 +752,5 @@ }); } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/modules/dimmer.js b/definitions/modules/dimmer.js index 14b68e1..a350cf7 100644 --- a/definitions/modules/dimmer.js +++ b/definitions/modules/dimmer.js @@ -46,7 +46,6 @@ eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', clickEvent = 'ontouchstart' in document.documentElement ? 'touchstart' @@ -529,7 +528,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -542,9 +541,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if ($allModules.length > 1) { title += ' (' + $allModules.length + ')'; } diff --git a/definitions/modules/dimmer.less b/definitions/modules/dimmer.less index 70129a0..ebf39d5 100644 --- a/definitions/modules/dimmer.less +++ b/definitions/modules/dimmer.less @@ -220,7 +220,7 @@ body.dimmable > .dimmer { .light.light.light.light.light.dimmer { background: @lightBackgroundColor; } - .very.light.light.light.light.dimmer { + .very.very.very.very.light.dimmer { background: @veryLightBackgroundColor; } } @@ -249,7 +249,7 @@ body.dimmable > .dimmer { .light.light.light.light.light.inverted.dimmer { background: @lightInvertedBackgroundColor; } - .very.light.light.light.light.inverted.dimmer { + .very.very.very.very.light.inverted.dimmer { background: @veryLightInvertedBackgroundColor; } } @@ -390,4 +390,5 @@ body.dimmable > .dimmer { } } -.loadUIOverrides(); +// stylelint-disable no-invalid-position-at-import-rule +@import (multiple, optional) "../../overrides.less"; diff --git a/definitions/modules/dropdown.js b/definitions/modules/dropdown.js index e39b0b4..67554ee 100644 --- a/definitions/modules/dropdown.js +++ b/definitions/modules/dropdown.js @@ -24,14 +24,25 @@ $allModules = $(this), $document = $(document), - moduleSelector = $allModules.selector || '', - time = Date.now(), performance = [], query = arguments[0], methodInvoked = typeof query === 'string', queryArguments = [].slice.call(arguments, 1), + contextCheck = function (context, win) { + var $context; + if ([window, document].indexOf(context) >= 0) { + $context = $(context); + } else { + $context = $(win.document).find(context); + if ($context.length === 0) { + $context = win.frameElement ? contextCheck(context, win.parent) : window; + } + } + + return $context; + }, returnedValue ; @@ -56,7 +67,7 @@ moduleNamespace = 'module-' + namespace, $module = $(this), - $context = [window, document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $(settings.context), + $context = contextCheck(settings.context, window), $text = $module.find(selector.text), $search = $module.find(selector.search), $sizer = $module.find(selector.sizer), @@ -91,7 +102,8 @@ selectObserver, menuObserver, classObserver, - module + module, + tempDisableApiCache = false ; module = { @@ -351,7 +363,7 @@ module.verbose('Adding clear icon'); $clear = $('') .addClass('remove icon') - .insertBefore($text) + .insertAfter($icon) ; } if (module.is.search() && !module.has.search()) { @@ -517,7 +529,7 @@ callback = isFunction(callback) ? callback : function () {}; - if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache()) { + if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache() && !module.has.maxSelections()) { module.clearItems(); } if (!module.can.show() && module.is.remote()) { @@ -567,7 +579,10 @@ if ($subMenu.length > 0) { module.verbose('Hiding sub-menu', $subMenu); $subMenu.each(function () { - module.animate.hide(false, $(this)); + var $sub = $(this); + if (!module.is.animating($sub)) { + module.animate.hide(false, $sub); + } }); } } @@ -762,6 +777,8 @@ } ; if (settings.useLabels && module.has.maxSelections()) { + module.show(); + return; } if (settings.apiSettings) { @@ -858,11 +875,12 @@ if (!$module.api('get request')) { module.setup.api(); } - apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks); + apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks, tempDisableApiCache ? { cache: false } : {}); $module .api('setting', apiSettings) .api('query') ; + tempDisableApiCache = false; }, filterItems: function (query) { @@ -1084,8 +1102,8 @@ notFoundTokens = [] ; tokens.forEach(function (value) { - if (module.set.selected(module.escape.htmlEntities(value.trim()), null, true, true) === false) { - notFoundTokens.push(value); + if (module.set.selected(module.escape.htmlEntities(value.trim()), null, false, true) === false) { + notFoundTokens.push(value.trim()); } }); event.preventDefault(); @@ -1218,7 +1236,7 @@ module.set.filtered(); } clearTimeout(module.timer); - module.timer = setTimeout(module.search, settings.delay.search); + module.timer = setTimeout(function () { module.search(); }, settings.delay.search); }, label: { click: function (event) { @@ -1394,11 +1412,13 @@ if (settings.allowAdditions) { module.remove.userAddition(); } - module.remove.filteredItem(); + if (!settings.keepSearchTerm) { + module.remove.filteredItem(); + module.remove.searchTerm(); + } if (!module.is.visible() && $target.length > 0) { module.show(); } - module.remove.searchTerm(); if (!module.is.focusedOnSearch() && skipRefocus !== true) { module.focusSearch(true); } @@ -1584,7 +1604,9 @@ module.verbose('Selecting item from keyboard shortcut', $selectedItem); module.event.item.click.call($selectedItem, event); if (module.is.searchSelection()) { - module.remove.searchTerm(); + if (!settings.keepSearchTerm) { + module.remove.searchTerm(); + } if (module.is.multiple()) { $search.trigger('focus'); } @@ -1801,7 +1823,7 @@ ? value : text; if (module.can.activate($(element))) { - module.set.selected(value, $(element)); + module.set.selected(value, $(element), false, settings.keepSearchTerm); if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) { module.hideAndClear(); } @@ -2065,7 +2087,7 @@ values.push({ name: name, value: value, - text: text, + text: module.escape.htmlEntities(text, true), disabled: disabled, }); } @@ -2153,7 +2175,7 @@ return; } if (isMultiple) { - if ($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(String)) !== -1) { + if ($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(String).map(module.escape.htmlEntities)) !== -1) { $selectedItem = $selectedItem ? $selectedItem.add($choice) : $choice; @@ -2214,7 +2236,7 @@ return false; } - return true; + return false; }, disabled: function () { $search.attr('tabindex', module.is.disabled() ? -1 : 0); @@ -2304,7 +2326,7 @@ $.each(values, function (value, name) { module.set.text(name); }); - } else { + } else if (settings.useLabels) { $.each(values, function (value, name) { module.add.label(value, name); }); @@ -2388,6 +2410,11 @@ module.set.value('', null, null, preventChangeTrigger); }, + clearCache: function () { + module.debug('Clearing API cache once'); + tempDisableApiCache = true; + }, + scrollPage: function (direction, $selectedItem) { var $currentItem = $selectedItem || module.get.selectedItem(), @@ -2446,7 +2473,7 @@ valueIsSet = searchValue !== '' ; if (isMultiple && hasSearchValue) { - module.verbose('Adjusting input width', searchWidth, settings.glyphWidth); + module.verbose('Adjusting input width', searchWidth); $search.css('width', searchWidth + 'px'); } if (hasSearchValue || (isSearchMultiple && valueIsSet)) { @@ -2745,7 +2772,7 @@ return false; } module.debug('Setting selected menu item to', $selectedItem); - if (module.is.multiple()) { + if (module.is.multiple() && !keepSearchTerm) { module.remove.searchWidth(); } if (module.is.single()) { @@ -3438,7 +3465,7 @@ return settings.apiSettings && module.can.useAPI(); }, noApiCache: function () { - return settings.apiSettings && !settings.apiSettings.cache; + return tempDisableApiCache || (settings.apiSettings && !settings.apiSettings.cache); }, single: function () { return !module.is.multiple(); @@ -3448,7 +3475,7 @@ selectChanged = false ; $.each(mutations, function (index, mutation) { - if ($(mutation.target).is('select, option, optgroup') || $(mutation.addedNodes).is('select')) { + if ($(mutation.target).is('option, optgroup') || $(mutation.addedNodes).is('select') || ($(mutation.target).is('select') && mutation.type !== 'attributes')) { selectChanged = true; return false; @@ -3720,12 +3747,12 @@ show: function () { module.verbose('Delaying show event to ensure user intent'); clearTimeout(module.timer); - module.timer = setTimeout(module.show, settings.delay.show); + module.timer = setTimeout(function () { module.show(); }, settings.delay.show); }, hide: function () { module.verbose('Delaying hide event to ensure user intent'); clearTimeout(module.timer); - module.timer = setTimeout(module.hide, settings.delay.hide); + module.timer = setTimeout(function () { module.hide(); }, settings.delay.hide); }, }, @@ -3757,7 +3784,7 @@ return text.replace(regExp.escape, '\\$&'); }, - htmlEntities: function (string) { + htmlEntities: function (string, forceAmpersand) { var badChars = /["'<>`]/g, shouldEscape = /["&'<>`]/, @@ -3773,7 +3800,7 @@ } ; if (shouldEscape.test(string)) { - string = string.replace(/&(?![\d#a-z]{1,12};)/gi, '&'); + string = string.replace(forceAmpersand ? /&/g : /&(?![\d#a-z]{1,12};)/gi, '&'); return string.replace(badChars, escapedChar); } @@ -3851,7 +3878,7 @@ }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 500); + module.performance.timer = setTimeout(function () { module.performance.display(); }, 500); }, display: function () { var @@ -3864,9 +3891,6 @@ totalTime += data['Execution Time']; }); title += ' ' + totalTime + 'ms'; - if (moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } if (performance.length > 0) { console.groupCollapsed(title); if (console.table) { @@ -3991,6 +4015,7 @@ forceSelection: false, // force a choice on blur with search selection allowAdditions: false, // whether multiple select should allow user added values + keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection ignoreCase: false, // whether to consider case sensitivity when creating labels ignoreSearchCase: true, // whether to consider case sensitivity when filtering items hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value @@ -4010,8 +4035,6 @@ duration: 200, // duration of transition displayType: false, // displayType of transition - glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width - headerDivider: true, // whether option headers should have an additional divider line underneath when converted from '. + * @default true + */ + headerDivider: boolean; + + /** + * Whether the dropdown should collapse upon selection of an actionable item. + * @default true + */ + collapseOnActionable: boolean; + + /** + * Allows customization of multi-select labels. + * @default true + */ + label: object; + + /** + * Time in milliseconds to debounce show or hide behavior when 'on: hover' is used, or when 'touch' is used.. + * @default true + */ + delay: object; + + // endregion + + // region Callbacks + + /** + * Is called after a dropdown value changes. + * Receives the name and value of selection and the active menu element. + */ + onChange(value: string, text: string, $choice: JQuery): void; + + /** + * Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value. + */ + onAdd(addedValue: string, addedText: string, $addedChoice: JQuery): void; + + /** + * Is called after a dropdown selection is removed using a multiple select dropdown, only receives the removed value. + */ + onRemove(removedValue: string, removedText: string, $removedChoice: JQuery): void; + + /** + * Is called after an actionable item has been selected. + */ + onActionable(value: string, text: string, $choice: JQuery): void; + + /** + * Is called before a search takes place to filter the items list. + * If 'false' is returned, the search and item filtering is cancelled. + */ + onSearch(): void; + + /** + * Is called after a label is selected by a user. + */ + onLabelSelect($selectedLabels: JQuery): void; + + /** + * Allows you to modify a label before it is added. + * Expects the jQ DOM element for a label to be returned. + */ + onLabelCreate(value: string, text: string): void; + + /** + * Called when a label is remove, 'return false;' will prevent the label from being removed. + */ + onLabelRemove(value: string): void; + + /** + * Is called after a dropdown is searched with no matching values. + */ + onNoResults(searchValue: string): void; + + /** + * Is called before a dropdown is shown. + * If 'false' is returned, dropdown will not be shown. + */ + onShow(searchValue: string): void; + + /** + * Is called before a dropdown is hidden. + * If 'false' is returned, dropdown will not be hidden. + */ + onHide(): void; + + // endregion + + // region DOM Settings + + /** + * Selectors used to find parts of a module. + */ + selector: Dropdown.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Dropdown.ClassNameSettings; + + /** + * Class names used to determine element messages. + */ + message: Dropdown.MessageSettings; + + /** + * + */ + regExp: Dropdown.RegExpSettings; + + /** + * + */ + metadata: Dropdown.MetadataSettings; + + /** + * + */ + fields: Dropdown.FieldsSettings; + + /** + * + */ + keys: Dropdown.KeysSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + * @default 'Dropdown' + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + * @default 'dropdown' + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + * @default false + */ + silent: boolean; + + /** + * Debug output to console + * @default false + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + * @default true + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + * @default false + */ + verbose: boolean; + + error: Dropdown.ErrorSettings; + + // endregion + } + + namespace Dropdown { + type SelectorSettings = Partial>; + type ClassNameSettings = Partial>; + type MessageSettings = Partial>; + type RegExpSettings = Partial>; + type MetadataSettings = Partial>; + type FieldsSettings = Partial>; + type KeysSettings = Partial>; + type ErrorSettings = Partial>; + + namespace Settings { + interface Selectors { + /** + * @default '.addition' + */ + addition: string; + + /** + * @default '.divider, .header' + */ + divider: string; + + /** + * @default '.ui.dropdown' + */ + dropdown: string; + + /** + * @default '> .dropdown.icon' + */ + icon: string; + + /** + * @default '> input[type="hidden"], > select' + */ + input: string; + + /** + * @default '.item' + */ + item: string; + + /** + * @default '> .label' + */ + label: string; + + /** + * @default '> .label > .delete.icon' + */ + remove: string; + + /** + * @default '.label' + */ + siblingLabel: string; + + /** + * @default '.menu' + */ + menu: string; + + /** + * @default '.message' + */ + message: string; + + /** + * @default '.dropdown.icon' + */ + menuIcon: string; + + /** + * @default 'input.search, .menu > .search > input' + */ + search: string; + + /** + * @default '> span.sizer' + */ + sizer: string; + + /** + * @default '> .text:not(.icon)' + */ + text: string; + + /** + * @default '.disabled, .filtered' + */ + unselectable: string; + + /** + * @default '> .remove.icon' + */ + clearIcon: string; + } + + interface ClassNames { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'addition' + */ + addition: string; + + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'description' + */ + description: string; + + /** + * @default 'vertical' + */ + descriptionVertical: string; + + /** + * @default 'disabled' + */ + disabled: string; + + /** + * @default 'empty' + */ + empty: string; + + /** + * @default 'ui dropdown' + */ + dropdown: string; + + /** + * @default 'filtered' + */ + filtered: string; + + /** + * @default 'hidden transition' + */ + hidden: string; + + /** + * @default 'icon' + */ + icon: string; + + /** + * @default 'image' + */ + image: string; + + /** + * @default 'item' + */ + item: string; + + /** + * @default 'ui label' + */ + label: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'menu' + */ + menu: string; + + /** + * @default 'message' + */ + message: string; + + /** + * @default 'multiple' + */ + multiple: string; + + /** + * @default 'default' + */ + placeholder: string; + + /** + * @default 'sizer' + */ + sizer: string; + + /** + * @default 'search' + */ + search: string; + + /** + * @default 'selected' + */ + selected: string; + + /** + * @default 'selection' + */ + selection: string; + + /** + * @default 'text' + */ + text: string; + + /** + * @default 'upward' + */ + upward: string; + + /** + * @default 'left' + */ + leftward: string; + + /** + * @default 'visible' + */ + visible: string; + + /** + * @default 'clearable' + */ + clearable: string; + + /** + * @default 'noselection' + */ + noselection: string; + + /** + * @default 'delete' + */ + delete: string; + + /** + * @default 'header' + */ + header: string; + + /** + * @default 'divider' + */ + divider: string; + + /** + * @default '' + */ + groupIcon: string; + + /** + * @default 'unfilterable' + */ + unfilterable: string; + + /** + * @default 'actionable' + */ + actionable: string; + } + + interface Messages { + /** + * @default 'Add {term}' + */ + addResult: string; + + /** + * @default '{count} selected' + */ + count: string; + + /** + * @default 'Max {maxCount} selections' + */ + maxSelections: string; + + /** + * @default 'No results found.' + */ + noResults: string; + + /** + * @default 'There was an error contacting the server' + */ + serverError: string; + } + + interface RegExps { + /** + * @default '/[-[\]{}()*+?.,\\^$|#\s]/g' + */ + escape: string; + } + + interface Metadatas { + /** + * @default 'defaultText' + */ + defaultText: string; + + /** + * @default 'defaultValue' + */ + defaultValue: string; + + /** + * @default 'placeholderText' + */ + placeholderText: string; + + /** + * @default 'text' + */ + text: string; + + /** + * @default 'value' + */ + value: string; + } + + interface Fields { + /** + * Grouping for api results + * @default 'results' + */ + remoteValues: string; + + /** + * Grouping for all dropdown values + * @default 'values' + */ + values: string; + + /** + * Whether value should be disabled + * @default 'disabled' + */ + disabled: string; + + /** + * Displayed dropdown text + * @default 'name' + */ + name: string; + + /** + * Displayed dropdown description + * @default 'description' + */ + description: string; + + /** + * Whether description should be vertical + * @default 'descriptionVertical' + */ + descriptionVertical: string; + + /** + * Actual dropdown value + * @default 'value' + */ + value: string; + + /** + * Displayed text when selected + * @default 'text' + */ + text: string; + + /** + * Type of dropdown element + * @default 'type' + */ + type: string; + + /** + * Optional image path + * @default 'image' + */ + image: string; + + /** + * Optional individual class for image + * @default 'imageClass' + */ + imageClass: string; + + /** + * Optional icon name + * @default 'icon' + */ + icon: string; + + /** + * Optional individual class for icon (for example to use flag instead) + * @default 'iconClass' + */ + iconClass: string; + + /** + * Optional individual class for item/header + * @default 'class' + */ + class: string; + + /** + * Optional divider append for group headers + * @default 'divider' + */ + divider: string; + + /** + * Optional actionable item + * @default 'actionable' + */ + actionable: string; + } + + interface Keys { + /** + * @default 8 + */ + backspace: number; + + /** + * @default 46 + */ + deleteKey: number; + + /** + * @default 13 + */ + enter: number; + + /** + * @default 27 + */ + escape: number; + + /** + * @default 33 + */ + pageUp: number; + + /** + * @default 34 + */ + pageDown: number; + + /** + * @default 37 + */ + leftArrow: number; + + /** + * @default 38 + */ + upArrow: number; + + /** + * @default 39 + */ + rightArrow: number; + + /** + * @default 40 + */ + downArrow: number; + } + + interface Errors { + /** + * @default 'You called a dropdown action that was not defined' + */ + action: string; + + /** + * @default 'Once a select has been initialized behaviors must be called on the created ui dropdown' + */ + alreadySetup: string; + + /** + * @default 'Allowing user additions currently requires the use of labels.' + */ + labels: string; + + /** + * @default '