From 869115b2068f665352a8f44181a64cbef6ca21af Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 7 Mar 2014 15:15:49 -0500 Subject: [PATCH] UI Transiutions now forces display on element during animation with important to avoid inheritance issues. Rewrite of some more form variables --- server/documents/collections/form.html.eco | 20 +- server/documents/modules/dimmer.html.eco | 2 +- server/documents/modules/form.html.eco | 1002 +++++++++-------- server/files/javascript/validate-form.js | 24 +- src/definitions/collections/form.less | 264 ++--- src/definitions/modules/dropdown.less | 3 + src/definitions/modules/transition.js | 8 +- src/modules/modal.js | 729 ------------ .../default/collections/form.variables | 39 +- .../packages/default/globals/site.variables | 13 +- 10 files changed, 719 insertions(+), 1385 deletions(-) delete mode 100755 src/modules/modal.js diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index df5b7813a..31ec285dd 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -211,8 +211,8 @@ type : 'UI Collection'
-
-
Select
+
+
Select
@@ -259,7 +259,7 @@ type : 'UI Collection'
-
+
Select
@@ -299,16 +299,14 @@ type : 'UI Collection'
  • And also your last name
    • -
    +
    -
    Enter a first name
    -
    Enter a last name
    @@ -348,8 +346,8 @@ type : 'UI Collection'
    -
    -
    Select
    +
    +
    Select
    @@ -358,6 +356,12 @@ type : 'UI Collection'
    +
    +
    + + +
    +
    diff --git a/server/documents/modules/dimmer.html.eco b/server/documents/modules/dimmer.html.eco index 117202546..2e43efc4d 100755 --- a/server/documents/modules/dimmer.html.eco +++ b/server/documents/modules/dimmer.html.eco @@ -151,7 +151,7 @@ type : 'UI Module'
    -

    Puppy

    +

    Puppy

    Vote
    View
    diff --git a/server/documents/modules/form.html.eco b/server/documents/modules/form.html.eco index 02801d371..1355af16b 100755 --- a/server/documents/modules/form.html.eco +++ b/server/documents/modules/form.html.eco @@ -7,10 +7,11 @@ description : 'A form validation behavior checks user input data against a set o type : 'UI Behavior' --- + -<%- @partial('header') %> +<%- @partial('header', { tabs: { usage: 'Usage', examples: 'Examples', settings: 'Settings'} }) %>
    @@ -21,544 +22,559 @@ type : 'UI Behavior' Settings
    +
    -

    Usage

    +

    Usage

    -
    -

    Basic Validation

    -

    Form validation requires passing in a validation object with the rules required to validate your form.

    -
    - A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation -
    -
    - $('.ui.form') - .form({ - firstName: { - identifier : 'first-name', - rules: [ - { - type : 'empty', - prompt : 'Please enter your first name' - } - ] - }, - lastName: { - identifier : 'last-name', - rules: [ - { - type : 'empty', - prompt : 'Please enter your last name' - } - ] - }, - username: { - identifier : 'username', - rules: [ - { - type : 'empty', - prompt : 'Please enter a username' - } - ] - }, - password: { - identifier : 'password', - rules: [ - { - type : 'empty', - prompt : 'Please enter a password' - }, - { - type : 'length[6]', - prompt : 'Your password must be at least 6 characters' - } - ] - } - terms: { - identifier : 'terms', - rules: [ - { - type : 'checked', - prompt : 'You must agree to the terms and conditions' - } - ] - } - }) - ; -
    -
    -

    Let's go ahead and get you signed up.

    -
    +
    +

    Validation Definitions

    +

    Form validation requires passing in a validation object with the rules required to validate your form.

    +
    + A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or the data-validate metadata matching the identifier provided in the settings object. +
    +
    + $('.ui.form') + .form({ + name: { + identifier : 'name', + rules: [ + { + type : 'empty', + prompt : 'Please enter your name' + } + ] + }, + gender: { + identifier : 'gender', + rules: [ + { + type : 'empty', + prompt : 'Please select a gender' + } + ] + }, + username: { + identifier : 'username', + rules: [ + { + type : 'empty', + prompt : 'Please enter a username' + } + ] + }, + password: { + identifier : 'password', + rules: [ + { + type : 'empty', + prompt : 'Please enter a password' + }, + { + type : 'length[6]', + prompt : 'Your password must be at least 6 characters' + } + ] + } + terms: { + identifier : 'terms', + rules: [ + { + type : 'checked', + prompt : 'You must agree to the terms and conditions' + } + ] + } + }) + ; +
    +
    +

    Tell Us About Yourself

    +
    +
    + + +
    +
    + +
    + +
    Gender
    + +
    +
    Male
    +
    Female
    +
    +
    +
    +
    - - + +
    - - + +
    -
    -
    - - -
    -
    - - -
    -
    -
    - - +
    +
    + + +
    +
    Submit
    -
    Submit
    + +

    + Types of Validation Rules +
    Validation rules are a set of conditions required to validate a field
    +

    +
    Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
    +
    To pass parameters to a rule, use bracket notation in your settings object. For example type: 'not[dog]'
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameArgumentsDescription
    emptyvalueChecks whether a field is empty
    emailvalueChecks whether a field is a valid email address
    lengthvalueChecks whether a field is longer than a length
    notvalue, notValueChecks whether a field is not a value
    containsvalue, textChecks whether a field contains text
    isvalue, textChecks whether a field matches a value
    maxLengthvalueChecks whether a field is less than a max length
    matchvalue, fieldIdentifierChecks whether a field matches another field
    urlvalueChecks whether a field is a url
    checked-Checks whether a checkbox field is checked
    -
    -

    Validation with Message

    -

    Forms that contain a ui message error block will automatically be filled in with form validation information.

    -
    The template for error messages can be modified by adjusting settings.template.error
    +
    +
    +

    Displaying Error Messages

    +

    Forms that contain a ui message error block will automatically be filled in with form validation information.

    +
    The template for error messages can be modified by adjusting settings.template.error
    -
    -

    Let's go ahead and get you signed up.

    -
    +
    +

    Let's go ahead and get you signed up.

    +
    +
    + + +
    +
    + + +
    +
    - - + +
    - - + +
    -
    -
    - - -
    -
    - - -
    -
    -
    - - +
    +
    + + +
    +
    Submit
    +
    -
    Submit
    -
    -
    -
    -

    Custom Validation

    -

    Custom form validation requires passing in a validation object with the rules required to validate your form.

    -
    - $('.ui.form') - .form({ - dog: { - identifier: 'dog', - rules: [ - { - type: 'empty', - prompt: 'You must have a dog to add' - }, - { - type: 'contains[fluffy]', - prompt: 'I only want you to add fluffy dogs!' - }, - { - type: 'not[mean]', - prompt: 'Why would you add a mean dog to the list?' - } - ] - } - }) - ; -
    -
    -

    Let's go ahead and get you signed up.

    -
    - - -
    -
    Add Dog
    -
    -
    -
    -
    -

    Inline Validation and Validation Events

    -

    Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.

    -

    This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.

    -
    - $('.ui.dropdown') - .form(validationRules, { - inline : true, - on : 'blur' - }) - ; -
    -
    -

    Let's go ahead and get you signed up.

    -
    +
    +

    Validating on Blur and other Events

    +

    Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.

    +

    This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.

    +
    + $('.ui.dropdown') + .form(validationRules, { + inline : true, + on : 'blur' + }) + ; +
    +
    +

    Let's go ahead and get you signed up.

    +
    +
    + + +
    +
    + + +
    +
    - - + +
    - - + +
    +
    +
    + + +
    +
    +
    Submit
    -
    - - -
    -
    - - +
    + +
    +

    Creating Custom Validation

    +

    You can use multiple arbitrary rules to validate a form

    +
    + $('.ui.form') + .form({ + dog: { + identifier: 'dog', + rules: [ + { + type: 'empty', + prompt: 'You must have a dog to add' + }, + { + type: 'contains[fluffy]', + prompt: 'I only want you to add fluffy dogs!' + }, + { + type: 'not[mean]', + prompt: 'Why would you add a mean dog to the list?' + } + ] + } + }) + ;
    -
    -
    - - +
    +

    Let's go ahead and get you signed up.

    +
    + +
    +
    Add Dog
    +
    -
    Submit
    +
    -

    Behavior

    - - All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    submitSubmits selected form
    validate formValidates form and calls onSuccess or onFailure
    get change eventgets browser property change event
    get field(id)Returns element with matching name, id, or data-validate metadata to ID
    get validation(element)Returns validation rules for a given field
    has field(identifier)Returns whether a field exists
    add errors(errors)Adds errors to form, given an array errors
    - -

    Settings

    - -

    - Form Settings -
    Form settings modify the form validation behavior
    -

    - - - - - - - - - - - - - +
    +

    Behavior

    + + All the following behaviors can be called using the syntax $('.foo').form('behavior name', argumentOne, argumentTwo) + +
    SettingDefaultDescription
    keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
    - - - - - - - - - - - - - - - - - - - - - - - - - - - + - -
    on submitEvent used to trigger validation. Can be either submit, blur or change.
    revalidatetrueIf set to true will revalidate fields with errors on input change
    delaytrueDelay from last typed letter to validate a field when using on: change or when revalidating a field.
    inlinefalseAdds inline error on field validation error
    transition - scale - Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
    duration150Animation speed for inline promptSubmits selected form
    - -
    - -

    - Validation Rules -
    Validation rules are a set of conditions required to validate a field
    -

    -
    Validation rules are found in settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
    - - - - - - - - - - + + - - - + + - - - + + - - - + + - - - + + - - - + + - - - - - - - - - - - - - - - - - - - - - -
    NameArgumentsDescription
    emptyvalueChecks whether a field is emptyvalidate formValidates form and calls onSuccess or onFailure
    emailvalueChecks whether a field is a valid email addressget change eventgets browser property change event
    lengthvalueChecks whether a field is longer than a lengthget field(id)Returns element with matching name, id, or data-validate metadata to ID
    notvalue, notValueChecks whether a field is not a valueget validation(element)Returns validation rules for a given field
    containsvalue, textChecks whether a field contains texthas field(identifier)Returns whether a field exists
    isvalue, textChecks whether a field matches a valueadd errors(errors)Adds errors to form, given an array errors
    maxLengthvalueChecks whether a field is less than a max length
    matchvalue, fieldIdentifierChecks whether a field matches another field
    urlvalueChecks whether a field is a url
    checked-Checks whether a checkbox field is checked
    - -
    - -

    - Callbacks -
    Callbacks specify a function to occur after a specific behavior.
    -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SettingContextDescription
    onValidfieldCallback on each valid field
    onInvalidfieldCallback on each invalid field
    onSuccessformCallback if a form is all valid
    onFailureformCallback if any form field is invalid
    - -
    - -

    - Templates -
    Templates are used to construct elements
    -

    -
    Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
    - - - - - - - - - - - - - - - - - - -
    TemplateArgumentsDescription
    errorErrors (Array)Constructs the contents of an error message
    promptErrors (Array)Constructs an element to prompt the user to an invalid field
    - -
    - -

    - DOM Settings -
    DOM settings specify how this module should interface with the DOM
    -

    - - - - - - - - - - - - - - - - - - - -
    SettingDefaultDescription
    namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
    selector -
    - selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - input : 'input', - prompt : '.prompt', - submit : '.submit' - } -
    -     		Selectors used to match functionality to DOM
    metadata -
    +
    - metadata : { - validate: 'validate' - }, -
    - - - HTML5 metadata attributes - - - - className - -
    - className : { - active : 'active', - placeholder : 'default', - disabled : 'disabled', - visible : 'visible' - } -
    - - Class names used to attach style to state - - - - -
    - -

    - Debug Settings -
    Debug settings controls debug output to the console
    -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SettingDefaultDescription
    nameFormName used in debug logs
    debugTrueProvides standard debug output to console
    performanceTrueProvides standard debug output to console
    verboseTrueProvides ancillary debug output to console
    errors -
    - errors : { - method : 'The method you called is not defined.' - } -
    -
    +

    Settings

    + +

    + Form Settings +
    Form settings modify the form validation behavior
    +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SettingDefaultDescription
    keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
    onsubmitEvent used to trigger validation. Can be either submit, blur or change.
    revalidatetrueIf set to true will revalidate fields with errors on input change
    delaytrueDelay from last typed letter to validate a field when using on: change or when revalidating a field.
    inlinefalseAdds inline error on field validation error
    transition + scale + Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions
    duration150Animation speed for inline prompt
    + +
    + +

    + Callbacks +
    Callbacks specify a function to occur after a specific behavior.
    +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SettingContextDescription
    onValidfieldCallback on each valid field
    onInvalidfieldCallback on each invalid field
    onSuccessformCallback if a form is all valid
    onFailureformCallback if any form field is invalid
    + +
    + +

    + Templates +
    Templates are used to construct elements
    +

    +
    Templates are found in settings.template, to modify templates across all forms, modify $.fn.form.settings.templates to include your function. They must return html.
    + + + + + + + + + + + + + + + + + + +
    TemplateArgumentsDescription
    errorErrors (Array)Constructs the contents of an error message
    promptErrors (Array)Constructs an element to prompt the user to an invalid field
    + +
    + +

    + DOM Settings +
    DOM settings specify how this module should interface with the DOM
    +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SettingDefaultDescription
    namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
    selector +
    + selector : { + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' + } +
    +     		Selectors used to match functionality to DOM
    metadata +
    + + metadata : { + validate: 'validate' + }, +
    +     		+ HTML5 metadata attributes +
    className +
    + className : { + active : 'active', + placeholder : 'default', + disabled : 'disabled', + visible : 'visible' + } +
    +     		Class names used to attach style to state
    + +
    + +

    + Debug Settings +
    Debug settings controls debug output to the console
    +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SettingDefaultDescription
    nameFormName used in debug logs
    debugTrueProvides standard debug output to console
    performanceTrueProvides standard debug output to console
    verboseTrueProvides ancillary debug output to console
    errors +
    + errors : { + method : 'The method you called is not defined.' + } +
    +
    +
    diff --git a/server/files/javascript/validate-form.js b/server/files/javascript/validate-form.js index e1d2b23a3..b3218b963 100755 --- a/server/files/javascript/validate-form.js +++ b/server/files/javascript/validate-form.js @@ -8,7 +8,8 @@ semantic.validateForm.ready = function() { $dogForm = $('.dog.example .ui.form'), $inlineForm = $('.inline.example .ui.form'), $form = $('.ui.form').not($dogForm).not($inlineForm), - $checkbox = $('.ui.checkbox'), + $checkbox = $('.example .ui.checkbox'), + $dropdown = $('.example .ui.dropdown'), // alias handler ; @@ -20,6 +21,9 @@ semantic.validateForm.ready = function() { $checkbox .checkbox() ; + $dropdown + .dropdown() + ; $.fn.form.settings.defaults = { firstName: { @@ -31,6 +35,24 @@ semantic.validateForm.ready = function() { } ] }, + name: { + identifier : 'name', + rules: [ + { + type : 'empty', + prompt : 'Please enter you name' + } + ] + }, + gender: { + identifier : 'gender', + rules: [ + { + type : 'empty', + prompt : 'Please select a gender' + } + ] + }, lastName: { identifier : 'last-name', rules: [ diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 88dde8ca0..1fc903d15 100644 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -9,6 +9,15 @@ * */ +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'form'; + +@import '../../semantic.config'; + /******************************* Standard @@ -28,7 +37,7 @@ ---------------------*/ .ui.form > p { - margin: 1em 0; + margin: @paragraphMargin; } /*-------------------- @@ -37,7 +46,7 @@ .ui.form .field { clear: both; - margin: 0em 0em 1em; + margin: @fieldMargin; } /*-------------------- @@ -45,11 +54,11 @@ ---------------------*/ .ui.form .field > label { - margin: 0em 0em 0.3em; + margin: @labelMargin; display: block; - color: #111111; - font-size: 0.875em; + color: @labelColor; + font-size: @labelFontSize; } /*-------------------- @@ -77,82 +86,66 @@ .ui.form input[type="number"], .ui.form input[type="url"], .ui.form input[type="tel"] { - margin: 0em; - padding: 0.65em 1em; - font-size: 1em; + padding: @inputVerticalPadding @inputHorizontalPadding; + font-size: @inputFontSize; - background-color: #FFFFFF; - border: 1px solid rgba(0, 0, 0, 0.15); + background: @inputBackground; + border: @inputBorder; outline: none; - color: rgba(0, 0, 0, 0.7); - - -webkit-border-radius: 0.3125em; - -moz-border-radius: 0.3125em; border-radius: 0.3125em; - - -webkit-transition: - background-color 0.3s ease-out, - box-shadow 0.2s ease, - border-color 0.2s ease - ; - -moz-transition: - background-color 0.3s ease-out, - box-shadow 0.2s ease, - border-color 0.2s ease - ; - -o-transition: - background-color 0.3s ease-out, - box-shadow 0.2s ease, - border-color 0.2s ease - ; - -ms-transition: - background-color 0.3s ease-out, - box-shadow 0.2s ease, - border-color 0.2s ease - ; - transition: - background-color 0.3s ease-out, - box-shadow 0.2s ease, - border-color 0.2s ease - ; - - -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; - box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + box-shadow: @inputBoxShadow; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; + transition: @inputTransition; } .ui.textarea, .ui.form textarea { - line-height: 1.33; - min-height: 8em; - height: 12em; - max-height: 24em; - resize: vertical; + font-size: @textAreaFontSize; + + height: @textAreaHeight; + min-height: @textAreaMinHeight; + max-height: @textAreaMaxHeight; + line-height: @textAreaLineHeight; + resize: @textAreaResize; } .ui.form textarea, .ui.form input[type="checkbox"] { - vertical-align: top; + vertical-align: @checkboxVerticalAlign; } +/*-------------------- + Dropdown +---------------------*/ + +.ui.form .field > .selection.dropdown { + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +.ui.form .inline.field > .selection.dropdown { + width: auto; +} +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + + /*-------------------- Dividers ---------------------*/ .ui.form .divider { clear: both; - margin: 1em 0em; + margin: @dividerMargin; } @@ -179,11 +172,10 @@ white-space: nowrap; } .ui.form .inline.field .prompt { - margin-top: 0em; - margin-left: 1em; + margin: @validationMargin; } .ui.form .inline.field .prompt:before { - margin-top: -0.3em; + margin-top: @validationArrowOffset; bottom: auto; right: auto; top: 50%; @@ -196,6 +188,38 @@ *******************************/ +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form ::-moz-placeholder { + color: @inputPlaceholderColor; +} +.ui.form :focus::-webkit-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus::-moz-placeholder { + color: @inputPlaceholderFocusColor; +} + +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: @inputErrorPlaceholderColor; +} +.ui.form .error ::-moz-placeholder { + color: @inputErrorPlaceholderColor; +} +.ui.form .error :focus::-webkit-input-placeholder { + color: @inputErrorPlaceholderFocusColor; +} +.ui.form .error :focus::-moz-placeholder { + color: @inputErrorPlaceholderFocusColor; +} + /*-------------------- Focus ---------------------*/ @@ -208,16 +232,12 @@ .ui.form input[type="url"]:focus, .ui.form input[type="tel"]:focus, .ui.form textarea:focus{ - color: rgba(0, 0, 0, 0.85); - border-color: rgba(0, 0, 0, 0.2); - border-bottom-left-radius: 0; - border-top-left-radius: 0; - + color: @inputFocusColor; + border-color: @inputFocusBorderColor; + border-radius: @inputFocusBorderRadius; + background: @inputFocusBackground; + box-shadow: @inputFocusBoxShadow; -webkit-appearance: none; - - -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; - box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; } /*-------------------- @@ -243,13 +263,13 @@ .ui.form .field.error label, .ui.form .fields.error .field .input, .ui.form .field.error .input { - color: #D95C5C; + color: @formErrorColor; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label { - border-color: #D95C5C; - color: #FFFFFF; + border-color: @formErrorColor; + color: @white; } .ui.form .fields.error .field textarea, @@ -268,19 +288,11 @@ .ui.form .field.error input[type="number"], .ui.form .field.error input[type="url"], .ui.form .field.error input[type="tel"] { - background-color: #FFFAFA; - border-color: #E7BEBE; - border-left: none; - - color: #D95C5C; - padding-left: 1.2em; - - border-bottom-left-radius: 0; - border-top-left-radius: 0; - - -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; - -moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; - box-shadow: 0.3em 0em 0em 0em #D95C5C inset; + background: @formErrorBackground; + border-color: @formErrorBorder; + color: @formErrorColor; + border-radius: @inputErrorBorderRadius; + box-shadow: @inputErrorBoxShadow; } .ui.form .field.error textarea:focus, .ui.form .field.error input[type="text"]:focus, @@ -290,85 +302,61 @@ .ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="url"]:focus, .ui.form .field.error input[type="tel"]:focus{ - border-color: rgba(255, 80, 80, 1); - color: rgba(255, 80, 80, 1); + border-color: @formErrorFocusBorder; + color: @formErrorFocusColor; -webkit-appearance: none; - -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; - -moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; - box-shadow: 0.3em 0em 0em 0em #FF5050 inset; + box-shadow: @inputErrorFocusBoxShadow; } - -/*---------------------------- - Dropdown Selection Warning ------------------------------*/ +/*------------------ + Dropdown Error +--------------------*/ .ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown .item, .ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, .ui.form .field.error .ui.dropdown .item { - background-color: #FFFAFA; - color: #D95C5C; + background: @formErrorBackground; + color: @formErrorColor; } - .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown { - -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; - box-shadow: 0px 0px 0px 1px #E7BEBE !important; + box-shadow: 0px 0px 0px 1px @formErrorBorder !important; } - .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover { - -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important; - box-shadow: 0px 0px 0px 1px #E7BEBE !important; + box-shadow: 0px 0px 0px 1px @formErrorBorder !important; } - .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu { - -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE; - box-shadow: 0px 1px 0px 1px #E7BEBE; + box-shadow: 0px 1px 0px 1px @formErrorBorder; } - +/* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover { - background-color: #FFF2F2; + background-color: @dropdownErrorHoverBackground; } - +/* Active */ .ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .field.error .ui.dropdown .menu .active.item { - background-color: #FDCFCF !important; + background-color: @dropdownErrorActiveBackground !important; } /*-------------------- - Empty (Placeholder) + Checkbox Error ---------------------*/ - -/* browsers require these rules separate */ -.ui.form ::-webkit-input-placeholder { - color: #AAAAAA; -} -.ui.form ::-moz-placeholder { - color: #AAAAAA; -} -.ui.form :focus::-webkit-input-placeholder { - color: #999999; -} -.ui.form :focus::-moz-placeholder { - color: #999999; -} - -/* Error Placeholder */ -.ui.form .error ::-webkit-input-placeholder { - color: rgba(255, 80, 80, 0.4); +.ui.form .fields.error .field .checkbox label, +.ui.form .field.error .checkbox label, +.ui.form .fields.error .field .checkbox .box, +.ui.form .field.error .checkbox .box { + color: @formErrorColor; } -.ui.form .error ::-moz-placeholder { - color: rgba(255, 80, 80, 0.4); -} -.ui.form .error :focus::-webkit-input-placeholder { - color: rgba(255, 80, 80, 0.7); -} -.ui.form .error :focus::-moz-placeholder { - color: rgba(255, 80, 80, 0.7); +.ui.form .fields.error .field .checkbox label:before, +.ui.form .field.error .checkbox label:before, +.ui.form .fields.error .field .checkbox .box:before, +.ui.form .field.error .checkbox .box:before { + border-color: @formErrorBorder; } /*-------------------- @@ -403,7 +391,7 @@ width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%; + background: @formLoaderDimmerColor @formLoaderPath no-repeat @formLoaderPosition; visibility: visible; } @@ -419,9 +407,6 @@ .ui.form.fluid { width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; } @@ -514,9 +499,6 @@ .ui.form .fields > .field { clear: none; float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; } .ui.form .fields > .field:first-child { diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index ec579c444..33caae18e 100644 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -344,6 +344,9 @@ word-wrap: break-word; white-space: normal; + /* Matches selection dropdown height to input height */ + border-top: 1px solid transparent; + background-color: #FFFFFF; padding: 0.65em 1em; diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 13e145d39..7b1065632 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -224,14 +224,14 @@ $.fn.transition = function() { display: function() { var - displayType = module.get.displayType() + style = $module.css('style'), + displayType = module.get.displayType(), + overrideStyle = style + ';display: ' + displayType + ' !important;' ; if(displayType !== 'block') { module.verbose('Setting final visibility to', displayType); $module - .css({ - display: displayType - }) + .attr('style', overrideStyle) ; } }, diff --git a/src/modules/modal.js b/src/modules/modal.js deleted file mode 100755 index ef7575c44..000000000 --- a/src/modules/modal.js +++ /dev/null @@ -1,729 +0,0 @@ -/* - * # Semantic - Modal - * http://github.com/semantic-org/semantic-ui/ - * - * - * Copyright 2013 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -;(function ( $, window, document, undefined ) { - -$.fn.modal = function(parameters) { - var - $allModules = $(this), - $window = $(window), - $document = $(document), - $body = $('body'), - - time = new Date().getTime(), - performance = [], - - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), - - returnedValue - ; - - - $allModules - .each(function() { - var - settings = ( $.isPlainObject(parameters) ) - ? $.extend(true, {}, $.fn.modal.settings, parameters) - : $.extend({}, $.fn.modal.settings), - - selector = settings.selector, - className = settings.className, - namespace = settings.namespace, - error = settings.error, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', - - $module = $(this), - $context = $(settings.context), - $close = $module.find(selector.close), - - $allModals, - $otherModals, - $focusedElement, - $dimmable, - $dimmer, - - element = this, - instance = $module.data(moduleNamespace), - module - ; - - module = { - - initialize: function() { - module.verbose('Initializing dimmer', $context); - - if($.fn.dimmer === undefined) { - module.error(error.dimmer); - return; - } - $dimmable = $context - .dimmer({ - closable : false, - useCSS : true, - duration : { - show : settings.duration * 0.9, - hide : settings.duration * 1.1 - } - }) - ; - - if(settings.detachable) { - $dimmable.dimmer('add content', $module); - } - - $dimmer = $dimmable - .dimmer('get dimmer') - ; - - $otherModals = $module.siblings(selector.modal); - $allModals = $otherModals.add($module); - - module.verbose('Attaching close events', $close); - $close - .on('click' + eventNamespace, module.event.close) - ; - $window - .on('resize' + eventNamespace, module.event.resize) - ; - module.instantiate(); - }, - - instantiate: function() { - module.verbose('Storing instance of modal'); - instance = module; - $module - .data(moduleNamespace, instance) - ; - }, - - destroy: function() { - module.verbose('Destroying previous modal'); - $module - .removeData(moduleNamespace) - .off(eventNamespace) - ; - $close - .off(eventNamespace) - ; - $context - .dimmer('destroy') - ; - }, - - refresh: function() { - module.remove.scrolling(); - module.cacheSizes(); - module.set.screenHeight(); - module.set.type(); - module.set.position(); - }, - - attachEvents: function(selector, event) { - var - $toggle = $(selector) - ; - event = $.isFunction(module[event]) - ? module[event] - : module.toggle - ; - if($toggle.size() > 0) { - module.debug('Attaching modal events to element', selector, event); - $toggle - .off(eventNamespace) - .on('click' + eventNamespace, event) - ; - } - else { - module.error(error.notFound); - } - }, - - event: { - close: function() { - module.verbose('Closing element pressed'); - if( $(this).is(selector.approve) ) { - if($.proxy(settings.onApprove, element)() !== false) { - module.hide(); - } - else { - module.verbose('Approve callback returned false cancelling hide'); - } - } - else if( $(this).is(selector.deny) ) { - if($.proxy(settings.onDeny, element)() !== false) { - module.hide(); - } - else { - module.verbose('Deny callback returned false cancelling hide'); - } - } - else { - module.hide(); - } - }, - click: function(event) { - if( $(event.target).closest(selector.modal).size() === 0 ) { - module.debug('Dimmer clicked, hiding all modals'); - if(settings.allowMultiple) { - module.hide(); - } - else { - module.hideAll(); - } - event.stopImmediatePropagation(); - } - }, - debounce: function(method, delay) { - clearTimeout(module.timer); - module.timer = setTimeout(method, delay); - }, - keyboard: function(event) { - var - keyCode = event.which, - escapeKey = 27 - ; - if(keyCode == escapeKey) { - if(settings.closable) { - module.debug('Escape key pressed hiding modal'); - module.hide(); - } - else { - module.debug('Escape key pressed, but closable is set to false'); - } - event.preventDefault(); - } - }, - resize: function() { - if( $dimmable.dimmer('is active') ) { - requestAnimationFrame(module.refresh); - } - } - }, - - toggle: function() { - if( module.is.active() ) { - module.hide(); - } - else { - module.show(); - } - }, - - show: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - module.showDimmer(); - module.showModal(callback); - }, - - showModal: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - if( !module.is.active() ) { - module.cacheSizes(); - module.set.position(); - module.set.screenHeight(); - module.set.type(); - - if( $otherModals.filter(':visible').size() > 0 && !settings.allowMultiple) { - module.debug('Other modals visible, queueing show animation'); - module.hideOthers(module.showModal); - } - else { - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - module.debug('Showing modal with css animations'); - $module - .transition(settings.transition + ' in', settings.duration, function() { - module.set.active(); - callback(); - }) - ; - } - else { - module.debug('Showing modal with javascript'); - $module - .fadeIn(settings.duration, settings.easing, function() { - module.set.active(); - callback(); - }) - ; - } - $.proxy(settings.onShow, element)(); - } - } - else { - module.debug('Modal is already visible'); - } - }, - - showDimmer: function() { - if( !$dimmable.dimmer('is active') ) { - module.debug('Showing dimmer'); - $dimmable.dimmer('show'); - } - else { - module.debug('Dimmer already visible'); - } - }, - - hide: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - if($allModals.filter(':visible').size() <= 1) { - module.hideDimmer(); - } - module.hideModal(callback); - }, - - hideDimmer: function() { - if( !module.is.active() ) { - module.debug('Dimmer is not visible cannot hide'); - return; - } - module.debug('Hiding dimmer'); - if(settings.closable) { - $dimmer - .off('click' + eventNamespace) - ; - } - $dimmable.dimmer('hide', function() { - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - $module - .transition('reset') - ; - module.remove.screenHeight(); - } - module.remove.active(); - }); - }, - - hideModal: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - if( !module.is.active() ) { - module.debug('Cannot hide modal it is not active'); - return; - } - module.debug('Hiding modal'); - module.remove.keyboardShortcuts(); - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - $module - .transition(settings.transition + ' out', settings.duration, function() { - module.remove.active(); - module.restore.focus(); - callback(); - }) - ; - } - else { - $module - .fadeOut(settings.duration, settings.easing, function() { - module.remove.active(); - module.restore.focus(); - callback(); - }) - ; - } - $.proxy(settings.onHide, element)(); - }, - - hideAll: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - if( $allModals.is(':visible') ) { - module.debug('Hiding all visible modals'); - module.hideDimmer(); - $allModals - .filter(':visible') - .modal('hide modal', callback) - ; - } - }, - - hideOthers: function(callback) { - callback = $.isFunction(callback) - ? callback - : function(){} - ; - if( $otherModals.is(':visible') ) { - module.debug('Hiding other modals'); - $otherModals - .filter(':visible') - .modal('hide modal', callback) - ; - } - }, - - add: { - keyboardShortcuts: function() { - module.verbose('Adding keyboard shortcuts'); - $document - .on('keyup' + eventNamespace, module.event.keyboard) - ; - } - }, - - save: { - focus: function() { - $focusedElement = $(document.activeElement).blur(); - } - }, - - restore: { - focus: function() { - if($focusedElement && $focusedElement.size() > 0) { - $focusedElement.focus(); - } - } - }, - - remove: { - active: function() { - $module.removeClass(className.active); - }, - screenHeight: function() { - if(module.cache.height > module.cache.pageHeight) { - module.debug('Removing page height'); - $body - .css('height', '') - ; - } - }, - keyboardShortcuts: function() { - module.verbose('Removing keyboard shortcuts'); - $document - .off('keyup' + eventNamespace) - ; - }, - scrolling: function() { - $dimmable.removeClass(className.scrolling); - $module.removeClass(className.scrolling); - } - }, - - cacheSizes: function() { - module.cache = { - pageHeight : $body.outerHeight(), - height : $module.outerHeight() + settings.offset, - contextHeight : (settings.context == 'body') - ? $(window).height() - : $dimmable.height() - }; - module.debug('Caching modal and container sizes', module.cache); - }, - - can: { - fit: function() { - return (module.cache.height < module.cache.contextHeight); - } - }, - - is: { - active: function() { - return $module.hasClass(className.active); - }, - modernBrowser: function() { - // appName for IE11 reports 'Netscape' can no longer use - return !(window.ActiveXObject || "ActiveXObject" in window); - } - }, - - set: { - screenHeight: function() { - if(module.cache.height > module.cache.pageHeight) { - module.debug('Modal is taller than page content, resizing page height'); - $body - .css('height', module.cache.height + settings.padding) - ; - } - }, - active: function() { - module.add.keyboardShortcuts(); - module.save.focus(); - $module - .addClass(className.active) - ; - if(settings.closable) { - $dimmer - .off('click' + eventNamespace) - .on('click' + eventNamespace, module.event.click) - ; - } - }, - scrolling: function() { - $dimmable.addClass(className.scrolling); - $module.addClass(className.scrolling); - }, - type: function() { - if(module.can.fit()) { - module.verbose('Modal fits on screen'); - module.remove.scrolling(); - } - else { - module.verbose('Modal cannot fit on screen setting to scrolling'); - module.set.scrolling(); - } - }, - position: function() { - module.verbose('Centering modal on page', module.cache); - if(module.can.fit()) { - $module - .css({ - top: '', - marginTop: -(module.cache.height / 2) - }) - ; - } - else { - $module - .css({ - marginTop : '1em', - top : $document.scrollTop() - }) - ; - } - } - }, - - setting: function(name, value) { - if( $.isPlainObject(name) ) { - $.extend(true, settings, name); - } - else if(value !== undefined) { - settings[name] = value; - } - else { - return settings[name]; - } - }, - internal: function(name, value) { - if( $.isPlainObject(name) ) { - $.extend(true, module, name); - } - else if(value !== undefined) { - module[name] = value; - } - else { - return module[name]; - } - }, - debug: function() { - if(settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.debug.apply(console, arguments); - } - } - }, - verbose: function() { - if(settings.verbose && settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.verbose.apply(console, arguments); - } - } - }, - error: function() { - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); - module.error.apply(console, arguments); - }, - performance: { - log: function(message) { - var - currentTime, - executionTime, - previousTime - ; - if(settings.performance) { - currentTime = new Date().getTime(); - previousTime = time || currentTime; - executionTime = currentTime - previousTime; - time = currentTime; - performance.push({ - 'Element' : element, - 'Name' : message[0], - 'Arguments' : [].slice.call(message, 1) || '', - 'Execution Time' : executionTime - }); - } - clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); - }, - display: function() { - var - title = settings.name + ':', - totalTime = 0 - ; - time = false; - clearTimeout(module.performance.timer); - $.each(performance, function(index, data) { - totalTime += data['Execution Time']; - }); - title += ' ' + totalTime + 'ms'; - if(moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } - if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { - console.groupCollapsed(title); - if(console.table) { - console.table(performance); - } - else { - $.each(performance, function(index, data) { - console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); - }); - } - console.groupEnd(); - } - performance = []; - } - }, - invoke: function(query, passedArguments, context) { - var - object = instance, - maxDepth, - found, - response - ; - passedArguments = passedArguments || queryArguments; - context = element || context; - if(typeof query == 'string' && object !== undefined) { - query = query.split(/[\. ]/); - maxDepth = query.length - 1; - $.each(query, function(depth, value) { - var camelCaseValue = (depth != maxDepth) - ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) - : query - ; - if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { - object = object[camelCaseValue]; - } - else if( object[camelCaseValue] !== undefined ) { - found = object[camelCaseValue]; - return false; - } - else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { - object = object[value]; - } - else if( object[value] !== undefined ) { - found = object[value]; - return false; - } - else { - return false; - } - }); - } - if ( $.isFunction( found ) ) { - response = found.apply(context, passedArguments); - } - else if(found !== undefined) { - response = found; - } - if($.isArray(returnedValue)) { - returnedValue.push(response); - } - else if(returnedValue !== undefined) { - returnedValue = [returnedValue, response]; - } - else if(response !== undefined) { - returnedValue = response; - } - return found; - } - }; - - if(methodInvoked) { - if(instance === undefined) { - module.initialize(); - } - module.invoke(query); - } - else { - if(instance !== undefined) { - module.destroy(); - } - module.initialize(); - } - }) - ; - - return (returnedValue !== undefined) - ? returnedValue - : this - ; -}; - -$.fn.modal.settings = { - - name : 'Modal', - namespace : 'modal', - - debug : true, - verbose : true, - performance : true, - - allowMultiple : true, - detachable : true, - closable : true, - context : 'body', - - duration : 500, - easing : 'easeOutExpo', - offset : 0, - transition : 'scale', - - padding : 30, - - onShow : function(){}, - onHide : function(){}, - onApprove : function(){ return true; }, - onDeny : function(){ return true; }, - - selector : { - close : '.close, .actions .button', - approve : '.actions .positive, .actions .approve, .actions .ok', - deny : '.actions .negative, .actions .deny, .actions .cancel', - modal : '.ui.modal' - }, - error : { - dimmer : 'UI Dimmer, a required component is not included in this page', - method : 'The method you called is not defined.' - }, - className : { - active : 'active', - scrolling : 'scrolling' - } -}; - - -})( jQuery, window , document ); \ No newline at end of file diff --git a/src/themes/packages/default/collections/form.variables b/src/themes/packages/default/collections/form.variables index 024892806..ec90ec633 100644 --- a/src/themes/packages/default/collections/form.variables +++ b/src/themes/packages/default/collections/form.variables @@ -34,11 +34,12 @@ @inputBorderRadius: 0.3125em; @inputColor: @textColor; @inputTransition: - background-color 0.3s ease-out, + background-color 0.2s ease, + color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease ; -@inputBoxShadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; +@inputBoxShadow: 0em 0em 0em 0em transparent inset; @textAreaFontSize: @inputFontSize; @textAreaHeight: 12em; @@ -63,16 +64,42 @@ --------------------*/ /* Focus */ +@inputFocusPointerSize: 0.3em; +/* Input Focus */ @inputFocusBackground: #FFFFFF; @inputFocusBorderColor: @selectedBorderColor; @inputFocusColor: rgba(0, 0, 0, 0.85); -@inputFocusBoxShadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; +@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset; @inputFocusBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em; /* Error */ - - - +@formErrorColor: @negativeColor; +@formErrorBorder: @negativeBorderColor; +@formErrorBackground: @negativeBackgroundColor; +/* Input Error */ +@inputErrorBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em; +@inputErrorBoxShadow: @inputFocusPointerSize 0em 0em 0em @formErrorColor inset; +/* Dropdown Error */ +@dropdownErrorHoverBackground: #FFF2F2; +@dropdownErrorActiveBackground: #FDCFCF; + +/* Focused Error */ +@formErrorFocusColor: @negativeColorHover; +@formErrorFocusBorder: @negativeBorderColor; +@formErrorFocusBackground: @negativeBackgroundColor; +/* Input Focused Error */ +@inputErrorFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @negativeColorHover inset; + +/* Placeholder */ +@inputPlaceholderColor: lighten(@inputColor, 70); +@inputPlaceholderFocusColor: lighten(@inputColor, 55); +@inputErrorPlaceholderColor: lighten(@formErrorColor, 10); +@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5); + +/* Loading */ +@formLoaderDimmerColor: rgba(255, 255, 255, 0.8); +@formLoaderPath: "@{imagePath}/loader-large.gif"; +@formLoaderPosition: 50% 1em; /*------------------- Types diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index 6bac52f4b..bf20d9e1f 100644 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -85,8 +85,6 @@ @tertiaryColor : @orange; /*--- Emotive ---*/ -@positiveColor : @green; -@negativeColor : @red; @infoColor : #E6F4F9; @warningColor : #96904D; @@ -105,6 +103,17 @@ @offWhite : #FAFAFA; @darkWhite : #F0F0F0; +/*------------------- + Emotive +--------------------*/ +@positiveColor : @green; +@positiveBorderColor : #FFFAFA; +@positiveBackgroundColor : #E7BEBE; + +@negativeColor : @red; +@negativeBorderColor : lighten(@red, 25); +@negativeBackgroundColor : lighten(@red, 38); + /*------------------- Text Colors --------------------*/