Release/2.2.0

docs/en/form.md

@@ -100,3 +100,6 @@ $component-form-text-with-button-properties: (
 ## Form Process Animation
 When a form is submitted all fields are disabled including the submit button. An animated icon is added next to the submit button as well.
 You must opt-in for this to take effect, the form element must contain the following class: `fw-form-process-event` as well as the `fw-form` class.
+
+## Label placements
+By default, labels are placed inside the input box. To change this, simply add the `fw-form-label-above` class alongside the `fw-form` class. This adjustment moves labels above the fields, eliminating any animation when a field gains or loses focus.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "werkbot-framewerk",
-  "version": "2.1.17",
+  "version": "2.2.0",
   "description": "A framework of css and javascript that Werkbot uses as a foundation to build our websites.",
   "main": "js/form.js",
   "directories": {

sass/components/form/_form.scss

@@ -10,7 +10,8 @@ $default-component-form-properties:(
   validationSuccessTextColor: #000000,
   validationSuccessBackgroundColor: #00cc00,
   validationWarningTextColor: #000000,
-  validationWarningBackgroundColor: #ffcc00
+  validationWarningBackgroundColor: #ffcc00,
+  labelAboveMargin: 0,
 );
 // If $component-form-checkbox-properties is set, lets merge into our defaults
 $component-form-properties: $default-component-form-properties !default;

sass/components/form/components/_numeric.scss

@@ -93,4 +93,13 @@ $component-form-numeric-properties: $default-component-form-numeric-properties !
       }
     }
   }
+
+  // Label above field
+  &.fw-form-label-above{
+    .field.numeric{
+      input, input[type='number']{
+        padding: 9px 50px;
+      }
+    }
+  }
 }

sass/components/form/components/_select.scss

@@ -73,6 +73,25 @@ $component-form-select-properties: $default-component-form-select-properties !de
       pointer-events: none;
     }
   }
+
+  // Label above field
+  &.fw-form-label-above{
+    .field.dropdown{
+      label{
+        position: relative;
+        transform: none;
+        margin: getThemeProperty(labelAboveMargin, $component-form-properties);
+        &.labelShrunk{
+          transform: none;
+        }
+      }
+      select{
+        &.labelShrunk{
+          padding: 20px;
+        }
+      }
+    }
+  }
 }
 @-moz-document url-prefix() {
   .fw-form{

sass/components/form/components/_text-with-button.scss

@@ -101,6 +101,25 @@ $component-form-text-with-button-properties: $default-component-form-text-with-b
         border-radius: getThemeProperty(buttonBorderRadius, $component-form-text-with-button-properties);
       }
     }
+  }
 
+  // Label above field
+  &.fw-form-label-above{
+    .field.text-with-button{
+      label{
+        position: relative;
+        transform: none;
+        margin: getThemeProperty(labelAboveMargin, $component-form-properties);
+        &.labelShrunk{
+          transform: none;
+        }
+      }
+      input{
+        padding: 20px;
+        &.labelShrunk{
+          padding: 20px;
+        }
+      }
+    }
   }
 }

sass/components/form/components/_text.scss

@@ -51,4 +51,24 @@ $component-form-text-properties: $default-component-form-text-properties !defaul
       }
     }
   }
+
+  // Label above field
+  &.fw-form-label-above{
+    .field.text{
+      label{
+        position: relative;
+        transform: none;
+        margin: getThemeProperty(labelAboveMargin, $component-form-properties);
+        &.labelShrunk{
+          transform: none;
+        }
+      }
+      input{
+        padding: 20px;
+        &.labelShrunk{
+          padding: 20px;
+        }
+      }
+    }
+  }
 }

sass/components/form/components/_textarea.scss

@@ -51,4 +51,24 @@ $component-form-textarea-properties: $default-component-form-textarea-properties
       }
     }
   }
+
+  // Label above field
+  &.fw-form-label-above{
+    .field.textarea{
+      label{
+        position: relative;
+        transform: none;
+        margin: getThemeProperty(labelAboveMargin, $component-form-properties);
+        &.labelShrunk{
+          transform: none;
+        }
+      }
+      textarea{
+        padding: 20px;
+        &.labelShrunk{
+          padding: 20px;
+        }
+      }
+    }
+  }
 }