wark
/
QR
1
1
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Make the text input pretty

master
Ryan Wark 4 years ago
parent
3dc6fed5bd
commit
0295f8c60c
2 changed files with 91 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      dist/index.html
  2. 81
      dist/qr.css

9
dist/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="qr.css"> <link rel="stylesheet" href="qr.css">
@ -8,8 +9,14 @@
<script src="qr.js"></script> <script src="qr.js"></script>
</head> </head>
<body onload="init()"> <body onload="init()">
<p>
<span class="input">
<input id="qrtext" type="text" placeholder="Enter text" oninput="makeCode(this)"/> <input id="qrtext" type="text" placeholder="Enter text" oninput="makeCode(this)"/>
<br />
<span></span>
</span>
</p>
<p>
<div id="qrcode"></div> <div id="qrcode"></div>
</p>
</body> </body>
</html> </html>

81
dist/qr.css
View File

@ -1,17 +1,22 @@
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
font-size: 1em;
}
body { body {
text-align: center;
display: initial;
background-color: #ccc; background-color: #ccc;
align-items: center;
justify-content: center;
} }
#qrtext {
max-width: 512px;
display: block;
margin: 0 auto;
width:80%;
padding: 5px 7px;
border: 1px solid #000;
border-radius: 10px;
background-color: #f0f0f0;
html,
body {
height: 100%;
} }
#qrcode { #qrcode {
margin: 0 auto; margin: 0 auto;
width:256px; width:256px;
@ -22,3 +27,61 @@ body {
border-radius: 10px; border-radius: 10px;
background-color: #f0f0f0; background-color: #f0f0f0;
} }
input {
font-family: inherit;
line-height: inherit;
font-size: 100%;
color: #2e3750;
min-width: 12em;
}
.input {
position: relative;
font-size: 1.5em;
background: linear-gradient(21deg, #444444, #444444);
padding: 3px;
display: inline-block;
border-radius: 9999em;
}
.input *:not(span) {
position: relative;
display: inherit;
border-radius: inherit;
margin: 0;
border: none;
outline: none;
padding: 0 0.325em;
z-index: 1;
}
.input *:not(span):focus + span {
opacity: 1;
transform: scale(1);
}
.input span {
transform: scale(0.993, 0.94);
transition: transform 0.5s, opacity 0.25s;
opacity: 0;
position: absolute;
z-index: 0;
margin: 4px;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff, 3px -3px 30px #272727, -3px 3px 30px #2C5D78;
}
::-moz-placeholder {
color: #cbd0d5;
}
:-ms-input-placeholder {
color: #cbd0d5;
}
::placeholder {
color: #cbd0d5;
}
Write Preview
Loading…
Cancel
Save