From 8fc5db2839afb6acd25174b62c37db5960f8d001 Mon Sep 17 00:00:00 2001 From: Grzegorz Tomicki Date: Wed, 3 Nov 2021 19:13:34 +0100 Subject: [PATCH 1/2] chore: 1.6.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 31f72b9..773686e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "autocomplete", - "version": "1.6.3", + "version": "1.6.4", "description": "Simple autocomplete component in vanilla JS", "author": "Grzegorz Tomicki", "main": "docs/js/autocomplete.min.js", From 8105b5d9f8f22485a1573bb1cd3700066ba896df Mon Sep 17 00:00:00 2001 From: Grzegorz Tomicki Date: Wed, 3 Nov 2021 19:26:35 +0100 Subject: [PATCH 2/2] fix: reset margin on autocomplete ul (#102) --- docs/css/autocomplete.css | 2 +- sources/scss/modules/_autocomplete.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/css/autocomplete.css b/docs/css/autocomplete.css index 904ca6d..c803a24 100644 --- a/docs/css/autocomplete.css +++ b/docs/css/autocomplete.css @@ -1 +1 @@ -:root{--close-button:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.984 6.422 13.406 12l5.578 5.578-1.406 1.406L12 13.406l-5.578 5.578-1.406-1.406L10.594 12 5.016 6.422l1.406-1.406L12 10.594l5.578-5.578z'/%3E%3C/svg%3E");--loupe-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23929292' d='M16.041 15.856a.995.995 0 0 0-.186.186A6.97 6.97 0 0 1 11 18c-1.933 0-3.682-.782-4.95-2.05S4 12.933 4 11s.782-3.682 2.05-4.95S9.067 4 11 4s3.682.782 4.95 2.05S18 9.067 18 11a6.971 6.971 0 0 1-1.959 4.856zm5.666 4.437-3.675-3.675A8.967 8.967 0 0 0 20 11c0-2.485-1.008-4.736-2.636-6.364S13.485 2 11 2 6.264 3.008 4.636 4.636 2 8.515 2 11s1.008 4.736 2.636 6.364S8.515 20 11 20a8.967 8.967 0 0 0 5.618-1.968l3.675 3.675a.999.999 0 1 0 1.414-1.414z'/%3E%3C/svg%3E")}.auto-search{display:block;position:relative;width:100%}.auto-search input{border:1px solid #d7d7d7;box-shadow:none;box-sizing:border-box;font-size:16px;padding:12px 45px 12px 10px;width:100%}.auto-search input:focus{border:1px solid #858585;outline:none}.auto-search input::-ms-clear{display:none}.auto-search ul{box-sizing:border-box;list-style:none;overflow:auto;padding:0}.auto-search ul li{cursor:pointer;margin:0;overflow:hidden;padding:10px;position:relative}.auto-search ul li:not(:last-child){border-top:none}.auto-search ul li[disabled]{background:#ececec;opacity:.5;pointer-events:none}.auto-search .auto-expanded{border:1px solid #858585;outline:none}.auto-search.loupe:before{filter:invert(60%)}.auto-is-loading:after{animation:auto-spinner .6s linear infinite;border-color:#d9d9d9 grey grey #d9d9d9;border-radius:50%;border-style:solid;border-width:2px;bottom:0;box-sizing:border-box;content:"";height:20px;margin:auto;position:absolute;right:10px;top:0;width:20px}.auto-is-loading .auto-clear{display:none}@keyframes auto-spinner{to{transform:rotate(1turn)}}li.loupe:before{bottom:auto;top:15px}.loupe input{padding:12px 45px 12px 40px}.loupe:before{background-image:var(--loupe-icon);bottom:0;content:"";height:17px;left:10px;margin:auto;position:absolute;top:0;width:17px}.auto-selected:before{opacity:1}.auto-clear{align-items:center;background-color:transparent;border:none;bottom:0;cursor:pointer;display:flex;height:auto;justify-content:center;margin:auto;position:absolute;right:0;top:0;width:40px}.auto-clear:before{content:var(--close-button);height:24px;line-height:100%;width:24px}.auto-clear span{display:none}.auto-wrapper{background-color:#fff;border:1px solid #858585;border-top:none;display:none;overflow:hidden}.auto-wrapper ul>.loupe{padding-left:40px}.auto-wrapper.auto-is-active{display:block;margin-top:-1px;position:absolute;width:100%;z-index:99999}.auto-selected{background-color:#e6e6e6}.auto-selected+li:before{border-top:none}.auto-error{border:1px solid #ff3838}.auto-error::placeholder{color:#f66;opacity:1}.hidden{display:none} \ No newline at end of file +:root{--close-button:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.984 6.422 13.406 12l5.578 5.578-1.406 1.406L12 13.406l-5.578 5.578-1.406-1.406L10.594 12 5.016 6.422l1.406-1.406L12 10.594l5.578-5.578z'/%3E%3C/svg%3E");--loupe-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23929292' d='M16.041 15.856a.995.995 0 0 0-.186.186A6.97 6.97 0 0 1 11 18c-1.933 0-3.682-.782-4.95-2.05S4 12.933 4 11s.782-3.682 2.05-4.95S9.067 4 11 4s3.682.782 4.95 2.05S18 9.067 18 11a6.971 6.971 0 0 1-1.959 4.856zm5.666 4.437-3.675-3.675A8.967 8.967 0 0 0 20 11c0-2.485-1.008-4.736-2.636-6.364S13.485 2 11 2 6.264 3.008 4.636 4.636 2 8.515 2 11s1.008 4.736 2.636 6.364S8.515 20 11 20a8.967 8.967 0 0 0 5.618-1.968l3.675 3.675a.999.999 0 1 0 1.414-1.414z'/%3E%3C/svg%3E")}.auto-search{display:block;position:relative;width:100%}.auto-search input{border:1px solid #d7d7d7;box-shadow:none;box-sizing:border-box;font-size:16px;padding:12px 45px 12px 10px;width:100%}.auto-search input:focus{border:1px solid #858585;outline:none}.auto-search input::-ms-clear{display:none}.auto-search ul{list-style:none;margin:0;overflow:auto;padding:0}.auto-search ul li{cursor:pointer;margin:0;overflow:hidden;padding:10px;position:relative}.auto-search ul li:not(:last-child){border-top:none}.auto-search ul li[disabled]{background:#ececec;opacity:.5;pointer-events:none}.auto-search .auto-expanded{border:1px solid #858585;outline:none}.auto-search.loupe:before{filter:invert(60%)}.auto-is-loading:after{animation:auto-spinner .6s linear infinite;border-color:#d9d9d9 grey grey #d9d9d9;border-radius:50%;border-style:solid;border-width:2px;bottom:0;box-sizing:border-box;content:"";height:20px;margin:auto;position:absolute;right:10px;top:0;width:20px}.auto-is-loading .auto-clear{display:none}@keyframes auto-spinner{to{transform:rotate(1turn)}}li.loupe:before{bottom:auto;top:15px}.loupe input{padding:12px 45px 12px 40px}.loupe:before{background-image:var(--loupe-icon);bottom:0;content:"";height:17px;left:10px;margin:auto;position:absolute;top:0;width:17px}.auto-selected:before{opacity:1}.auto-clear{align-items:center;background-color:transparent;border:none;bottom:0;cursor:pointer;display:flex;height:auto;justify-content:center;margin:auto;position:absolute;right:0;top:0;width:40px}.auto-clear:before{content:var(--close-button);height:24px;line-height:100%;width:24px}.auto-clear span{display:none}.auto-wrapper{background-color:#fff;border:1px solid #858585;border-top:none;box-sizing:border-box;display:none;overflow:hidden}.auto-wrapper ul>.loupe{padding-left:40px}.auto-wrapper.auto-is-active{display:block;margin-top:-1px;position:absolute;width:100%;z-index:99999}.auto-selected{background-color:#e6e6e6}.auto-selected+li:before{border-top:none}.auto-error{border:1px solid #ff3838}.auto-error::placeholder{color:#f66;opacity:1}.hidden{display:none} \ No newline at end of file diff --git a/sources/scss/modules/_autocomplete.scss b/sources/scss/modules/_autocomplete.scss index 8693567..00e6c29 100644 --- a/sources/scss/modules/_autocomplete.scss +++ b/sources/scss/modules/_autocomplete.scss @@ -30,8 +30,8 @@ ul { list-style: none; padding: 0; + margin: 0; overflow: auto; - box-sizing: border-box; li { position: relative; @@ -152,6 +152,7 @@ li.loupe:before { border: 1px solid #858585; border-top: none; overflow: hidden; + box-sizing: border-box; background-color: $color-white; ul > .loupe {