vue-dropdown-advanced
Version:
A seriously advanced Vue Dropdown tool with many custom options.
1 lines • 3.35 kB
CSS
.vdda-container{position:absolute;z-index:3;color:#3b405f;-webkit-box-shadow:#cacab7 0 0 10px 1px;box-shadow:0 0 10px 1px #cacab7;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}.vdda-container .img{padding:1px;-webkit-transition:border .4s;transition:border .4s}.vdda-container .img-border{border:1px solid transparent}.vdda-container .img-border:hover{border:1px solid #b6b659}.vdda-container .img-left{margin-left:0;margin-right:0;padding:1px}.vdda-container .img-right{margin-left:0;margin-right:3px}.vdda-container .vdda-dropdown-list{max-width:200px;max-height:260px;border:2px solid #c2c2c3;overflow-y:auto;overflow-x:hidden;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}.vdda-container .vdda-dropdown-list .action,.vdda-container .vdda-dropdown-list .checkbox,.vdda-container .vdda-dropdown-list .radiobox{cursor:pointer}.vdda-container .vdda-dropdown-list .action:hover,.vdda-container .vdda-dropdown-list .checkbox:hover,.vdda-container .vdda-dropdown-list .radiobox:hover{background:#f0f0f0}.vdda-container .vdda-dropdown-list .disabled{color:#ababab;background-color:hsla(0,0%,92.2%,.04);cursor:default}.vdda-container .vdda-dropdown-list .seperator{height:3px;background-color:#efebeb}.vdda-container .vdda-dropdown-list .header{line-height:31px ;background-color:#adadad;color:#fff;padding-left:5px}.vdda-container .vdda-dropdown-list i{width:20px;height:20px;margin-top:6px;line-height:20px}.vdda-container .vdda-dropdown-list i.img-left{margin-top:6px}.vdda-container .vdda-dropdown-list i.material-icons{margin-right:6px;margin-left:5px}.vdda-container .vdda-dropdown-list i.material-icons.material-icons.md-18{margin-right:1px}.vdda-container .vdda-dropdown-list>div{width:100%;background:#fff;border-bottom:1px solid rgba(194,194,195,.5);-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:background .2s;transition:background .2s;white-space:nowrap;cursor:default}.vdda-container .vdda-dropdown-list .img-check{margin-top:9px;margin-left:3px;margin-right:4px;width:11px;height:11px;display:inline-block;border:1px solid hsla(0,0%,50.2%,.541);background-color:#fff}.vdda-container .vdda-dropdown-list .img-check.option{border-radius:6px}.vdda-container .vdda-dropdown-list .img-check.checked{background-color:orange}.vdda-container .vdda-dropdown-item{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-left:2px;padding-right:4px;line-height:30px;vertical-align:middle;font-family:Roboto,sans-serif;font-size:14px;text-align:left}.vdda-container .vdda-dropdown-item>.flex{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:4px;margin-right:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vdda-container .vdda-dropdown-item>.flex.increase-left-margin-fa{margin-left:24px}.vdda-container .vdda-dropdown-item>.flex.increase-left-margin-md-18{margin-left:30px}.vdda-container .vdda-dropdown-item>.flex.increase-left-margin-md-24{margin-left:35px}.vdda-container .vdda-dropdown-item>[data-img-right]{border:1px solid hsla(0,0%,82.7%,0);border-radius:3px;-webkit-transition:all .3s;transition:all .3s}.vdda-container .vdda-dropdown-item>[data-img-right]:hover{border:1px solid #9f9ea3;background:rgba(187,189,195,.38)}