Added class option for labels to appear above their field (#96)

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.

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,24 @@ $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;
+        &.labelShrunk{
+          transform: none;
+        }
+      }
+      select{
+        &.labelShrunk{
+          padding: 20px;
+        }
+      }
+    }
+  }
 }
 @-moz-document url-prefix() {
   .fw-form{

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

@@ -101,6 +101,24 @@ $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;
+        &.labelShrunk{
+          transform: none;
+        }
+      }
+      input{
+        padding: 20px;
+        &.labelShrunk{
+          padding: 20px;
+        }
+      }
+    }
   }
 }

sass/components/form/components/_text.scss

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

sass/components/form/components/_textarea.scss

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