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

input adjacent, margin classes

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-10 09:36:46 -04:00
parent d12976594a
commit 6bb91f3985
1 changed files with 63 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
index.html
View File

@ -6,13 +6,12 @@
{
position:relative;
display: flex;
align-items: stretch;
align-items: flex-start;
margin: 0;
padding: 0;
border: 0;
background:lightgrey;
border-radius: 5px;
}
.block > *
@ -24,28 +23,43 @@
padding-right: 10px;
}
.block label
.block__hit-area
{
width:100%;
}
.block input[type='radio']
.block--bordered
{
display: block;
position: relative;
margin: 0;
appearance: none;
border:1px solid #ddd;
}
.block input[type='radio']::before
input[type='radio']
{
appearance: none;
display:block;
margin:0;
padding:0;
border:0;
width:0;
height:0;
}
input[type='radio'] + .block label
{
position: relative;
padding-left:50px;
}
input[type='radio'] + .block label::before
{
content: " ";
display: block;
position: relative;
position: absolute;
top: 10px;
left: 10px;
width: 17px;
height: 17px;
border: 2px solid #000;
border-radius: 20px;
}
.block input[type='radio']:checked::after
input[type='radio']:checked + .block label::after
{
content: " ";
display: block;
@ -57,6 +71,10 @@
border-radius: 20px;
background: #000;
}
input[type='radio']:checked + .block
{
background:yellow;
}
</style>
@ -79,37 +97,62 @@
.text--uppercase{ text-transform: uppercase; }
.gap--lg { margin:72px 0 0 0; }
.gap--md { margin:47px 0 0 0; }
.gap--sm { margin:24px 0 0 0; }
.gap--xs { margin:12px 0 0 0; }
</style>
</head>
<body>
<form>
<div class="text--size-h2 text--weight-black">Review Your Order</div>
<div class="text--size-copy text--weight-black text--uppercase">Payment Method</div>
<div class="block">
<div class="text--size-h2 text--weight-black gap--reset gap--lg">Review Your Order</div>
<div class="text--size-copy text--weight-black text--uppercase gap--sm">Payment Method</div>
<div class="block block--bordered gap--xs">
<div class="text--size-copy text--weight-bold">Credit Card</div>
<a class="text--green-darken-01" href="/">Change</a>
</div>
<div class="block">
<input id="check-1" type="radio" name="slot-1" value="option-1"/>
<label for="check-1">
<div class="block">
<label class="block__hit-area" for="check-1">
<span class="text--size-copy text--weight-bold">Credit Card</strong><br>
<span class="text--size-copy text--weight-normal">Credit Card</span><br>
<span class="text--size-copy text--weight-normal">Credit Card</span><br>
<span class="text--size-copy text--weight-normal">Credit Card</span><br>
<span class="text--size-copy text--weight-normal">Credit Card</span>
</label>
<a href="/">Change</a>
<a class="block__auxillary" href="/">Change</a>
</div>
<div class="block">
<input id="check-2" type="radio" name="slot-1" value="option-2"/>
<label for="check-2">
<div class="block">
<label class="block__hit-area" for="check-2">
<strong>Paypal</strong><br>
<span>also good</span>
</label>
<a href="/">Change</a>
<a class="block__auxillary" href="/">Change</a>
</div>
<div class="text--size-h2 text--weight-black">Shipping Information</div>
<div class="text--size-copy text--weight-black text--uppercase">Shipping Information</div>
<div class="block block--bordered">
<div class="block__hit-area">
<div class="text--size-copy text--weight-bold">Shell Long TP Check</div>
<div class="text--size-copy text--weight-normal">
8759 Cardinal Court<br>
Windmere, FL 34786<br>
US
</div>
<div class="text--size-copy text--weight-normal">
8759 Cardinal Court<br>
Windmere, FL 34786<br>
US
</div>
</div>
<a class="block__auxillary" href="">Change</a>
</div>
</form>