IMPROVEMENT: field gutter variables

This commit is contained in:
Tony Air 2020-02-24 22:16:06 +07:00
parent 5136435b8f
commit 1fc7394550
3 changed files with 102 additions and 99 deletions

View File

@ -3,7 +3,7 @@ import $ from 'jquery';
//import 'bootstrap-select/dist/js/bootstrap-select'; //import 'bootstrap-select/dist/js/bootstrap-select';
//$.fn.selectpicker.Constructor.BootstrapVersion = '4'; //$.fn.selectpicker.Constructor.BootstrapVersion = '4';
import select2 from 'select2/dist/js/select2.js'; import select2 from 'select2/dist/js/select2.js';
import Inputmask from 'inputmask'; //import Inputmask from 'inputmask';
//import select2 from 'jquery.inputmask/dist/jquery.inputmask.bundle'; //import select2 from 'jquery.inputmask/dist/jquery.inputmask.bundle';
@ -11,7 +11,7 @@ import Events from '../_events';
import SpinnerUI from './_ui.spinner'; import SpinnerUI from './_ui.spinner';
import FormFieldUI from './_ui.form.fields'; import FormFieldUI from './_ui.form.fields';
const FormBasics = (($) => { const FormBasics = ($ => {
// Constants // Constants
const NAME = 'jsFormBasics'; const NAME = 'jsFormBasics';
const DATA_KEY = NAME; const DATA_KEY = NAME;
@ -59,7 +59,7 @@ const FormBasics = (($) => {
} }
}); });
$radioOptions.on('change', (e) => { $radioOptions.on('change', e => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
const $parent = $el.parents('.radio'); const $parent = $el.parents('.radio');
@ -76,7 +76,7 @@ const FormBasics = (($) => {
} }
}); });
$el.on('submit', (e) => { $el.on('submit', e => {
SpinnerUI.show(); SpinnerUI.show();
}); });

View File

@ -112,12 +112,12 @@ textarea,
} }
.btn-toolbar { .btn-toolbar {
margin-top: $grid-gutter-height / 2; margin-top: $field-gutter-height;
} }
.field { .field {
position: relative; position: relative;
margin: ($grid-gutter-height / 2) 0; margin: $field-gutter-height 0;
&.composite { &.composite {
margin-top: 0; margin-top: 0;
@ -173,8 +173,8 @@ textarea,
// element col paddings // element col paddings
.col-block { .col-block {
padding-top: $grid-gutter-height / 4; padding-top: $col-block-gutter-height;
padding-bottom: $grid-gutter-height / 4; padding-bottom: $col-block-gutter-height;
} }
// rewrite btn opacity on hover // rewrite btn opacity on hover

View File

@ -36,6 +36,9 @@ $grid-gutter-height: 2rem !default;
$grid-gutter-xs-width: $grid-gutter-width / 2 !default; $grid-gutter-xs-width: $grid-gutter-width / 2 !default;
$grid-gutter-element-height: $grid-gutter-height * 2 !default; $grid-gutter-element-height: $grid-gutter-height * 2 !default;
$field-gutter-height: $grid-gutter-height / 2 !default;
$col-block-gutter-height: $grid-gutter-height / 4 !default;
$footer-size: 18.5rem !default; $footer-size: 18.5rem !default;
$footer-bar-size: 2.5rem !default; $footer-bar-size: 2.5rem !default;