style.min.css
8.96 KB
.input{font-size:20px;position:relative;z-index:1;display:inline-block;margin:1em;max-width:400px;width:calc(100% - 2em);vertical-align:top}.input__field{position:relative;display:block;float:right;padding:.8em;width:60%;border:none;border-radius:0;background:#f0f0f0;color:#aaa;font-weight:700;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-appearance:none}.input__field:focus{outline:none}.input__label{display:inline-block;float:right;padding:0 1em;width:40%;color:#6a7989;font-weight:700;font-size:70.25%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input__label-content{position:relative;display:block;padding:1.6em 0;width:100%}.input--hoshi{overflow:hidden}.input__field--hoshi{margin-top:1em;padding:.85em .15em;width:100%;background:transparent;color:#595F6E}.input__label--hoshi{position:absolute;bottom:0;left:0;padding:0 .25em;width:100%;height:calc(100% - 1em);text-align:left;pointer-events:none}.input__label-content--hoshi{position:absolute}.input__label--hoshi::before,.input__label--hoshi::after{content:'';position:absolute;top:0;left:0;width:100%;height:calc(100% - 10px);border-bottom:1px solid #B9C1CA}.input__label--hoshi::after{margin-top:2px;border-bottom:4px solid red;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:-webkit-transform .3s;transition:transform .3s}.input__label--hoshi-color-1::after{border-color:hsl(200,100%,50%)}.input__label--hoshi-color-2::after{border-color:hsl(160,100%,50%)}.input__label--hoshi-color-3::after{border-color:hsl(20,100%,50%)}.input__field--hoshi:focus + .input__label--hoshi::after,.input--filled .input__label--hoshi::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,.input--filled .input__label-content--hoshi{-webkit-animation:anim-1 .3s forwards;animation:anim-1 .3s forwards}@-webkit-keyframes anim-1{50%{opacity:0;-webkit-transform:translate3d(1em,0,0);transform:translate3d(1em,0,0)}51%{opacity:0;-webkit-transform:translate3d(-1em,-40%,0);transform:translate3d(-1em,-40%,0)}100%{opacity:1;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}}@keyframes anim-1{50%{opacity:0;-webkit-transform:translate3d(1em,0,0);transform:translate3d(1em,0,0)}51%{opacity:0;-webkit-transform:translate3d(-1em,-40%,0);transform:translate3d(-1em,-40%,0)}100%{opacity:1;-webkit-transform:translate3d(0,-40%,0);transform:translate3d(0,-40%,0)}}.input--kuro{max-width:320px;margin-bottom:3em}.input__label-content--kuro{text-align:center}.input__field--kuro{width:100%;background:transparent;color:#9196A1;opacity:0;text-align:center;-webkit-transition:opacity .3s;transition:opacity .3s}.input__label--kuro{position:absolute;left:0;width:100%;color:#df6589;pointer-events:none}.input__label--kuro::before,.input__label--kuro::after{content:'';position:absolute;top:0;left:0;width:50%;height:100%;border:4px solid #747981;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.input__label--kuro::before{border-right:none}.input__label--kuro::after{left:50%;border-left:none}.input__field--kuro:focus,.input--filled .input__field--kuro{opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s}.input__field--kuro:focus + .input__label--kuro::before,.input--filled .input__label--kuro::before{-webkit-transform:translate3d(-10%,0,0);transform:translate3d(-10%,0,0)}.input__field--kuro:focus + .input__label--kuro::after,.input--filled .input__label--kuro::after{-webkit-transform:translate3d(10%,0,0);transform:translate3d(10%,0,0)}.input__field--kuro:focus + .input__label--kuro .input__label-content--kuro,.input--filled .input__label-content--kuro{-webkit-animation:anim-2 .3s forwards;animation:anim-2 .3s forwards}@-webkit-keyframes anim-2{50%{opacity:0;-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}51%{opacity:0;-webkit-transform:translate3d(0,3.7em,0) scale3d(0.3,0.3,1);transform:translate3d(0,3.7em,0) scale3d(0.3,0.3,1)}100%{opacity:1;-webkit-transform:translate3d(0,3.7em,0);transform:translate3d(0,3.7em,0)}}@keyframes anim-2{50%{opacity:0;-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}51%{opacity:0;-webkit-transform:translate3d(0,3.7em,0) scale3d(0.3,0.3,1);transform:translate3d(0,3.7em,0) scale3d(0.3,0.3,1)}100%{opacity:1;-webkit-transform:translate3d(0,3.7em,0);transform:translate3d(0,3.7em,0)}}.input--jiro{margin-top:2em}.input__field--jiro{padding:.85em .5em;width:100%;background:transparent;color:#DDE2E2;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.input__label--jiro{position:absolute;left:0;padding:0 .85em;width:100%;height:100%;text-align:left;pointer-events:none}.input__label-content--jiro{-webkit-transition:-webkit-transform .3s .3s;transition:transform .3s .3s}.input__label--jiro::before,.input__label--jiro::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.input__label--jiro::before{border-top:2px solid #6a7989;-webkit-transform:translate3d(0,100%,0) translate3d(0,-2px,0);transform:translate3d(0,100%,0) translate3d(0,-2px,0);-webkit-transition-delay:.3s;transition-delay:.3s}.input__label--jiro::after{z-index:-1;background:#6a7989;-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1);-webkit-transform-origin:50% 0;transform-origin:50% 0}.input__field--jiro:focus,.input--filled .input__field--jiro{opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s}.input__field--jiro:focus + .input__label--jiro .input__label-content--jiro,.input--filled .input__label-content--jiro{-webkit-transform:translate3d(0,-80%,0);transform:translate3d(0,-80%,0);-webkit-transition-timing-function:cubic-bezier(0.2,1,0.3,1);transition-timing-function:cubic-bezier(0.2,1,0.3,1)}.input__field--jiro:focus + .input__label--jiro::before,.input--filled .input__label--jiro::before{-webkit-transition-delay:0;transition-delay:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.input__field--jiro:focus + .input__label--jiro::after,.input--filled .input__label--jiro::after{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transition-timing-function:cubic-bezier(0.2,1,0.3,1);transition-timing-function:cubic-bezier(0.2,1,0.3,1)}.input--ichiro{margin-top:2em}.input__field--ichiro{position:absolute;top:4px;left:4px;z-index:100;display:block;padding:0 .55em;width:calc(100% - 8px);height:calc(100% - 8px);background:#f0f0f0;color:#7F8994;opacity:0;-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:opacity 0.3s,-webkit-transform .3s;transition:opacity 0.3s,transform .3s}.input__label--ichiro{width:100%;text-align:left;cursor:text}.input__label--ichiro::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;border:1px solid #E9E9E9;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.input__label-content--ichiro{-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.input__field--ichiro:focus,.input--filled .input__field--ichiro{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}.input__field--ichiro:focus + .input__label--ichiro,.input--filled .input__label--ichiro{cursor:default;pointer-events:none}.input__field--ichiro:focus + .input__label--ichiro::before,.input--filled .input__label--ichiro::before{-webkit-transform:scale3d(1,1.5,1);transform:scale3d(1,1.5,1)}.input__field--ichiro:focus + .input__label--ichiro .input__label-content--ichiro,.input--filled .input__label-content--ichiro{-webkit-transform:translate3d(0,-3.15em,0) scale3d(0.8,0.8,1);transform:translate3d(0,-3.15em,0) scale3d(0.8,0.8,1) translateZ(1px)}.input--juro{overflow:hidden}.input__field--juro{position:absolute;z-index:100;padding:2.15em .75em 0;width:100%;background:transparent;color:#1784cd;font-size:.85em}.input__label--juro{padding:0;width:100%;height:100%;background:#fff;border:1px solid #E9E9E9;text-align:left}.input__label-content--juro{padding:2em 1em;-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform 0.3s,color .3s;transition:transform 0.3s,color .3s;text-rendering:geometricPrecision}.input__label--juro::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:0 solid transparent;-webkit-transition:border-width 0.3s,border-color .3s;transition:border-width 0.3s,border-color .3s}.input__field--juro:focus + .input__label--juro::before,.input--filled .input__label--juro::before{border-width:8px;border-color:#319DB5;border-top-width:2em}.input__field--juro:focus + .input__label--juro .input__label-content--juro,.input--filled .input__label--juro .input__label-content--juro{color:#fff;-webkit-transform:translate3d(0,-1.5em,0) scale3d(0.75,0.75,1);transform:translate3d(0,-1.5em,0) scale3d(0.75,0.75,1) translateZ(1px)}