diff --git a/assets/toolkit/toolkit.css b/assets/toolkit/toolkit.css index ed4b22c..a778f78 100644 --- a/assets/toolkit/toolkit.css +++ b/assets/toolkit/toolkit.css @@ -73,7 +73,7 @@ input[type="color"] ~ .kit-field__color { padding: 1.5em 0 0 0; margin: 0 0 var(--kit-field-gap, 1.5em) 0; } -.kit-field .kit-field__hr { +.kit-field__hr { display: block; position: absolute; bottom: 0; @@ -82,7 +82,7 @@ input[type="color"] ~ .kit-field__color { border-top: 1px solid var(--kit-color-text); z-index: 0; } -.kit-field .kit-field__hr:after { +.kit-field__hr:after { content: ''; position: absolute; bottom: 0; @@ -164,6 +164,7 @@ input[type="color"] ~ .kit-field__color { font-family: var(--kit-font-family); list-style-type: none; } + .kit-field textarea[data-dirty='true'], .kit-field input[data-dirty='true'], .kit-field [data-dirty='true'] ~ .kit-field__display{ @@ -218,6 +219,7 @@ input[type="color"] ~ .kit-field__color { .kit-field textarea.focus, .kit-field input.focus { color: var(--kit-color-text); + border-color: transparent; } .kit-field textarea:focus ~.kit-field__label, .kit-field input:focus ~.kit-field__label, @@ -985,6 +987,7 @@ select.kit-field__input:disabled ~.kit-field__hr { -moz-transition: opacity 0.15s; transition: opacity 0.15s; min-width: 200px; + padding: 4px 4px 2px 4px; } .kit-dropdown.kit-active { opacity: 1; @@ -996,6 +999,8 @@ select.kit-field__input:disabled ~.kit-field__hr { -ms-user-select: none; user-select: none; cursor: pointer; + border-radius: 2px; + margin-bottom: 2px; } .kit-dropdown__option:hover { background: #e5e5e5; @@ -1110,11 +1115,18 @@ select.kit-field__input:disabled ~.kit-field__hr { } .kit-field--success ~.kit-field__label, -.kit-field--success ~.kit-field__error { +.kit-field--success ~.kit-field__error, +.kit-field--success ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-success) !important; } +.kit-field--error ~.kit-field__error, +.kit-field--error ~.kit-field__message { + opacity: 1; + visibility: visible; + color: var(--kit-color-error) !important; +} .kit-field--success ~.kit-field__hr { border-color: var(--kit-color-success) !important; } diff --git a/assets/toolkit/toolkit.js b/assets/toolkit/toolkit.js index c44acbd..18529c6 100644 --- a/assets/toolkit/toolkit.js +++ b/assets/toolkit/toolkit.js @@ -341,7 +341,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) // изменение инпута function changeHandler(e) { - var select = e.target; + var select = e.target || e; changeSelect(select); } @@ -561,7 +561,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) } function escapeKeyHandler(e) { - if (e.keyCode == 27) { + if (e.keyCode === 27) { closeAll(null); } } @@ -752,8 +752,9 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) Inputs.prototype.changeFiled = function changeFiled(e) { var _this2 = this; var target = e.target || e; + var isInput = target.tagName === 'INPUT', isTextarea = target.tagName === 'TEXTAREA'; if (target.classList.contains('kit-field__input')) { - if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') { + if (isInput || isTextarea) { this.setDirty(target); var value_min = $(target).attr('value_min'); @@ -791,15 +792,21 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) }); }; - Inputs.prototype.calcAutoHeight = function calcAutoHeight(target) { - target.style.height = target.style.minHeight = 'auto'; - var h; - if (target.scrollHeight < 30) { - h = '30' + 'px'; + Inputs.prototype.calcAutoHeight = function calcAutoHeight(node) { + node.style.height = node.style.minHeight = 'auto'; + node.rows = 1; + var h, styles = getComputedStyle(node); + + var minH = support.toNumber(styles.getPropertyValue('padding-top').trim().replace('px', '')) + + support.toNumber(styles.getPropertyValue('padding-bottom').trim().replace('px', '')) + + support.toNumber(styles.getPropertyValue('line-height').trim().replace('px', '')); + + if (node.scrollHeight < minH) { + h = '' + minH + 'px'; } else { - h = target.scrollHeight + 'px'; + h = node.scrollHeight + 'px'; } - target.style.height = target.style.minHeight = h; + node.style.height = node.style.minHeight = h; }; diff --git a/tests/cheatsheetTest.php b/tests/cheatsheetTest.php index 177beee..84168f9 100644 --- a/tests/cheatsheetTest.php +++ b/tests/cheatsheetTest.php @@ -435,13 +435,32 @@ $APPLICATION->ShowHead();