|
|
Linha 1: |
Linha 1: |
| /**/ | | /**/ |
| div.searchable {
| | .select-box { |
| width: 300px;
| | position: relative; |
| float: left;
| |
| margin: 0 15px;
| |
| } | | } |
|
| |
|
| .searchable input { | | .search-box { |
| width: 100%;
| | display: block; |
| height: 50px;
| | width: 100%; |
| font-size: 18px;
| | padding: 8px; |
| padding: 10px;
| | box-sizing: border-box; |
| -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
| | border: 1px solid #ccc; |
| -moz-box-sizing: border-box; /* Firefox, other Gecko */
| | border-radius: 4px; |
| box-sizing: border-box; /* Opera/IE 8+ */
| |
| display: block;
| |
| font-weight: 400;
| |
| line-height: 1.6;
| |
| color: #495057;
| |
| background-color: #fff;
| |
| background-clip: padding-box;
| |
| border: 1px solid #ced4da;
| |
| border-radius: .25rem;
| |
| transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
| |
| background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
| |
| } | | } |
|
| |
|
| .searchable ul { | | .options-list { |
| display: none;
| | position: absolute; |
| list-style-type: none;
| | top: 100%; |
| background-color: #fff;
| | width: 100%; |
| border-radius: 0 0 5px 5px;
| | max-height: 200px; |
| border: 1px solid #add8e6;
| | overflow: auto; |
| border-top: none;
| | opacity: 0; |
| max-height: 180px;
| | pointer-events: none; |
| margin: 0;
| | transition: opacity 0.2s ease; |
| overflow-y: scroll;
| |
| overflow-x: hidden;
| |
| padding: 0;
| |
| } | | } |
|
| |
|
| .searchable ul li { | | .options-list option { |
| padding: 7px 9px;
| | padding: 8px; |
| border-bottom: 1px solid #e1e1e1;
| | font-size: 16px; |
| cursor: pointer;
| | background-color: #fff; |
| color: #6e6e6e;
| |
| } | | } |
|
| |
|
| .searchable ul li.selected { | | .options-list option:hover { |
| background-color: #e8e8e8;
| | background-color: #f2f2f2; |
| color: #333;
| | } |
| | |
| | .show { |
| | opacity: 1; |
| | pointer-events: auto; |
| | } |
| | |
| | .hide { |
| | display: none; |
| } | | } |
| /**/ | | /**/ |