richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add multiple validation rules to form validation, convert form validation to using one settings object, add errored styles to multiple form validation

pull/2053/head
jlukic 9 years ago
parent
90f5c0d8d3
commit
8bc627461c
6 changed files with 271 additions and 141 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 188
      src/definitions/behaviors/form.js
  2. 6
      src/definitions/collections/form.less
  3. 146
      src/definitions/modules/dropdown.js
  4. 51
      src/definitions/modules/dropdown.less
  5. 6
      src/themes/default/collections/form.variables
  6. 15
      src/themes/default/modules/dropdown.variables

188
src/definitions/behaviors/form.js
View File

@ -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)

6
src/definitions/collections/form.less
View File

@ -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 {

146
src/definitions/modules/dropdown.js
View File

@ -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 = $('<a />')
.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 */

51
src/definitions/modules/dropdown.less
View File

@ -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 {

6
src/themes/default/collections/form.variables
View File

@ -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;

15
src/themes/default/modules/dropdown.variables
View File

@ -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;

Write Preview
Loading…
Cancel
Save