@engr-lukman/vue-secure-pin/dist/style.css

A secure PIN input component for Vue.js applications with virtual keyboard and PIN masking, designed for financial applications

@keyframes fadeIn-c58e0ec8{0%{opacity:0}to{opacity:1}}.numeric-keyboard[data-v-c58e0ec8]{min-width:250px;padding:10px;margin:5px 0;background:#fff;font-family:Arial,Helvetica,sans-serif;border-radius:10px;box-shadow:0 2px 12px #0000001a;animation:fadeIn-c58e0ec8 .3s ease;transition:background .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.numeric-keyboard__title[data-v-c58e0ec8]{font-family:Arial,Helvetica,sans-serif;color:#e2136e;text-align:center;padding-bottom:8px}.numeric-keyboard__grid[data-v-c58e0ec8]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.numeric-keyboard__button[data-v-c58e0ec8]{padding:8px;border:1px solid #e0e0e0;border-radius:5px;background:#fff;cursor:pointer;transition:all .2s;font-family:inherit;font-size:16px}.numeric-keyboard__button[data-v-c58e0ec8]:hover{background:#f5f5f5}.numeric-keyboard__button--clear[data-v-c58e0ec8]{background:#e2136e;color:#fff;border:none}.numeric-keyboard__button--clear[data-v-c58e0ec8]:hover{background:#c91161}.numeric-keyboard__button--double[data-v-c58e0ec8]{grid-column:span 2}@keyframes scale-in-c41fe822{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.pin[data-v-c41fe822]{position:relative;width:100%;font-family:Arial,Helvetica,sans-serif}.pin__field[data-v-c41fe822]{display:flex;position:relative;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff;height:40px}.pin__field--error[data-v-c41fe822]{border-color:#e2136e}.pin__display[data-v-c41fe822]{flex:1;display:flex;align-items:center;padding:0 12px;outline:none;background:transparent;font-size:16px;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pin__display--empty[data-v-c41fe822]:before{content:attr(data-placeholder);color:#757575;font-size:14px}.pin__actions[data-v-c41fe822]{display:flex;align-items:center;padding-right:8px}.pin__toggle[data-v-c41fe822]{cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;height:100%;-webkit-user-select:none;user-select:none}.pin__toggle[data-v-c41fe822]:focus{outline:2px solid #4c9aff;outline-offset:-2px;border-radius:2px}.pin__icon[data-v-c41fe822]{font-size:20px}.pin__error[data-v-c41fe822]{color:#e2136e;font-size:12px;position:absolute;bottom:-20px;left:0}.pin__keyboard[data-v-c41fe822]{position:absolute;top:calc(100% + 5px);right:0;padding:8px;border-radius:4px;box-shadow:0 1px 5px #0003;background-color:#fff;z-index:9999;animation:scale-in-c41fe822 .2s ease-out}.pin__masked-value[data-v-c41fe822]{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;margin-top:5px}