Added button and input styling

This commit is contained in:
John Shaver 2018-09-12 21:32:39 -07:00
parent 947971dc3d
commit e77468106d
2 changed files with 36 additions and 8 deletions

View File

@ -64,3 +64,35 @@ svg.icon-computer {width: 4em;fill: #1a1a1a;}
font-size: 0.833333333em; font-size: 0.833333333em;
margin: 0.4em 0; margin: 0.4em 0;
} }
input[type=text] {
font-size: 1em;
padding: 0.444444444em 0.888889em;
width: 100%;
border: solid 1px #d9d9d9;
border-radius: 2px;
box-sizing: border-box;
margin: 0.888888889em 0;
}
button {
width: 100%;
background-color: #1a1a1a;
border: none;
font-size: 1em;
color: white;
padding: 0.44444em;
margin: 1em 0;
}
button[disabled=true] {
background-color: #d9d9d9;
}
h1.logo {
font-size: 1.555555556em;
}
h2 {
font-size: 1.777777778em;
}

View File

@ -70,13 +70,9 @@
<use xlink:href="#svg-computer"></use> <use xlink:href="#svg-computer"></use>
</svg> </svg>
<h2>Pair <span class="js-hostname">Device</span></h1> <h2>Pair <span class="js-hostname">Device</span></h1>
<div>
<label>Enter your device pairing code: <label>Enter your device pairing code:
<input type="text" name="pair-code" placeholder="ex: 0000"> <input type="text" name="pair-code" placeholder="ex: 0000">
</label> </label>
</div>
<div class="checkbox-array"> <div class="checkbox-array">
<label> <label>
<input name="telebit-agree" type="checkbox" required> <input name="telebit-agree" type="checkbox" required>
@ -100,7 +96,7 @@
</label> </label>
</div> </div>
<div> <div>
<button type="submit">Claim Device</button> <button type="submit" disabled>Claim Device</button>
</div> </div>
</form></div> </form></div>
<div class="js-authz" hidden> <div class="js-authz" hidden>