UNPKG

zent

Version:

一套前端设计语言和基于React的实现

178 lines (177 loc) 5.31 kB
.zent-select { cursor: pointer; display: inline-block; font-size: 12px; line-height: 1.5; margin-right: 10px; outline: none; position: relative; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 160px; vertical-align: middle } .zent-select.open .zent-select-input, .zent-select.open .zent-select-text { border-color: #38f; box-shadow: 0 1px 1px #bdf } .zent-select.open .zent-select-simple::after, .zent-select.open .zent-select-text::after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .zent-select.open .zent-select-popup { height: auto; opacity: 1 } .zent-select.disabled { color: #cacaca; cursor: not-allowed; } .zent-select.disabled .zent-select-input, .zent-select.disabled .zent-select-text, .zent-select.disabled .zent-select-tags { border-color: #e5e5e5; background-color: #f8f8f8 } .zent-select.disabled .zent-select-input::after, .zent-select.disabled .zent-select-text::after, .zent-select.disabled .zent-select-tags::after { opacity: .25 } .zent-select-input, .zent-select-text, .zent-select-tags { box-sizing: border-box; border: 1px solid #bbb; border-radius: 2px; display: inline-block; min-height: 30px; max-height: 76px; outline: none; padding: 5px 10px; -webkit-transition: border-color .25s; transition: border-color .25s; width: 100%; background-color: #fff; position: relative; } .zent-select-simple { color: #38f } .zent-select-simple::after { content: ''; border-left: 4px solid transparent; border-top: 6px solid #38f; border-right: 4px solid transparent; display: inline-block; margin-left: 5px; height: 1px; -webkit-transition: -webkit-transform .25s; transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s } .zent-select-text { } .zent-select-text::after { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAMAAAC38k/IAAAAM1BMVEUAAAAzMzMzMzMzMzMzMzMzMzM0NDQ0NDQ1NTU1NTU9PT1VVVU0NDQzMzMzMzM1NTUzMzOoQ7gOAAAAEHRSTlMA99vkxpd9STUhCgPOzGhlqqcGJgAAAEBJREFUCNdFy8kRwCAMwEDZ3JDD/VebCXhgf3qIR83pi9gmXCduyokCyVwCuvrfAarMuzLlPzLLiGZx4FoIDeADc4gEoYNfTDsAAAAASUVORK5CYII=) no-repeat; background-size: 6px 5px; content: ''; height: 5px; margin-top: -3px; position: absolute; right: 10px; top: 50%; -webkit-transition: -webkit-transform .25s; transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s; width: 6px } .zent-select-tags { padding: 5px 5px 3px; overflow-y: auto; margin-bottom: -5px; } .zent-select-tags .zent-select-inner { border: 0; display: inline-block; outline: none; } .zent-select-tags .zent-select-tag { background-color: #f8f8f8; border: 1px solid #bbb; border-radius: 2px; display: inline-block; margin-right: 2px; padding: 0 4px; } .zent-select-tags .zent-select-delete { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEUAAACampqbm5uZmZn/DnGVAAAAA3RSTlMAnUqokJgHAAAAPklEQVQI12PQYACivQwMdQz7HRj/MchfYP/CwP5F/gID4996BwaG+r8MDAzyXyAEmAuWACsBKwZrAxsANgoAoL4XU6vB5h4AAAAASUVORK5CYII=) no-repeat; background-size: 8px; display: inline-block; height: 8px; margin-left: 2px; width: 8px; } .zent-select-tags::-webkit-scrollbar { display: none } .zent-select-popup { box-shadow: 0 1px 4px rgba(0, 0, 0, .2); height: 0; left: 0; opacity: 0; outline: none; overflow-y: auto; position: absolute; -webkit-transition: opacity .3s; transition: opacity .3s; width: 100%; z-index: 1; margin-top: 2px; background-color: #fff; max-height: 224px; } .zent-select-popup .zent-select-option, .zent-select-popup .zent-select-filter, .zent-select-popup .zent-select-empty { background-color: #fff; display: block; outline: none; padding: 5px 10px; } .zent-select-popup .zent-select-search { position: relative; box-sizing: border-box } .zent-select-popup .zent-select-search::before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAM1BMVEUAAABmZmZmZmZnZ2dnZ2dmZmZnZ2dmZmZsbGxnZ2dmZmZoaGhnZ2dmZmZnZ2dmZmZmZmYOy3DdAAAAEHRSTlMAVttEnOWJNwzzpVHsz8ZQ9cP58AAAAItJREFUKM+FkdsSgCAIRFXEa7f//9okSsqRaZ8WjrOoGJYtLmdXrPmquuOWq+9+OF4KQ39C6lX6mFL0l33SKB+BPSDNYW/pEPWZUMV3K5QjAymt9KQoIPas3FwSkFqZNbBoUZs23GvXBeWBq/YlQT5xkP0nsqg1dCKrXTYPzQkZxGTXCJoZ0YDZEeEEs9MNoPE7LN4AAAAASUVORK5CYII=) no-repeat; background-position: center; background-size: 12px; content: ''; height: 100%; left: 10px; position: absolute; width: 12px } .zent-select-popup .zent-select-filter { border-color: #ddd; border-style: solid; border-width: 0 0 1px; padding-left: 30px; width: 100%; box-sizing: border-box; height: 30px; } .zent-select-popup .zent-select-option { } .zent-select-popup .zent-select-option.current, .zent-select-popup .zent-select-option:hover { background-color: #38f; border-color: #38f; color: #fff } .zent-select-popup .zent-select-option.active { color: #38f } .zent-select-popup .zent-select-option.active:hover, .zent-select-popup .zent-select-option.active.current { color: #fff } .zent-select-popup .zent-select-empty { color: #999; }