dropdown.css 3.0 KB

12
  1. .dropdown{float:left;width:100%;position:relative;font-family:Inconsolata;-webkit-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transition:0.4s cubic-bezier(0.19, 1, 0.22, 1)}.dropdown>.bg{background:#fff;height:0%;float:left;width:100%;position:absolute;z-index:1;-webkit-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transition:0.4s cubic-bezier(0.19, 1, 0.22, 1)}.dropdown .front_face{position:relative;padding:20px 40px;color:#000;float:left;width:100%}.dropdown .front_face>.bg{position:absolute;z-index:0;float:left;width:100%;height:100%;left:0;background:#e5e5e5;top:0}.dropdown .front_face .content{float:left;width:100%;position:relative;z-index:2}.dropdown .front_face span{-webkit-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);float:left;width:100%;color:inherit}.dropdown .front_face .current_value{position:absolute}.dropdown .front_face .placeholder{position:relative}.dropdown .front_face .icon{float:right;position:absolute;right:0px;top:50%;transform:rotate(180deg) translateY(-50%);transform-origin:center 0;-webkit-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transition:0.4s cubic-bezier(0.19, 1, 0.22, 1)}.dropdown .front_face .icon svg{width:10px;height:10px}.dropdown .back_face{z-index:2;position:absolute;padding:0 20px;-webkit-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transform:translateY(20px);opacity:0;float:left;width:100%;max-height:200px;overflow:hidden;display:none}.dropdown .back_face.overflow{overflow-y:scroll}.dropdown .back_face ul{margin:0;float:left;width:100%}.dropdown .back_face ul li{float:left;width:100%;display:block}.dropdown .back_face ul li a{color:inherit;opacity:0.8;-webkit-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-moz-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);-o-transition:0.4s cubic-bezier(0.19, 1, 0.22, 1);transition:0.4s cubic-bezier(0.19, 1, 0.22, 1)}.dropdown .back_face ul li a:hover{opacity:1}.dropdown.animate{z-index:3;height:100% !important}.dropdown.animate .front_face .icon{transform:rotate(0deg) translateY(-50%)}.dropdown.animate>.bg{height:100%}.dropdown.animate2>.bg{box-shadow:0px 11px 43px 11px rgba(0,0,0,0.11)}.dropdown.animate2 .back_face{transform:translateY(0px);opacity:1}.dropdown.hasValue .front_face .placeholder{transform:translateY(20px);opacity:0}.dropdown.placeholder_animate .front_face .current_value{opacity:0}.dropdown.placeholder_animate2 .front_face .placeholder{transform:translateY(0);opacity:1}
  2. /*# sourceMappingURL=dropdown.css.map */