@weslink/vue-pincode/docs/css/app.c13ba3b5.css

Neumorphism styled pincode input field for Vue.js

.vue-pincode[data-v-69af37d9]{padding:15px}.vue-pincode__fields[data-v-69af37d9]{display:flex;justify-content:space-between;align-items:center;max-width:200px;padding:0 20px;margin:20px auto 50px}.vue-pincode__fields--miss[data-v-69af37d9]{-webkit-animation:miss-data-v-69af37d9 .8s ease-out 1;animation:miss-data-v-69af37d9 .8s ease-out 1}.vue-pincode__fields span[data-v-69af37d9]{height:14px;width:14px;box-shadow:inset 0 0 0 2px #36485e;background-color:transparent;border-radius:100%;position:relative;display:inline-block;text-align:center;transition:box-shadow .2s linear}.vue-pincode__fields span.active[data-v-69af37d9]{box-shadow:inset 0 0 0 7px #36485e}.vue-pincode__numbers[data-v-69af37d9]{display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;align-items:center;row-gap:20px}.vue-pincode__numbers button[data-v-69af37d9]{display:flex;justify-content:center;align-items:center;width:70px;height:70px;border-radius:50%;color:#36485e;background:#e8e8e8;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:24px;outline:none;cursor:pointer;border:1px solid hsla(0,0%,100%,.5);transition:all .2s linear;box-shadow:7px 7px 15px rgba(54,72,94,.211765),-4px -4px 13px #fff,inset 4px 4px 8px rgba(209,217,230,.35),inset -8px -8px 8px hsla(0,0%,100%,.3)}.vue-pincode__numbers button[data-v-69af37d9]:active,.vue-pincode__numbers button[data-v-69af37d9]:hover{box-shadow:4px 2px 18px rgba(54,72,94,.211765),-4px -4px 13px #fff,inset 6px 6px 16px rgba(209,217,230,.8),inset -8px -8px 8px hsla(0,0%,100%,.2)}.vue-pincode__numbers button[data-v-69af37d9]:active{transform:translateY(2px)}.vue-pincode__numbers button span[data-v-69af37d9]{opacity:1;transition:all .2s linear}.vue-pincode--success .vue-pincode__numbers button[data-v-69af37d9]{box-shadow:0 0 0 #bbcfda,0 0 0 #fff,inset 0 0 0 rgba(209,217,230,.35),inset 0 0 0 hsla(0,0%,100%,.3);transform:translateY(2px);color:rgba(54,72,94,.32)}.vue-pincode--success .vue-pincode__numbers button span[data-v-69af37d9]{opacity:.4}.vue-pincode--success .vue-pincode__fields span[data-v-69af37d9]{box-shadow:inset 0 0 0 7px #41b883}.vue-pincode--success .vue-pincode__undo svg[data-v-69af37d9]{fill:rgba(54,72,94,.32)}.vue-pincode__undo span[data-v-69af37d9]{transform:translateY(3px)}.vue-pincode__undo svg[data-v-69af37d9]{width:32px;height:32px;transform:rotate(45deg);transition:transform .3s cubic-bezier(.85,0,.15,1);fill:#36485e}.vue-pincode__undo:hover svg[data-v-69af37d9]{transform:rotate(-135deg)}@-webkit-keyframes miss-data-v-69af37d9{0%{transform:translate(0)}10%{transform:translate(-25px)}20%{transform:translate(25px)}30%{transform:translate(-20px)}40%{transform:translate(20px)}50%{transform:translate(-10px)}60%{transform:translate(10px)}70%{transform:translate(-5px)}80%{transform:translate(5px)}to{transform:translate(0)}}@keyframes miss-data-v-69af37d9{0%{transform:translate(0)}10%{transform:translate(-25px)}20%{transform:translate(25px)}30%{transform:translate(-20px)}40%{transform:translate(20px)}50%{transform:translate(-10px)}60%{transform:translate(10px)}70%{transform:translate(-5px)}80%{transform:translate(5px)}to{transform:translate(0)}}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}.container{max-width:320px;margin:auto}body{background:#e5e5e5}