diff --git a/src/js/_components/_ui.form.fields.toggle.js b/src/js/_components/_ui.form.fields.toggle.js index 93a4cbc..5c74c52 100755 --- a/src/js/_components/_ui.form.fields.toggle.js +++ b/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); diff --git a/src/scss/_components/_ui.form.basics.scss b/src/scss/_components/_ui.form.basics.scss index 5d48f38..5006ebf 100755 --- a/src/scss/_components/_ui.form.basics.scss +++ b/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%; + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4ca3cee..7f930c3 100755 --- a/src/scss/_variables.scss +++ b/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;