Apply improved CSS that corrects the layout of autocomplete text fields
Project: http://git-wip-us.apache.org/repos/asf/tapestry-5/repo Commit: http://git-wip-us.apache.org/repos/asf/tapestry-5/commit/7dbbe84c Tree: http://git-wip-us.apache.org/repos/asf/tapestry-5/tree/7dbbe84c Diff: http://git-wip-us.apache.org/repos/asf/tapestry-5/diff/7dbbe84c Branch: refs/heads/master Commit: 7dbbe84c05a6f6f4dc47e2dece80c401672dc51e Parents: 4ede8be Author: Howard M. Lewis Ship <[email protected]> Authored: Mon Dec 29 16:49:43 2014 -0800 Committer: Howard M. Lewis Ship <[email protected]> Committed: Mon Dec 29 16:49:43 2014 -0800 ---------------------------------------------------------------------- .../LICENSE-typeahead.js-bootstrap3.less.txt | 21 +++ tapestry-core/NOTICE.txt | 3 + .../tapestry5/corelib/mixins/Autocomplete.java | 2 +- .../META-INF/assets/core/Autocomplete.css | 56 ------ .../assets/core/typeahead-bootstrap3.css | 189 +++++++++++++++++++ 5 files changed, 214 insertions(+), 57 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/7dbbe84c/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt ---------------------------------------------------------------------- diff --git a/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt b/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt new file mode 100644 index 0000000..8496047 --- /dev/null +++ b/tapestry-core/LICENSE-typeahead.js-bootstrap3.less.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 hyspace (Shawn Zhou) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/7dbbe84c/tapestry-core/NOTICE.txt ---------------------------------------------------------------------- diff --git a/tapestry-core/NOTICE.txt b/tapestry-core/NOTICE.txt index 9fd093a..1be4a14 100644 --- a/tapestry-core/NOTICE.txt +++ b/tapestry-core/NOTICE.txt @@ -35,4 +35,7 @@ https://github.com/twitter/typeahead.js This product includes Moment.js, distributed under the MIT License. https://github.com/moment/moment +This product includes typeahead.js-bootstrap3.less, distributed under the MIT License. +https://github.com/hyspace/typeahead.js-bootstrap3.less + http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/7dbbe84c/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java b/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java index c2688ea..03a96da 100644 --- a/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java +++ b/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Autocomplete.java @@ -119,7 +119,7 @@ public class Autocomplete writer.attributes("autocomplete", "off"); } - @Import(stylesheet="Autocomplete.css") + @Import(stylesheet="typeahead-bootstrap3.css") void afterRender() { Link link = resources.createEventLink(EVENT_NAME, context); http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/7dbbe84c/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css b/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css deleted file mode 100644 index 72ef7f6..0000000 --- a/tapestry-core/src/main/resources/META-INF/assets/core/Autocomplete.css +++ /dev/null @@ -1,56 +0,0 @@ -/** From https://gist.github.com/bhays/6140058, and modified */ - -.twitter-typeahead .tt-query, -.twitter-typeahead .tt-hint { - margin-bottom: 0; -} - -.tt-hint { - display: block; - width: 100%; - height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.428571429; - color: #999; - vertical-align: middle; - background-color: #ffffff; - border: 1px solid #cccccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -} - -.tt-dropdown-menu { - min-width: 160px; - margin-top: 2px; - padding: 5px 0; - background-color: #ffffff; - border: 1px solid #cccccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; - -} - -.tt-suggestion { - display: block; - padding: 3px 20px; -} - -.tt-suggestion.tt-cursor { - color: #fff; - background-color: #428bca; -} - -.tt-suggestion.tt-cursor a { - color: #fff; -} - -.tt-suggestion p { - margin: 0; -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/7dbbe84c/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css b/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css new file mode 100644 index 0000000..fde7cb9 --- /dev/null +++ b/tapestry-core/src/main/resources/META-INF/assets/core/typeahead-bootstrap3.css @@ -0,0 +1,189 @@ +/* + * typehead.js-bootstrap3.less + * @version 0.2.3 + * https://github.com/hyspace/typeahead.js-bootstrap3.less + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/MIT + */ +.has-warning .twitter-typeahead .tt-input, +.has-warning .twitter-typeahead .tt-hint { + border-color: #8a6d3b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-warning .twitter-typeahead .tt-input:focus, +.has-warning .twitter-typeahead .tt-hint:focus { + border-color: #66512c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; +} +.has-error .twitter-typeahead .tt-input, +.has-error .twitter-typeahead .tt-hint { + border-color: #a94442; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-error .twitter-typeahead .tt-input:focus, +.has-error .twitter-typeahead .tt-hint:focus { + border-color: #843534; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; +} +.has-success .twitter-typeahead .tt-input, +.has-success .twitter-typeahead .tt-hint { + border-color: #3c763d; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-success .twitter-typeahead .tt-input:focus, +.has-success .twitter-typeahead .tt-hint:focus { + border-color: #2b542c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; +} +.input-group .twitter-typeahead:first-child .tt-input, +.input-group .twitter-typeahead:first-child .tt-hint { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +.input-group .twitter-typeahead:last-child .tt-input, +.input-group .twitter-typeahead:last-child .tt-hint { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} +.input-group.input-group-sm .twitter-typeahead .tt-input, +.input-group.input-group-sm .twitter-typeahead .tt-hint { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-group.input-group-sm .twitter-typeahead .tt-input, +select.input-group.input-group-sm .twitter-typeahead .tt-hint { + height: 30px; + line-height: 30px; +} +textarea.input-group.input-group-sm .twitter-typeahead .tt-input, +textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, +select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, +select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { + height: auto; +} +.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, +.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { + border-radius: 0; +} +.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, +.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, +.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} +.input-group.input-group-lg .twitter-typeahead .tt-input, +.input-group.input-group-lg .twitter-typeahead .tt-hint { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; +} +select.input-group.input-group-lg .twitter-typeahead .tt-input, +select.input-group.input-group-lg .twitter-typeahead .tt-hint { + height: 46px; + line-height: 46px; +} +textarea.input-group.input-group-lg .twitter-typeahead .tt-input, +textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, +select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, +select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { + height: auto; +} +.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, +.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { + border-radius: 0; +} +.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, +.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { + border-bottom-left-radius: 6px; + border-top-left-radius: 6px; + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, +.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 6px; + border-top-right-radius: 6px; +} +.twitter-typeahead { + width: 100%; +} +.input-group .twitter-typeahead { + display: table-cell !important; + float: left; +} +.twitter-typeahead .tt-hint { + color: #999999; +} +.twitter-typeahead .tt-input { + z-index: 2; +} +.twitter-typeahead .tt-input[disabled], +.twitter-typeahead .tt-input[readonly], +fieldset[disabled] .twitter-typeahead .tt-input { + cursor: not-allowed; + background-color: #eeeeee !important; +} +.tt-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + min-width: 160px; + width: 100%; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + background-color: #ffffff; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; + *border-right-width: 2px; + *border-bottom-width: 2px; +} +.tt-dropdown-menu .tt-suggestion { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333333; + white-space: nowrap; +} +.tt-dropdown-menu .tt-suggestion.tt-cursor { + text-decoration: none; + outline: 0; + background-color: #f5f5f5; + color: #262626; +} +.tt-dropdown-menu .tt-suggestion.tt-cursor a { + color: #262626; +} +.tt-dropdown-menu .tt-suggestion p { + margin: 0; +} \ No newline at end of file
