From 8bc627461c88c93ea3b6906fb0f14c2df48cee51 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 27 Mar 2015 17:53:40 -0400 Subject: [PATCH] Add multiple validation rules to form validation, convert form validation to using one settings object, add errored styles to multiple form validation --- src/definitions/behaviors/form.js | 188 ++++++++++++------ src/definitions/collections/form.less | 6 + src/definitions/modules/dropdown.js | 146 ++++++++------ src/definitions/modules/dropdown.less | 51 +++-- src/themes/default/collections/form.variables | 6 +- src/themes/default/modules/dropdown.variables | 15 +- 6 files changed, 271 insertions(+), 141 deletions(-) diff --git a/src/definitions/behaviors/form.js b/src/definitions/behaviors/form.js index 8dfe26c0c..97aed6c92 100644 --- a/src/definitions/behaviors/form.js +++ b/src/definitions/behaviors/form.js @@ -13,60 +13,71 @@ "use strict"; -$.fn.form = function(fields, parameters) { +$.fn.form = function(parameters) { var - $allModules = $(this), + $allModules = $(this), + moduleSelector = $allModules.selector || '', - settings = $.extend(true, {}, $.fn.form.settings, parameters), - validation = $.extend({}, $.fn.form.settings.defaults, fields), + time = new Date().getTime(), + performance = [], - namespace = settings.namespace, - metadata = settings.metadata, - selector = settings.selector, - className = settings.className, - error = settings.error, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, - - moduleSelector = $allModules.selector || '', - - time = new Date().getTime(), - performance = [], - - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + query = arguments[0], + legacyParameters = arguments[1], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), returnedValue ; $allModules .each(function() { var $module = $(this), - $field = $(this).find(selector.field), - $group = $(this).find(selector.group), - $message = $(this).find(selector.message), - $prompt = $(this).find(selector.prompt), - - $submit = $(this).find(selector.submit), - $clear = $(this).find(selector.clear), - $reset = $(this).find(selector.reset), + element = this, formErrors = [], keyHeldDown = false, - element = this, - instance = $module.data(moduleNamespace), + // set at run-time + $field, + $group, + $message, + $prompt, + $submit, + $clear, + $reset, + + settings, + validation, + + namespace, + metadata, + selector, + className, + error, + + namespace, + moduleNamespace, + eventNamespace, + + instance, module ; module = { initialize: function() { - module.verbose('Initializing form validation', $module, validation, settings); - module.bindEvents(); - module.set.defaults(); - module.instantiate(); + + // settings grabbed at run time + module.get.settings(); + + if(methodInvoked) { + module.invoke(query); + } + else { + module.verbose('Initializing form validation', $module, settings); + module.bindEvents(); + module.set.defaults(); + module.instantiate(); + } }, instantiate: function() { @@ -87,7 +98,14 @@ $.fn.form = function(fields, parameters) { refresh: function() { module.verbose('Refreshing selector cache'); - $field = $module.find(selector.field); + $field = $module.find(selector.field); + $group = $module.find(selector.group); + $message = $module.find(selector.message); + $prompt = $module.find(selector.prompt); + + $submit = $module.find(selector.submit); + $clear = $module.find(selector.clear); + $reset = $module.find(selector.reset); }, submit: function() { @@ -108,6 +126,7 @@ $.fn.form = function(fields, parameters) { }, bindEvents: function() { + module.verbose('Attaching form events'); if(settings.keyboardShortcuts) { $field .on('keydown' + eventNamespace, module.event.field.keydown) @@ -128,8 +147,9 @@ $.fn.form = function(fields, parameters) { $field .each(function() { var - type = $(this).prop('type'), - inputEvent = module.get.changeEvent(type) + $input = $(this), + type = $input.prop('type'), + inputEvent = module.get.changeEvent(type, $input) ; $(this) .on(inputEvent + eventNamespace, module.event.field.change) @@ -291,8 +311,8 @@ $.fn.form = function(fields, parameters) { }, get: { - changeEvent: function(type) { - if(type == 'checkbox' || type == 'radio' || type == 'hidden') { + changeEvent: function(type, $input) { + if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) { return 'change'; } else { @@ -307,6 +327,52 @@ $.fn.form = function(fields, parameters) { : 'keyup' ; }, + settings: function() { + var + firstProperty + ; + if($.isPlainObject(parameters)) { + var + keys = Object.keys(parameters), + isLegacySettings = (keys.length > 0) + ? (parameters[keys[0]].identifier !== undefined) + : false + ; + if(isLegacySettings) { + // 1.x (ducktyped) + settings = $.extend(true, {}, $.fn.form.settings, legacyParameters); + validation = $.extend({}, $.fn.form.settings.defaults, parameters); + module.error(settings.error.oldSyntax, element); + module.verbose('Extending settings from legacy parameters', validation, settings); + } + else { + // 2.x + settings = $.extend(true, {}, $.fn.form.settings, parameters), + validation = $.extend({}, $.fn.form.settings.defaults, settings.fields), + module.verbose('Extending settings', validation, settings); + } + } + else { + settings = $.fn.form.settings; + validation = $.fn.form.settings.defaults; + module.verbose('Using default form validation', validation, settings); + } + + // shorthand + namespace = settings.namespace; + metadata = settings.metadata; + selector = settings.selector; + className = settings.className; + error = settings.error; + moduleNamespace = 'module-' + namespace; + eventNamespace = '.' + namespace; + + // grab instance + instance = $module.data(moduleNamespace); + + // refresh selector cache + module.refresh(); + }, field: function(identifier) { module.verbose('Finding field with identifier', identifier); if( $field.filter('#' + identifier).length > 0 ) { @@ -685,14 +751,15 @@ $.fn.form = function(fields, parameters) { var $field = module.get.field(field.identifier), type = validation.type, - value = $.trim($field.val() + ''), - + value = $field.val(), bracketRegExp = /\[(.*)\]/i, bracket = bracketRegExp.exec(type), isValid = true, ancillary, functionType ; + // typecast to string + value = $.trim($field.val() + ''); // if bracket notation is used, pass in extra parameters if(bracket !== undefined && bracket !== null) { ancillary = '' + bracket[1]; @@ -863,19 +930,7 @@ $.fn.form = function(fields, parameters) { return found; } }; - if(methodInvoked) { - if(instance === undefined) { - module.initialize(); - } - module.invoke(query); - } - else { - if(instance !== undefined) { - instance.invoke('destroy'); - } - module.initialize(); - } - + module.initialize(); }) ; @@ -894,6 +949,7 @@ $.fn.form.settings = { verbose : true, performance : true, + fields : false, keyboardShortcuts : true, on : 'submit', @@ -924,8 +980,8 @@ $.fn.form.settings = { message : '.error.message', prompt : '.prompt.label', radio : 'input[type="radio"]', - reset : '.reset', - submit : '.submit', + reset : '.reset:not([type="reset"])', + submit : '.submit:not([type="submit"])', uiCheckbox : '.ui.checkbox', uiDropdown : '.ui.dropdown' }, @@ -938,7 +994,8 @@ $.fn.form.settings = { }, error: { - method : 'The method you called is not defined.' + oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.', + method : 'The method you called is not defined.' }, templates: { @@ -995,7 +1052,7 @@ $.fn.form.settings = { // is not empty or blank string empty: function(value) { - return !(value === undefined || '' === value); + return !(value === undefined || '' === value || $.isArray(value) && value.length == 0); }, // is valid integer @@ -1078,6 +1135,19 @@ $.fn.form.settings = { ; }, + maxCount: function(value, count) { + value = value.split(','); + return ($.isArray(value) && value.length <= count); + }, + exactCount: function(value, count) { + value = value.split(','); + return ($.isArray(value) && value.length == count); + }, + minCount: function(value, count) { + value = value.split(','); + return ($.isArray(value) && value.length >= count); + }, + // string length is less than max length maxLength: function(value, maxLength) { return (value !== undefined) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 76c95369b..a2116382f 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -443,6 +443,12 @@ .ui.form .field.error .ui.dropdown:hover .menu { border-color: @formErrorBorder; } +.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.error .ui.multiple.selection.dropdown > .label { + background-color: @dropdownErrorLabelBackground; + color: @dropdownErrorLabelColor; +} + /* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover { diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index b5f30d03c..1ed680b29 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -360,6 +360,13 @@ $.fn.dropdown = function(parameters) { }, mouseEvents: function() { module.verbose('Mouse detected binding mouse events'); + if(module.is.multiple()) { + $module + .on('click' + eventNamespace, module.event.click) + .on('click' + eventNamespace, selector.label, module.event.label.click) + .on('click' + eventNamespace, selector.remove, module.event.remove.click) + ; + } if( module.is.searchSelection() ) { $module .on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown) @@ -372,8 +379,6 @@ $.fn.dropdown = function(parameters) { if(module.is.multiple()) { $module .on('click' + eventNamespace, module.event.click) - .on('click' + eventNamespace, selector.label, module.event.label.click) - .on('click' + eventNamespace, selector.remove, module.event.remove.click) ; } } @@ -496,9 +501,7 @@ $.fn.dropdown = function(parameters) { focusSearch: function() { if( module.is.search() && !module.is.focusedOnSearch() ) { - $search - .focus() - ; + $search[0].focus(); } }, @@ -541,6 +544,7 @@ $.fn.dropdown = function(parameters) { pageLostFocus = (document.activeElement === this) ; if(!activated && !pageLostFocus) { + module.remove.activeLabel(); module.hide(); } }, @@ -610,7 +614,7 @@ $.fn.dropdown = function(parameters) { $activeLabels.removeClass(className.active); $label.addClass(className.active); } - settings.onLabelClick.apply(this, $labels.filter('.' + className.active)); + settings.onLabelSelect.apply(this, $labels.filter('.' + className.active)); } }, remove: { @@ -630,12 +634,12 @@ $.fn.dropdown = function(parameters) { }, test: { toggle: function(event) { - if( module.determine.eventInMenu(event, module.toggle) ) { + if( module.determine.eventOnElement(event, module.toggle) ) { event.preventDefault(); } }, touch: function(event) { - module.determine.eventInMenu(event, function() { + module.determine.eventOnElement(event, function() { if(event.type == 'touchstart') { module.timer = setTimeout(module.hide, settings.delay.touch); } @@ -696,15 +700,12 @@ $.fn.dropdown = function(parameters) { $subMenu = $choice.find(selector.menu), text = module.get.choiceText($choice), value = module.get.choiceValue($choice, text), - callback = function() { - module.remove.searchTerm(); - module.determine.selectAction(text, value); - }, hasSubMenu = ($subMenu.length > 0), isBubbledEvent = ($subMenu.find($target).length > 0) ; if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) { - callback(); + module.remove.searchTerm(); + module.determine.selectAction.call(this, text, value); } } }, @@ -728,6 +729,7 @@ $.fn.dropdown = function(parameters) { isFirstLabel = (labelIndex == 0), isLastLabel = (labelIndex + 1 == labelCount), isFocusedOnSearch = module.is.focusedOnSearch(), + isFocused = module.is.focused(), caretAtStart = (isFocusedOnSearch && module.get.caretPosition() == 0) ; if(isFocusedOnSearch && (pressedKey == keys.delimiter)) { @@ -739,7 +741,7 @@ $.fn.dropdown = function(parameters) { } else if(pressedKey == keys.leftArrow) { // activate previous label - if(caretAtStart && !hasActiveLabel) { + if((isFocused || caretAtStart) && !hasActiveLabel) { $label.last().addClass(className.active); } else if(hasActiveLabel && !isFirstLabel) { @@ -754,6 +756,10 @@ $.fn.dropdown = function(parameters) { } } else if(pressedKey == keys.rightArrow) { + // activate first label + if(isFocused && !hasActiveLabel) { + $label.last().addClass(className.active); + } // activate next label if(hasActiveLabel) { if(!event.shiftKey) { @@ -822,6 +828,7 @@ $.fn.dropdown = function(parameters) { else { module.verbose('Enter key pressed, choosing selected item'); module.event.item.click.call($selectedItem, event); + event.stopImmediatePropagation(); } } @@ -903,7 +910,6 @@ $.fn.dropdown = function(parameters) { ; module.set.scrollPosition($nextItem); } - event.preventDefault(); } @@ -925,11 +931,7 @@ $.fn.dropdown = function(parameters) { module.show(); } } - } - }, - resetStyle: function() { - $(this).removeAttr('style'); } }, @@ -938,11 +940,11 @@ $.fn.dropdown = function(parameters) { module.verbose('Determining action', settings.action); if( $.isFunction( module.action[settings.action] ) ) { module.verbose('Triggering preset action', settings.action, text, value); - module.action[ settings.action ](text, value); + module.action[ settings.action ].call(this, text, value); } else if( $.isFunction(settings.action) ) { module.verbose('Triggering user action', settings.action, text, value); - settings.action(text, value); + settings.action.call(this, text, value); } else { module.error(error.action, settings.action); @@ -963,12 +965,15 @@ $.fn.dropdown = function(parameters) { return false; } }, - eventInMenu: function(event, callback) { + eventOnElement: function(event, callback) { + var + $target = $(event.target) + ; callback = $.isFunction(callback) ? callback : function(){} ; - if( $(event.target).closest($menu).length === 0 ) { + if($target.is($module) || $target.is($icon) || $target.is($text)) { module.verbose('Triggering event', callback); callback(); return true; @@ -989,7 +994,7 @@ $.fn.dropdown = function(parameters) { ? value : text ; - module.set.selected(value); + module.set.selected(value, $(this)); module.hide(function() { module.remove.filteredItem(); }); @@ -1000,7 +1005,7 @@ $.fn.dropdown = function(parameters) { ? value : text ; - module.set.selected(value); + module.set.selected(value, $(this)); module.hide(function() { module.remove.filteredItem(); }); @@ -1011,7 +1016,7 @@ $.fn.dropdown = function(parameters) { ? value : text ; - module.set.selected(value); + module.set.selected(value, $(this)); module.hide(function() { module.remove.filteredItem(); }); @@ -1294,22 +1299,25 @@ $.fn.dropdown = function(parameters) { set: { filtered: function() { var - isMultiple = module.is.multiple(), - searchValue = $search.val(), - hasSearchValue = (typeof searchValue === 'string' && searchValue.length > 0), - searchWidth = (searchValue.length * settings.glyphWidth) + 'em', - valueIsSet = $input.val() != '' + isMultiple = module.is.multiple(), + isSearch = module.is.searchSelection(), + isSearchMultiple = (isMultiple && isSearch), + searchValue = (isSearch) + ? $search.val() + : '', + hasSearchValue = (typeof searchValue === 'string' && searchValue.length > 0), + searchWidth = (searchValue.length * settings.glyphWidth) + 'em', + valueIsSet = $input.val() != '' ; if(isMultiple && hasSearchValue) { module.verbose('Adjusting input width', searchWidth, settings.glyphWidth) $search.css('width', searchWidth); } - - if(hasSearchValue || (isMultiple && valueIsSet)) { + if(hasSearchValue || (isSearchMultiple && valueIsSet)) { module.verbose('Hiding placeholder text'); $text.addClass(className.filtered); } - else if(!isMultiple || (isMultiple && !valueIsSet)) { + else if(!isMultiple || (isSearchMultiple && !valueIsSet)) { module.verbose('Showing placeholder text'); $text.removeClass(className.filtered); } @@ -1414,10 +1422,11 @@ $.fn.dropdown = function(parameters) { currentValue = module.get.values() ; if($input.length > 0) { + if( module.is.multiple() ) { + // extend currently selected values value = [value]; - if($.isArray(currentValue)) { value = currentValue.concat(value); value = module.get.uniqueArray(value); @@ -1463,15 +1472,15 @@ $.fn.dropdown = function(parameters) { visible: function() { $module.addClass(className.visible); }, - selected: function(value) { + selected: function(value, $selectedItem) { var - $selectedItem = module.get.item(value), isMultiple = module.is.multiple(), - shouldAnimate = (isMultiple && $selectedItem.length == 1), selectedText, selectedValue ; - if($selectedItem && !$selectedItem.hasClass(className.active) ) { + $selectedItem = $selectedItem || module.get.item(value); + + if($selectedItem) { module.debug('Setting selected menu item to', $selectedItem); if(!module.is.multiple()) { module.remove.activeItem(); @@ -1482,14 +1491,14 @@ $.fn.dropdown = function(parameters) { .addClass(className.selected) .each(function() { var - $selected = $(this) + $selected = $(this), + shouldAnimate = (isMultiple && $selectedItem.length == 1) ; selectedText = module.get.choiceText($selected); selectedValue = module.get.choiceValue($selected, selectedText); if(isMultiple) { module.add.label(selectedValue, selectedText, shouldAnimate); module.set.value(selectedValue, selectedText, $selected); - module.set.filtered(); } else { module.set.value(selectedValue, selectedText, $selected); @@ -1507,7 +1516,10 @@ $.fn.dropdown = function(parameters) { $label = $('') .addClass(className.label) .attr('data-value', value) - .html(templates.label(value, text)) + .html(templates.label(value, text)), + $next = module.is.searchSelection() + ? $search + : $text ; if(settings.label.variation) { $label.addClass(settings.label.variation); @@ -1516,14 +1528,14 @@ $.fn.dropdown = function(parameters) { module.debug('Animating in label', $label); $label .addClass(className.hidden) - .insertBefore($search) + .insertBefore($next) .transition(settings.label.transition, settings.label.duration) ; } else { module.debug('Adding selection label', $label); $label - .insertBefore($search) + .insertBefore($next) ; } } @@ -1553,7 +1565,7 @@ $.fn.dropdown = function(parameters) { var $selectedItem = module.get.item(value), $option, - values = $input.val(), + values = $input.val(), selectedValue = module.get.choiceValue($selectedItem) ; if($selectedItem) { @@ -1565,13 +1577,17 @@ $.fn.dropdown = function(parameters) { } else { values = module.remove.delimitedValue(selectedValue, values); - $input.val(values); + $input + .val(values) + .trigger('change') + ; } if(module.is.multiple()) { module.remove.label(selectedValue); - module.set.filtered(); } $selectedItem + .removeClass(className.filtered) + .removeClass(className.selected) .removeClass(className.active) ; } @@ -1669,6 +1685,9 @@ $.fn.dropdown = function(parameters) { : $menu.transition && $menu.transition('is animating') ; }, + focused: function() { + return (document.activeElement === $module[0]); + }, focusedOnSearch: function() { return (document.activeElement === $search[0]); }, @@ -1767,6 +1786,9 @@ $.fn.dropdown = function(parameters) { module.verbose('Automatically determining animation based on animation direction', settings.transition); } if(settings.transition == 'none') { + console.log(settings.transition); + start(); + $currentMenu.transition('show'); callback.call(element); } else if($.fn.transition !== undefined && $module.transition('is supported')) { @@ -1820,6 +1842,8 @@ $.fn.dropdown = function(parameters) { } if(settings.transition == 'none') { + start(); + $currentMenu.transition('hide'); callback.call(element); } else if($.fn.transition !== undefined && $module.transition('is supported')) { @@ -2042,17 +2066,17 @@ $.fn.dropdown = function(parameters) { $.fn.dropdown.settings = { - debug : false, - verbose : true, - performance : true, + debug : false, + verbose : true, + performance : true, - on : 'click', - action : 'activate', + on : 'click', + action : 'activate', - allowTab : true, - fullTextSearch : false, - preserveHTML : true, - sortSelect : false, + allowTab : true, + fullTextSearch : false, + preserveHTML : true, + sortSelect : false, label: { transition : 'horizontal flip', @@ -2079,11 +2103,11 @@ $.fn.dropdown.settings = { duration : 250, /* Callbacks */ - onLabelClick : function($selectedLabels){}, - onNoResults : function(searchTerm){}, - onChange : function(value, text, $selected){}, - onShow : function(){}, - onHide : function(){}, + onLabelSelect : function($selectedLabels){}, + onNoResults : function(searchTerm){}, + onChange : function(value, text, $selected){}, + onShow : function(){}, + onHide : function(){}, /* Component */ diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 04a45e46b..68f9d7be3 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -612,29 +612,50 @@ select.ui.dropdown { margin: (@labelVerticalSpacing / 2) @labelHorizontalSpacing (@labelVerticalSpacing / 2) 0em; } -/* Prompt Text */ +/* Dropdown Icon */ +.ui.multiple.dropdown .dropdown.icon { + margin: 0em -@labelHorizontalPadding 0em 0em; + padding: @labelPadding; +} + +/* Text */ .ui.multiple.dropdown > .text { + position: static; + padding: 0; + max-width: 100%; + line-height: @searchSelectionLineHeight; + margin: @multipleSelectionInlineMargin; +} +.ui.multiple.dropdown > .label ~ .text { + display: none; +} + +/*----------------- + Multiple Search +-----------------*/ + +/* Prompt Text */ +.ui.multiple.search.dropdown > .text { + display: inline-block; position: absolute; top: 0; left: 0; padding: inherit; - margin: @multipleSelectionSearchMargin; + margin: @multipleSelectionInlineMargin; line-height: @searchSelectionLineHeight; } -/* Input */ -.ui.multiple.selection.dropdown > input.search { +.ui.multiple.search.dropdown > .label ~ .text { + display: none; +} + +/* Search */ +.ui.multiple.search.dropdown > input.search { position: static; padding: 0; max-width: 100%; - width: @multipleSelectionSearchWidth; - margin: @multipleSelectionSearchMargin; -} - -/* Dropdown Icon */ -.ui.multiple.selection.dropdown .dropdown.icon { - margin: 0em -@labelHorizontalPadding 0em 0em; - padding: @labelPadding; + width: @multipleSelectionSearchStartWidth; + margin: @multipleSelectionInlineMargin; } @@ -755,7 +776,6 @@ select.ui.dropdown { background: @errorBackgroundColor; border-color: @errorBorderColor; } - .ui.selection.dropdown.error:hover { border-color: @errorBorderColor; } @@ -764,10 +784,13 @@ select.ui.dropdown { .ui.dropdown.error > .menu .menu { border-color: @errorBorderColor; } - .ui.dropdown.error > .menu > .item { color: @errorItemTextColor; } +.ui.multiple.selection.error.dropdown > .label { + background: @errorBackgroundColor; + border-color: @errorBorderColor; +} /* Item Hover */ .ui.dropdown.error > .menu > .item:hover { diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 3d95e8d6d..0eed10440 100644 --- a/src/themes/default/collections/form.variables +++ b/src/themes/default/collections/form.variables @@ -99,7 +99,7 @@ @textAreaFocusBorderRadius: @inputFocusBorderRadius; /* Error */ -@formErrorColor: @negativeColor; +@formErrorColor: @negativeTextColor; @formErrorBorder: @negativeBorderColor; @formErrorBackground: @negativeBackgroundColor; @@ -110,10 +110,12 @@ /* Dropdown Error */ @dropdownErrorHoverBackground: #FBE7E7; @dropdownErrorActiveBackground: #FDCFCF; +@dropdownErrorLabelBackground: #EACBCB; +@dropdownErrorLabelColor: @errorTextColor; /* Focused Error */ @inputErrorFocusBackground: @negativeBackgroundColor; -@inputErrorFocusColor: @negativeColorHover; +@inputErrorFocusColor: @negativeTextColor; @inputErrorFocusBorder: @negativeBorderColor; @inputErrorFocusBoxShadow: none; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index c54cf0289..9e177475a 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -168,8 +168,8 @@ @selectionWidescreenMaxItems: 8; /* Derived */ -@selectedBorderEMWidth: 0.0714em; -@selectionItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth; +@selectedBorderEMWidth: 0.14285em; /* 2px / em size */ +@selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth; @selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems); @selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems); @selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems); @@ -224,8 +224,10 @@ @multipleSelectionBottomPadding: @multipleSelectionTopPadding; @multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding); -@multipleSelectionSearchMargin: 0.4em 0em 0.4em 0.5em; -@multipleSelectionSearchWidth: (@glyphWidth * 2); +@multipleSelectionInlineMargin: 0.4em 0em 0.4em 0.5em; +@multipleSelectionInlineLineHeight: @searchSelectionLineHeight; + +@multipleSelectionSearchStartWidth: (@glyphWidth * 2); /* Inline */ @inlineIconMargin: 0em 0.5em 0em 0.25em; @@ -262,7 +264,10 @@ @selectedColor: @selectedTextColor; /* Error */ -@errorItemTextColor: #D95C5C; +@errorLabelBackground: #EACBCB; +@errorLabelColor: @errorTextColor; + +@errorItemTextColor: @errorTextColor; @errorItemHoverBackground: #FFF2F2; @errorItemActiveBackground: #FDCFCF;