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

misc

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-17 11:06:31 -04:00
parent 3e70ed304e
commit a076a5a1a6
1 changed files with 55 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
index.html
View File

@ -1,6 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- radio controls -->
<style> <style>
.block .block
{ {
@ -12,7 +14,7 @@
padding: 12px 20px; padding: 12px 20px;
border: 0; border: 0;
border-radius: 5px; border-radius: 4px;
} }
.block > * .block > *
{ {
@ -28,9 +30,13 @@
} }
.block--bordered .block--bordered
{ {
border:1px solid #ddd;
}
}
.block--tan
{
}
.block--cool
input[type='radio'] input[type='radio']
{ {
@ -158,18 +164,18 @@
width:100%; width:100%;
height:12px; height:12px;
border-radius:20px; border-radius:20px;
background:tan; background:#F4F2EE;
} }
.progress::after .progress::after
{ {
background:green; background:#5E7D65;
} }
.progress > * .progress > *
{ {
position:relative; position:relative;
display:inline-block; display:inline-block;
width:20%; width:20%;
padding:40px 0 0 0; padding:30px 0 0 0;
margin:6px 0 0 0; margin:6px 0 0 0;
list-style-type: none; list-style-type: none;
font-size:13px; font-size:13px;
@ -188,10 +194,10 @@
position:absolute; position:absolute;
top:0; top:0;
left:50%; left:50%;
width:30px; width:36px;
height:30px; height:36px;
border-radius:50px; border-radius:50px;
background:green; background:#5E7D65;
transform:translate(-50%, -50%); transform:translate(-50%, -50%);
} }
.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)
@ -200,35 +206,7 @@
} }
</style> </style>
<style> <!-- giving buttons -->
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
.txt--size-micro{ font-size: 12px; line-height:24px; }
.txt--size-small{ font-size: 14px; line-height:24px; }
.txt--size-copy{ font-size:16px; line-height:24px; }
.txt--size-h2{ font-size:24px; line-height:28px; }
.txt--size-h1{ font-size:32px; line-height:48px; }
.txt--green-darken-01{ color: #4B6451; }
.txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; }
.txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; }
.txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; }
.txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; }
.txt--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>
<style> <style>
.giving .giving
{ {
@ -286,6 +264,44 @@
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
</style> </style>
<!-- atomic text -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
.txt--size-micro{ font-size: 12px; line-height:24px; }
.txt--size-small{ font-size: 14px; line-height:24px; }
.txt--size-copy{ font-size:16px; line-height:24px; }
.txt--size-h2{ font-size:24px; line-height:28px; }
.txt--size-h1{ font-size:32px; line-height:48px; }
.txt--green-darken-01{ color: #4B6451; }
.txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; }
.txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; }
.txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; }
.txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; }
.txt--uppercase{ text-transform: uppercase; }
.txt--center{ text-align:center; }
.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>
<!-- atomic coloration -->
<style>
</style>
</head>
<body>
<div class="giving"> <div class="giving">
<label for="amount">$</label> <label for="amount">$</label>
<input id="amount" type="number" value="100"/> <input id="amount" type="number" value="100"/>
@ -295,13 +311,6 @@
<button>$100</button> <button>$100</button>
</div> </div>
<br>
<br>
<br>
<br>
<br>
<br>
<ul class="progress progress--stage-2"> <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">Shopping Cart</li>
<li class="txt--wgt-normal txt--size-copy">Payment Options</li> <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
@ -366,5 +375,6 @@
</div> </div>
</form> </form>
</body> </body>
</html> </html>