Merge branch 'f-style-form-elements' into 'dev'

ENH: Introduce css classes for required form fields

See merge request !65

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   with the full version history of the first entity on the page.
 * `BUILD_MODULE_SHOW_ID_IN_LABEL` build variable with which the showing of
   entity ids together with their names if it is enabled (disabled by default).
+* Introduced `caosdb-f-form-required-marker` and `caosdb-f-form-required-label`
+  css classes for the markers of required fields in CaosDB form elements.
 
 ### Changed (for changes in existing functionality)
 

src/core/css/webcaosdb.css

@@ -779,3 +779,15 @@ details p {
     font-size: 0.875rem;
     color: #5E6762;
 }
+
+.caosdb-f-form-wrapper .caosdb-f-form-required-marker {
+    font-size: 10px;
+    color: red;
+    margin-right: 4px;
+    font-weight: 100;
+}
+
+.caosdb-f-form-elements-footer .caosdb-f-form-required-label {
+    margin-right: 4px;
+    font-size: 11px;
+}

src/core/js/form_elements.js

@@ -1232,7 +1232,7 @@ var form_elements = new function () {
             .css({
                 "margin": "20px",
             }).append(this.make_required_marker())
-            .append('<span style="margin-right: 4px; font-size: 11px">required field</span>')[0];
+            .append('<span class="caosdb-f-form-required-label">required field</span>')[0];
     }
 
     this.make_error_message = function (message) {
@@ -1502,14 +1502,7 @@ var form_elements = new function () {
      * @returns {HTMLElement} span element.
      */
     this.make_required_marker = function () {
-        // TODO create class and move to css file
-        return $('<span>*</span>')
-            .css({
-                "font-size": "10px",
-                "color": "red",
-                "margin-right": "4px",
-                "font-weight": "100",
-            })[0];
+        return $('<span class="caosdb-f-form-required-marker">*</span>')[0];
     }