Form:
-A form is a collection of user input elements, and has no stylings of its own.
-Forms always include fields, and fields always contain form elements. Fields themselves may also include: ui inputs, standard form fields, ui labels, textareas, as well as: diff --git a/node/src/documents/modules/form.html b/node/src/documents/modules/form.html index 6a48b8d02..a3a82e7e4 100755 --- a/node/src/documents/modules/form.html +++ b/node/src/documents/modules/form.html @@ -29,7 +29,7 @@ type : 'UI Behavior'
Basic Validation
Form validation requires passing in a validation object with the rules required to validate your form.
- +
$('.ui.form')
.form({
diff --git a/node/src/files/components/semantic/collections/breadcrumb.css b/node/src/files/components/semantic/collections/breadcrumb.css
index b44b52d57..1209f7327 100644
--- a/node/src/files/components/semantic/collections/breadcrumb.css
+++ b/node/src/files/components/semantic/collections/breadcrumb.css
@@ -13,9 +13,16 @@
Breadcrumb
*******************************/
.ui.breadcrumb {
+ margin: 1em 0em;
display: inline-block;
vertical-align: middle;
}
+.ui.breadcrumb:first-child {
+ margin-top: 0em;
+}
+.ui.breadcrumb:last-child {
+ margin-bottom: 0em;
+}
.ui.breadcrumb .divider {
display: inline-block;
opacity: 0.5;
@@ -34,6 +41,5 @@
/* Loose Coupling */
.ui.breadcrumb.segment {
display: inline-block;
- background-color: #FFFFFF;
padding: 0.5em 1em;
}
diff --git a/node/src/files/components/semantic/collections/form.css b/node/src/files/components/semantic/collections/form.css
index d5da34fdd..3b2b69ba5 100644
--- a/node/src/files/components/semantic/collections/form.css
+++ b/node/src/files/components/semantic/collections/form.css
@@ -63,7 +63,7 @@
.ui.form input[type="password"] {
margin: 0em;
padding: 0.9em 1.2em;
- font-size: 0.825em;
+ font-size: 0.875em;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
outline: none;
diff --git a/node/src/files/components/semantic/collections/menu.css b/node/src/files/components/semantic/collections/menu.css
index 38b51ed16..500f279e7 100644
--- a/node/src/files/components/semantic/collections/menu.css
+++ b/node/src/files/components/semantic/collections/menu.css
@@ -488,6 +488,7 @@
Pagination
---------------*/
.ui.pagination.menu {
+ margin: 0em;
display: inline-block;
}
.ui.pagination.menu .item {
@@ -720,6 +721,12 @@
.ui.vertical.text.menu {
margin: 1rem 0em;
}
+.ui.vertical.text.menu:first-child {
+ margin-top: 0rem;
+}
+.ui.vertical.text.menu:last-child {
+ margin-bottom: 0rem;
+}
.ui.vertical.text.menu .item {
float: left;
clear: left;
@@ -1047,6 +1054,7 @@
--------------------*/
.ui.compact.menu {
display: inline-block;
+ margin: 0em;
vertical-align: middle;
}
.ui.vertical.compact.menu {
@@ -1057,6 +1065,7 @@
--------------------*/
.ui.menu.fluid,
.ui.vertical.menu.fluid {
+ display: block !important;
width: 100%;
}
/*-------------------
diff --git a/node/src/files/components/semantic/elements/button.css b/node/src/files/components/semantic/elements/button.css
index 8ce83cee8..d24c715ae 100644
--- a/node/src/files/components/semantic/elements/button.css
+++ b/node/src/files/components/semantic/elements/button.css
@@ -242,7 +242,7 @@
width: 100%;
height: 100%;
content: '';
- background: transparent url(../images/loader-tiny.gif) no-repeat 50% 50%;
+ background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
}
.ui.labeled.icon.button.loading .icon {
background-color: transparent;
diff --git a/node/src/files/components/semantic/elements/input.css b/node/src/files/components/semantic/elements/input.css
index 46b9d88d4..b6df45747 100644
--- a/node/src/files/components/semantic/elements/input.css
+++ b/node/src/files/components/semantic/elements/input.css
@@ -174,25 +174,21 @@
display: table-cell;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
+ border-right: none;
}
.ui.action.input .button {
display: table-cell;
opacity: 0.9;
margin: 0em 0em 0em -1px;
line-height: 1.26;
- padding-top: 0.9em !important;
- padding-bottom: 0.9em !important;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
- font-size: 0.85em;
+ font-size: 0.875em;
white-space: nowrap;
}
-.ui.action.input .labeled.icon.button .icon {
- padding-top: 0.9em !important;
-}
.ui.action.input input:focus ~ .button {
opacity: 1;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
diff --git a/node/src/files/components/semantic/elements/segment.css b/node/src/files/components/semantic/elements/segment.css
index 324d3b24f..fa0865c04 100644
--- a/node/src/files/components/semantic/elements/segment.css
+++ b/node/src/files/components/semantic/elements/segment.css
@@ -19,7 +19,7 @@
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
margin: 1em 0em;
- padding: 1.3em 1em;
+ padding: 1em;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
@@ -53,6 +53,12 @@
-moz-box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
+.ui.vertical.segment:first-child {
+ padding-top: 0em;
+}
+.ui.vertical.segment:last-child {
+ padding-bottom: 0em;
+}
.ui.horizontal.segment {
margin: 0em;
padding-top: 0em;
@@ -112,6 +118,12 @@
-moz-border-radius: 0px;
border-radius: 0px;
}
+.ui.basic.segment:first-child {
+ padding-top: 0em;
+}
+.ui.basic.segment:last-child {
+ padding-bottom: 0em;
+}
/*-------------------
Fittted
--------------------*/
diff --git a/node/src/files/components/semantic/modules/behavior/form.js b/node/src/files/components/semantic/modules/behavior/form.js
index 5d03f651a..1f4f43de4 100644
--- a/node/src/files/components/semantic/modules/behavior/form.js
+++ b/node/src/files/components/semantic/modules/behavior/form.js
@@ -129,7 +129,6 @@ $.fn.form = function(fields, parameters) {
$field = $(this),
$fieldGroup = $field.closest($group)
;
- console.log('here', settings.on);
if( $fieldGroup.hasClass(className.error) ) {
module.debug('Revalidating field', $field, module.get.validation($field));
module.validate.field( module.get.validation($field) );
@@ -255,6 +254,7 @@ $.fn.form = function(fields, parameters) {
}
});
if(allValid) {
+ module.debug('Form has no validation errors, submitting');
$module
.removeClass(className.error)
.addClass(className.success)
@@ -262,11 +262,12 @@ $.fn.form = function(fields, parameters) {
$.proxy(settings.onSuccess, this)(event);
}
else {
+ module.debug('Form has errors');
$module.addClass(className.error);
if(!settings.inlineError) {
module.add.errors(formErrors);
}
- $.proxy(settings.onFailure, this)(formErrors);
+ return $.proxy(settings.onFailure, this)(formErrors);
}
},
diff --git a/node/src/files/components/semantic/modules/dropdown.css b/node/src/files/components/semantic/modules/dropdown.css
index fadc8f954..6e60b168d 100644
--- a/node/src/files/components/semantic/modules/dropdown.css
+++ b/node/src/files/components/semantic/modules/dropdown.css
@@ -62,7 +62,7 @@
cursor: pointer;
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.05);
- font-size: 0.9em;
+ font-size: 0.875em;
display: block;
color: rgba(0, 0, 0, 0.75);
padding: 0.85em 1em !important;
@@ -121,7 +121,7 @@
.ui.simple.dropdown .menu {
display: block;
overflow: hidden;
- top: -9999px;
+ top: -9999px !important;
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.2s ease-out;
@@ -140,7 +140,7 @@
overflow: visible;
width: auto;
height: auto;
- top: 100%;
+ top: 100% !important;
opacity: 1;
}
.ui.simple.disabled.dropdown:hover .menu {
@@ -190,19 +190,18 @@
-webkit-border-radius: 0px 0px 0.325em 0.325em;
border-radius: 0px 0px 0.325em 0.325em;
}
-.ui.selection.dropdown.visible,
.ui.selection.dropdown:hover,
.ui.selection.dropdown.hover {
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+}
+.ui.selection.dropdown.visible {
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important;
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important;
border-radius: 0.3125em 0.3125em 0em 0em !important;
}
-.ui.selection.dropdown.visible .menu,
-.ui.selection.dropdown.hover .menu,
-.ui.selection.dropdown:hover .menu {
+.ui.selection.dropdown.visible .menu {
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
box-shadow: 0px 1px 0px 1px #D3D3D3;
diff --git a/node/src/files/components/semantic/modules/dropdown.js b/node/src/files/components/semantic/modules/dropdown.js
index de6ecbcdc..ae3896aba 100644
--- a/node/src/files/components/semantic/modules/dropdown.js
+++ b/node/src/files/components/semantic/modules/dropdown.js
@@ -296,8 +296,9 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.show == 'fade') {
$menu
+ .hide()
.clearQueue()
- .fadeIn(150)
+ .fadeIn(150, module.event.resetStyle)
;
}
else if(animation.show == 'slide') {
@@ -328,6 +329,7 @@ $.fn.dropdown = function(parameters) {
}
else if(animation.hide == 'fade') {
$menu
+ .show()
.clearQueue()
.fadeOut(150)
;
diff --git a/src/collections/form.less b/src/collections/form.less
index 7890bda38..1976d9935 100755
--- a/src/collections/form.less
+++ b/src/collections/form.less
@@ -79,7 +79,7 @@
margin: 0em;
padding: 0.9em 1.2em;
- font-size: 0.825em;
+ font-size: 0.875em;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
diff --git a/src/collections/menu.less b/src/collections/menu.less
index eafe05a00..f78136ec0 100755
--- a/src/collections/menu.less
+++ b/src/collections/menu.less
@@ -955,6 +955,12 @@
.ui.vertical.text.menu {
margin: 1rem 0em;
}
+.ui.vertical.text.menu:first-child {
+ margin-top: 0rem;
+}
+.ui.vertical.text.menu:last-child {
+ margin-bottom: 0rem;
+}
.ui.vertical.text.menu .item {
float: left;
clear: left;
@@ -1360,6 +1366,7 @@
.ui.menu.fluid,
.ui.vertical.menu.fluid {
+ display: block !important;
width: 100%;
}
diff --git a/src/elements/button.less b/src/elements/button.less
index 47a82e509..283c66c99 100755
--- a/src/elements/button.less
+++ b/src/elements/button.less
@@ -330,7 +330,7 @@
width: 100%;
height: 100%;
content: '';
- background: transparent url(../images/loader-tiny.gif) no-repeat 50% 50%;
+ background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
}
.ui.labeled.icon.button.loading .icon {
diff --git a/src/elements/input.less b/src/elements/input.less
index 50e5d49ba..e378c95a7 100755
--- a/src/elements/input.less
+++ b/src/elements/input.less
@@ -243,6 +243,7 @@
display: table-cell;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
+ border-right: none;
}
.ui.action.input .button {
display: table-cell;
@@ -251,8 +252,6 @@
margin: 0em 0em 0em -1px;
line-height: 1.26;
- padding-top: 0.9em !important;
- padding-bottom: 0.9em !important;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
@@ -261,12 +260,9 @@
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
- font-size: 0.85em;
+ font-size: 0.875em;
white-space: nowrap;
}
-.ui.action.input .labeled.icon.button .icon {
- padding-top: 0.9em !important;
-}
.ui.action.input input:focus ~ .button {
opacity: 1;
diff --git a/src/elements/segment.less b/src/elements/segment.less
index f4726e768..88a40a625 100755
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@@ -24,7 +24,7 @@
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
margin: 1em 0em;
- padding: 1.3em 1em;
+ padding: 1em;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
@@ -74,6 +74,12 @@
0px -1px 0px rgba(0, 0, 0, 0.1)
;
}
+.ui.vertical.segment:first-child {
+ padding-top: 0em;
+}
+.ui.vertical.segment:last-child {
+ padding-bottom: 0em;
+}
.ui.horizontal.segment {
margin: 0em;
@@ -156,6 +162,12 @@
-moz-border-radius: 0px;
border-radius: 0px;
}
+.ui.basic.segment:first-child {
+ padding-top: 0em;
+}
+.ui.basic.segment:last-child {
+ padding-bottom: 0em;
+}
/*-------------------
diff --git a/src/modules/behavior/form.js b/src/modules/behavior/form.js
index 5d03f651a..1f4f43de4 100755
--- a/src/modules/behavior/form.js
+++ b/src/modules/behavior/form.js
@@ -129,7 +129,6 @@ $.fn.form = function(fields, parameters) {
$field = $(this),
$fieldGroup = $field.closest($group)
;
- console.log('here', settings.on);
if( $fieldGroup.hasClass(className.error) ) {
module.debug('Revalidating field', $field, module.get.validation($field));
module.validate.field( module.get.validation($field) );
@@ -255,6 +254,7 @@ $.fn.form = function(fields, parameters) {
}
});
if(allValid) {
+ module.debug('Form has no validation errors, submitting');
$module
.removeClass(className.error)
.addClass(className.success)
@@ -262,11 +262,12 @@ $.fn.form = function(fields, parameters) {
$.proxy(settings.onSuccess, this)(event);
}
else {
+ module.debug('Form has errors');
$module.addClass(className.error);
if(!settings.inlineError) {
module.add.errors(formErrors);
}
- $.proxy(settings.onFailure, this)(formErrors);
+ return $.proxy(settings.onFailure, this)(formErrors);
}
},
diff --git a/src/modules/dropdown.less b/src/modules/dropdown.less
index fd1de4ab3..5c294512b 100755
--- a/src/modules/dropdown.less
+++ b/src/modules/dropdown.less
@@ -99,7 +99,7 @@
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.05);
- font-size: 0.9em;
+ font-size: 0.875em;
display: block;
color: rgba(0, 0, 0, 0.75);