Minor improvements

src/js/_components/_ui.form.fields.toggle.js

@@ -13,12 +13,12 @@ const FormToggleUI = (($) => {
 
     constructor($el) {
       const ui = this;
-      const condition = $el.data('value-toggle');
-      if (!condition) {
+      ui.$el = $el;
+
+      if (!ui.getCondition()) {
         return;
       }
 
-      ui.$el = $el;
       ui.$el.data(DATA_KEY, ui);
 
       ui.toggle();
@@ -32,20 +32,62 @@ const FormToggleUI = (($) => {
       return ui;
     }
 
+    getDataEl() {
+      const ui = this;
+      const $el = ui.$el;
+
+      return ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
+        $el.parents('.optionset') : $el;
+    }
+
+    getCondition() {
+      const ui = this;
+
+      return ui.getDataEl().data('value-toggle');
+    }
+
+    getCurrentVal() {
+      const ui = this;
+      const $el = ui.$el;
+
+      return ($el.attr('type') === 'checkbox') ?
+        ($el.is(':checked') ? true : false) :
+        ($el.attr('type') === 'radio' ? $Html.find(`[name="${  $el.attr('name')  }"]:checked`).val() : $el.val());
+    }
+
+    getTrueTarget() {
+      const ui = this;
+      const $dataEl = ui.getDataEl();
+
+      let target = $dataEl.data('value-toggle-yes');
+      if (!target || !target.length) {
+        let target = $dataEl.data('target');
+      }
+
+      return ui.getElement(target);
+    }
+
+    getFalseTarget() {
+      const ui = this;
+      const target = ui.getDataEl().data('value-toggle-no');
+
+      return ui.getElement(target);
+    }
+
+    getElement(target) {
+      return target && target.length && $(target).length ?
+        $(target) : false;
+    }
+
     toggle() {
       const ui = this;
       const $el = ui.$el;
 
-      const val = ($el.attr('type') === 'checkbox') ?
-        ($el.is(':checked') ? true : false) :
-        ($el.attr('type') === 'radio' ? $Html.find(`[name="${  $el.attr('name')  }"]:checked`).val() : $el.val());
-
-      const $dataEl = ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
-        $el.parents('.optionset') : $el;
+      const val = ui.getCurrentVal();
+      const $dataEl = ui.getDataEl();
 
       // coditional toggler
-      const target = $el.data('target');
-      const condition = $el.data('value-toggle');
+      const condition = ui.getCondition();
       if (!condition) {
         return;
       }
@@ -56,8 +98,8 @@ const FormToggleUI = (($) => {
         condition === val
       ) ? true : false;
 
-      const $yesTarget = $($dataEl.data('value-toggle-yes'));
-      const $noTarget = $($dataEl.data('value-toggle-no'));
+      const $yesTarget = ui.getTrueTarget();
+      const $noTarget = ui.getFalseTarget();
 
       if (!$el.data(FieldUI).shown || typeof val === 'undefined') {
         ui.toggleElement($yesTarget, false);

src/scss/_components/_ui.form.basics.scss

@@ -37,3 +37,19 @@ input.time {
         border: 1px solid #ced4da;
     }
 }
+
+.form-inline {
+    margin-top: -1rem;
+
+    fieldset {
+        margin-top: 1rem;
+    }
+
+    .field {
+        display: flex;
+    }
+
+    .form-control {
+        width: 100%;
+    }
+}

src/scss/_variables.scss

@@ -5,6 +5,16 @@ $container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px
 
 $font-family-base: "Lato", sans-serif !default;
 
+$font-size-base: 1rem !default;
+
+// start font-sizing from h2
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $h1-font-size !default;
+$h3-font-size: $font-size-base * 2 !default;
+$h4-font-size: $font-size-base * 1.75 !default;
+$h5-font-size: $font-size-base * 1.5 !default;
+$h6-font-size: $font-size-base * 1.25 !default;
+
 $grid-gutter-width: 2rem !default;
 $grid-gutter-height: 2rem !default;
 $grid-gutter-xs-width: $grid-gutter-width / 2 !default;