diff --git a/src/css/auto-suggest.css b/src/css/auto-suggest.css index 055dc98c..844cceeb 100644 --- a/src/css/auto-suggest.css +++ b/src/css/auto-suggest.css @@ -4,7 +4,7 @@ font-size: 1em; } -.auto-suggest-list { +.auto-suggest { background-color: rgb(var(--theme-gray-02)); margin-top: 0.5em; padding: 1em; @@ -15,67 +15,57 @@ max-height: 40vh; border-radius: var(--theme-radius); overflow-y: auto; - z-index: var(--z-index-auto-suggest-list); - display: flex; - flex-direction: row; - flex-wrap: wrap; + z-index: var(--z-index-auto-suggest); box-shadow: var(--layout-shadow-large); } -.auto-suggest-list-item { - flex-basis: 33.3333333333%; +.auto-suggest-list { + display: grid; + grid-template-columns: repeat(3, 1fr); } -.auto-suggest-list-item:not(:last-child) { - margin-bottom: 0; -} - -.auto-suggest-link { +.auto-suggest-item { + background-color: transparent; padding: 0.5em; + margin: 0; border: 0; border-radius: var(--theme-radius); width: 100%; height: 100%; + min-height: 6em; display: flex; + position: relative; + white-space: inherit; flex-direction: column; - justify-content: flex-start; + justify-content: center; align-items: center; transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); } -.auto-suggest-link:link, -.auto-suggest-link:visited { - color: rgb(var(--theme-gray-16)); - text-decoration: none; +.auto-suggest-item:after { + content: none; } -.auto-suggest-link:hover { - background-color: rgb(var(--theme-gray-03)); - color: rgb(var(--form-input-text-hover)); - outline: none; - text-decoration: none; +.auto-suggest-item:link, +.auto-suggest-item:visited { + background-color: transparent; +} + +.auto-suggest-item:hover { box-shadow: var(--form-ring-hover); } -.auto-suggest-link:focus { - background-color: rgb(var(--theme-gray-01)); - color: rgb(var(--form-input-text-focus-active)); - outline: none; - text-decoration: none; +.auto-suggest-item:focus { box-shadow: var(--form-ring-accent); } -.auto-suggest-link:active { - color: rgb(var(--theme-style-text)); -} - .auto-suggest-icon { font-size: 2em; } .auto-suggest-icon-text { - color: rgb(var(--theme-gray-08)); - margin-top: 0.5em; + margin-top: 1em; font-size: 0.6em; text-align: center; + line-height: 1.6; } diff --git a/src/css/variables.css b/src/css/variables.css index e91a1ad6..2267dae3 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -191,7 +191,7 @@ --z-index-shade: 5000; --z-index-modal: 6000; --z-index-menu: 7000; - --z-index-auto-suggest-list: 8000; + --z-index-auto-suggest: 8000; --z-index-dropdown: 9000; --z-index-edge: 10000; /* breakpoint */ diff --git a/src/js/auto-suggest.js b/src/js/auto-suggest.js index a2a376f5..d337c6c4 100644 --- a/src/js/auto-suggest.js +++ b/src/js/auto-suggest.js @@ -177,49 +177,52 @@ var autoSuggest = (function() { fontawesomeIcon: function() { suggestItems.forEach(function(arrayItem) { var li = helper.node("li|class:auto-suggest-list-item"); - var anchor = helper.node("a|href:#,tabindex:1,class:auto-suggest-link"); + var button = helper.node("button|tabindex:1,class:auto-suggest-item"); var icon = helper.node("span|class:auto-suggest-icon fa-" + arrayItem.name); if (arrayItem.styles.includes("solid")) { helper.addClass(icon, "fas"); } else if (arrayItem.styles.includes("brands")) { helper.addClass(icon, "fab"); }; - anchor.addEventListener("click", function() { + button.addEventListener("click", function() { link.render.autoSuggestIconAction(arrayItem); }, false); var text = helper.node("span:" + arrayItem.label + "|class:auto-suggest-icon-text"); - anchor.appendChild(icon); - anchor.appendChild(text); - li.appendChild(anchor); + button.appendChild(icon); + button.appendChild(text); + li.appendChild(button); list.appendChild(li); }); } }; action[_currentInputOptions.type](); }; - var _renderAutoSuggestList = function() { - var autoSuggestWrapper = helper.e(".auto-suggest-wrapper"); + var _renderAutoSuggest = function() { + var autoSuggestInput = helper.e(".auto-suggest-input"); + var autoSuggest = helper.e(".auto-suggest"); var autoSuggestList = helper.e(".auto-suggest-list"); - if (autoSuggestList) { + if (autoSuggest) { while (autoSuggestList.lastChild) { autoSuggestList.removeChild(autoSuggestList.lastChild); }; } else { - var style = { - left: autoSuggestWrapper.getBoundingClientRect().left, - top: autoSuggestWrapper.getBoundingClientRect().bottom + window.scrollY, - width: autoSuggestWrapper.getBoundingClientRect().width + var box = { + left: autoSuggestInput.getBoundingClientRect().left, + top: autoSuggestInput.getBoundingClientRect().bottom + window.scrollY, + width: autoSuggestInput.getBoundingClientRect().width }; + var autoSuggest = helper.node("div|class:auto-suggest list-unstyled"); var autoSuggestList = helper.node("ul|class:auto-suggest-list list-unstyled"); - body.appendChild(autoSuggestList); - autoSuggestList.setAttribute("style", "width: " + style.width + "px; top: " + style.top + "px; left: " + style.left + "px;"); + autoSuggest.appendChild(autoSuggestList); + body.appendChild(autoSuggest); + autoSuggest.setAttribute("style", "width: " + box.width + "px; top: " + box.top + "px; left: " + box.left + "px;"); documentEvent.add(); }; _populateList(autoSuggestList); }; if (suggestItems.length > 0) { _autoSuggestActive = true; - _renderAutoSuggestList(); + _renderAutoSuggest(); } else { render.close(); }; @@ -227,9 +230,9 @@ var autoSuggest = (function() { render.close = function() { mod.close(); - var autoSuggestList = helper.e(".auto-suggest-list"); - if (autoSuggestList) { - autoSuggestList.remove(); + var autoSuggest = helper.e(".auto-suggest"); + if (autoSuggest) { + autoSuggest.remove(); documentEvent.remove(); _currentInputOptions = {}; _autoSuggestActive = false; diff --git a/src/js/link.js b/src/js/link.js index 97e308df..5816b6f5 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -698,7 +698,7 @@ var link = (function() { var displayIconLableIcon = helper.node("span|class:label-icon"); var displayIconFormIndent = helper.node("div|class:form-indent"); var displayIconInputWrap = helper.node("div|class:input-wrap"); - var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-wrapper"); + var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input"); var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled"); var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1"); var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");