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