/** * jQuery Flexdatalist basic stylesheet. * * Version: * 2.2.1 * * Github: * https://github.com/sergiodlopes/jquery-flexdatalist/ * */ .flexdatalist-results { position: absolute; top: 0; left: 0; border: 1px solid #444; border-top: none; background: #fff; z-index: 100000; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); color: #333; list-style: none; margin: 0; padding: 0; } .flexdatalist-results li { border-bottom: 1px solid #ccc; padding: 8px 15px; font-size: 14px; line-height: 20px; } .flexdatalist-results li span.highlight { font-weight: 700; text-decoration: underline; } .flexdatalist-results li.active { background: #2B82C9; color: #fff; cursor: pointer; } .flexdatalist-results li.no-results { font-style: italic; color: #888; } /** * Grouped items */ .flexdatalist-results li.group { background: #F3F3F4; color: #666; padding: 8px 8px; } .flexdatalist-results li .group-name { font-weight: 700; } .flexdatalist-results li .group-item-count { font-size: 85%; color: #777; display: inline-block; padding-left: 10px; } /** * Multiple items */ .flexdatalist-multiple:before { content: ''; display: block; clear: both; } .flexdatalist-multiple { width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; cursor: text; } .flexdatalist-multiple.disabled { background-color: #eee; cursor: default; } .flexdatalist-multiple:after { content: ''; display: block; clear: both; } .flexdatalist-multiple li { display: inline-block; position: relative; margin: 5px; } .flexdatalist-multiple li.input-container, .flexdatalist-multiple li.input-container input { border: none; height: auto; padding: 0 0 0 4px; line-height: 24px; } .flexdatalist-multiple li.value { display: inline-block; padding: 2px 25px 2px 7px; background: #efefef; border-radius: 3px; color: #444; line-height: 20px; float: left; } .flexdatalist-multiple li.toggle { cursor: pointer; transition: opacity ease-in-out 300ms; } .flexdatalist-multiple li.toggle.disabled { text-decoration: line-through; opacity: 0.80; } .flexdatalist-multiple li.value span.fdl-remove { font-weight: 700; padding: 2px 5px; font-size: 20px; line-height: 20px; cursor: pointer; position: absolute; top: 0; right: 0; opacity: 0.70; } .flexdatalist-multiple li.value span.fdl-remove:hover { opacity: 1; }