Change some scss to style the checkbox

This commit is contained in:
maximest-pierre 2018-03-21 12:09:28 -04:00
parent 8d93b03f50
commit 2c30c33861
2 changed files with 78 additions and 18 deletions

View file

@ -141,12 +141,10 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
<p>LBRY offers a single-click sync process<br>for existing YouTubers</p>
<form class="form" id="sync" method="post" action="http://api.lbry.io/yt/connect">
<div class="form-inner">
<div class="block">
<input type="text" hidden name="type" value="sync"/>
</div>
<div class="block">
<input name="immediate_sync" type="checkbox" value="true"/>I want to sync my content.
</div>
<input id="immediate-sync" name="immediate_sync" type="checkbox" value="true"/><label class="block full" for="immediate-sync">I want to sync my content.</label>
<div class="block">
<input type="submit" value="Sync Now"/>
</div>

View file

@ -675,22 +675,50 @@ header .right a.github {
text-align: center;
}
}
.button {
form {
float: left;
width: 100%;
margin: 40px 0 0 0;
a {
float: none;
display: block;
text-decoration: none;
margin: 60px 0 0 0;
}
.form-inner {
float: none;
width: 446px;
margin: 0 auto;
}
.block {
position: relative;
float: left;
margin-top: 10px;
}
.error {
position: absolute;
top: 100%;
left: 0;
font: normal 400 14px/40px 'metropolis-medium';
color: #E2495E;
}
label {
display: block;
text-indent: 15px;
margin-bottom: 15px;
}
input {
float: left;
height: 50px;
border-radius: 25px;
font: normal 400 16px/50px 'metropolis-medium';
&[type="text"] {
width: 306px;
background: #FFF;
text-indent: 32px;
}
&[type="submit"] {
width: 120px;
height: 50px;
background: #45B0AF;
margin: 0 auto;
border-radius: 25px;
font: normal 400 16px/50px 'metropolis-medium';
text-align: center;
background: #2F3C5C;
color: #FFF;
text-align: center;
cursor: pointer;
margin: 0 0 0 20px;
-webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
@ -699,9 +727,43 @@ header .right a.github {
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
}&[type="checkbox"] {
height: 50px;
margin: 6px 8px 0 0;
border-radius: 0;
&[readonly] {
pointer-events: none;
}
}
}
}
.error {
font: normal 400 14px/40px 'metropolis-medium';
color: #E2495E;
}
button {
float: left;
height: 50px;
background: #2F3C5C;
border-radius: 25px;
padding: 0 20px;
font: normal 400 16px/50px 'metropolis-medium';
color: #FFF;
cursor: pointer;
-webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s;
}
a {
color: #45B0AF;
}
button:hover {
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
}
/* --- CONTACT --- */