SethTrowbridge/atomic-css
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

form input fields

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-22 14:52:20 -04:00
parent a076a5a1a6
commit a868c3255a
1 changed files with 81 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<!-- radio controls --> <!-- blocks -->
<style> <style>
.block .block
{ {
@ -11,7 +11,7 @@
align-items: flex-start; align-items: flex-start;
margin: 0; margin: 0;
padding: 12px 20px; padding: 0;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
@ -28,15 +28,34 @@
{ {
width:100%; width:100%;
} }
.block--bordered .block--empty, input:checked + .block--empty-active
{ {
border:1px solid #f1f1ee;
} }
.block--tan .block--warm, input:checked + .block--warm-active
{ {
border:1px solid #f1f1ee;
background:#F8F8F6;
} }
.block--cool .block--cool, input:checked + .block--cool-active
{
border: 1px solid #ccd7de;
background:#e6ebee;
}
.block--gray, input:checked + .block--gray-active
{
border: 1px solid #E1DFDF;
background:#F8F8F6;
}
.block--green, input:checked + .block--green-active
{
border: 1px solid #5E7D65;
background:#5E7D65;
}
</style>
<!-- form controls -->
<style>
input[type='radio'] input[type='radio']
{ {
@ -75,7 +94,7 @@
background:#1565C0; background:#1565C0;
border:2px solid #1565C0; border:2px solid #1565C0;
opacity:0; opacity:0;
transform:scale(1); transform:scale(0);
transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s;
} }
input[type='radio']:checked + * label::after input[type='radio']:checked + * label::after
@ -141,6 +160,32 @@
top: 5px; top: 5px;
} }
input[type='text'], input[type='number'], input[type='email'], select
{
position:relative;
height:44px;
box-sizing: border-box;
margin:0;
padding:10px 13px;
border: 1px solid #DBDCD4;
appearance: none;
border-radius: 4px;
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
color:#000000;
font-weight:500;
font-size:16px;
line-height:24px;
}
select
{
top:1.5px;
padding-right:50px;
background:url();
}
</style> </style>
<!-- progress bar --> <!-- progress bar -->
@ -192,13 +237,19 @@
content:" "; content:" ";
display: block; display: block;
position:absolute; position:absolute;
top:0; top:-18px;
left:50%; left:50%;
width:36px; width:36px;
height:36px; height:36px;
border-radius:50px; border-radius:50px;
background:#5E7D65; background:#5E7D65;
transform:translate(-50%, -50%); transform:translateX(-50%);
}
.progress--stage-5 > *:nth-child(5)::before
{
left:auto;
right:0;
transform:none;
} }
.progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5) .progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5)
{ {
@ -301,6 +352,13 @@
</head> </head>
<body> <body>
<ul class="progress progress--stage-2">
<li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
<li class="txt--wgt-normal txt--size-copy">Payment Options</li>
<li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
<li class="txt--wgt-normal txt--size-copy">Confirmation</li>
<li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
</ul>
<div class="giving"> <div class="giving">
<label for="amount">$</label> <label for="amount">$</label>
@ -311,13 +369,15 @@
<button>$100</button> <button>$100</button>
</div> </div>
<ul class="progress progress--stage-2"> <input type="text" value="text"/>
<li class="txt--wgt-normal txt--size-copy">Shopping Cart</li> <select>
<li class="txt--wgt-normal txt--size-copy">Payment Options</li> <option>select</option>
<li class="txt--wgt-normal txt--size-copy">Shipping Method</li> <option>select</option>
<li class="txt--wgt-normal txt--size-copy">Confirmation</li> <option>select</option>
<li class="txt--wgt-normal txt--size-copy">Print Receipt</li> <option>select</option>
</ul> </select>
<input type="email" value="email"/>
<input type="number" value="123"/>
<form> <form>
@ -329,13 +389,13 @@
<div class="txt--size-h2 txt--wgt-black gap--lg">Review Your Order</div> <div class="txt--size-h2 txt--wgt-black gap--lg">Review Your Order</div>
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--sm">Payment Method</div> <div class="txt--size-copy txt--wgt-black txt--uppercase gap--sm">Payment Method</div>
<div class="block block--bordered gap--xs"> <div class="block block--empty gap--xs">
<div class="txt--size-copy txt--wgt-bold">Credit Card</div> <div class="txt--size-copy txt--wgt-bold">Credit Card</div>
<a class="txt--green-darken-01" href="/">Change</a> <a class="txt--green-darken-01" href="/">Change</a>
</div> </div>
<input id="check-1" type="radio" name="slot-1" value="option-1"/> <input id="check-1" type="radio" name="slot-1" value="option-1"/>
<div class="block"> <div class="block block--empty block--warm-active gap--xs">
<label class="block__hit-area" for="check-1"> <label class="block__hit-area" for="check-1">
<span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br> <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
<span class="txt--size-copy txt--wgt-normal">Credit Card</span><br> <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
@ -347,7 +407,7 @@
</div> </div>
<input id="check-2" type="radio" name="slot-1" value="option-2"/> <input id="check-2" type="radio" name="slot-1" value="option-2"/>
<div class="block"> <div class="block block--empty gap--xs">
<label class="block__hit-area" for="check-2"> <label class="block__hit-area" for="check-2">
<strong>Paypal</strong><br> <strong>Paypal</strong><br>
<span>also good</span> <span>also good</span>
@ -357,7 +417,7 @@
<div class="txt--size-h2 txt--wgt-black">Shipping Information</div> <div class="txt--size-h2 txt--wgt-black">Shipping Information</div>
<div class="txt--size-copy txt--wgt-black txt--uppercase">Shipping Information</div> <div class="txt--size-copy txt--wgt-black txt--uppercase">Shipping Information</div>
<div class="block block--bordered"> <div class="block block--empty">
<div class="block__hit-area"> <div class="block__hit-area">
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div> <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
<div class="txt--size-copy txt--wgt-normal"> <div class="txt--size-copy txt--wgt-normal">