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>
<html>
<head>
<!-- radio controls -->
<style>
.block
{
@ -12,7 +14,7 @@
padding: 12px 20px;
border: 0;
border-radius: 5px;
border-radius: 4px;
}
.block > *
{
@ -28,9 +30,13 @@
}
.block--bordered
{
border:1px solid #ddd;
}
}
.block--tan
{
}
.block--cool
input[type='radio']
{
@ -158,18 +164,18 @@
width:100%;
height:12px;
border-radius:20px;
background:tan;
background:#F4F2EE;
}
.progress::after
{
background:green;
background:#5E7D65;
}
.progress > *
{
position:relative;
display:inline-block;
width:20%;
padding:40px 0 0 0;
padding:30px 0 0 0;
margin:6px 0 0 0;
list-style-type: none;
font-size:13px;
@ -188,10 +194,10 @@
position:absolute;
top:0;
left:50%;
width:30px;
height:30px;
width:36px;
height:36px;
border-radius:50px;
background:green;
background:#5E7D65;
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)
@ -200,35 +206,7 @@
}
</style>
<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; }
.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>
<!-- giving buttons -->
<style>
.giving
{
@ -286,6 +264,44 @@
border-bottom-right-radius: 5px;
}
</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">
<label for="amount">$</label>
<input id="amount" type="number" value="100"/>
@ -295,13 +311,6 @@
<button>$100</button>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<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>
@ -366,5 +375,6 @@
</div>
</form>
</body>
</html>