1
0
mirror of https://github.com/mxpv/podsync.git synced 2024-05-11 05:55:04 +00:00

Add input arrow button

This commit is contained in:
Maksym Pavlenko
2016-12-16 12:02:45 -08:00
parent bf896cb850
commit 2783fbd390
2 changed files with 37 additions and 6 deletions

View File

@@ -23,7 +23,14 @@
<div class="main">
<div class="main-border">
<input type="url" placeholder="paste your link here" spellcheck="false" autofocus />
<div class="input-border">
<input type="url" placeholder="paste your link here" spellcheck="false" autofocus />
<div class="arrow-button">
<a href="#">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="controls">
<p>

View File

@@ -87,22 +87,46 @@ a {
background: #f4ecda;
}
.main-border input {
display: block;
background-color: #b9b1a2;
.input-border {
background-color: #e4dac8;
border: none;
border-bottom: 1px solid #a39c8e;
padding: 0.5em;
width: calc(100% - 1em);
}
.main-border input {
border: none;
padding: 0.5em 0 0.5em 0.5em;
width: calc(100% - 2em);
font-size: 2em;
line-height: 1;
color: #616161;
background: transparent;
}
*:focus {
outline: none;
}
/* Input button (arrow) */
.arrow-button {
float: right;
font-size: 2em;
padding-top: 0.5em;
padding-right: 0.3em;
}
.arrow-button a {
color: rgb(142, 134, 119);
}
.arrow-button a:hover {
background: none;
color: rgb(105, 98, 86);
}
/* Controls under input */
.controls {
padding-left: 1em;
word-spacing: 0.15em;