<div class="size-example">
<h4>Border</h4>
<div class="size size--1 size--border"></div>
<div class="size size--2 size--border"></div>
<div class="size size--3 size--border"></div>
<div class="size size--4 size--border"></div>
</div>
<div class="size-example">
<h4>Outline</h4>
<div class="size size--1 size--outline"></div>
<div class="size size--2 size--outline"></div>
<div class="size size--3 size--outline"></div>
<div class="size size--4 size--outline"></div>
</div>
.size-example {
display: flex;
justify-content: center;
align-items: flex-start;
}
.size-example h4 {
display: inline-block;
font-size: 18px;
align-self: center;
line-height: 0.6;
color: #FFF;
margin-right: 0.5em;
}
.size {
display: inline-block;
margin: 0.25em 3px;
font-size: 21px;
line-height: 1;
padding: 0.3em 1em 0.6em;
box-sizing: border-box;
&:after {
display: inline-block;
content: 'px';
font-size: 0.6em;
margin-left: 0.1em;
}
}
.size--1:before { content: '5'; }
.size--2:before { content: '5.4'; }
.size--3:before { content: '5.5'; }
.size--4:before { content: '6'; }
.size--border {
border: solid 1px @border;
}
.size--border.size--1 { border-width: 5px; }
.size--border.size--2 { border-width: 5.4px; }
.size--border.size--3 { border-width: 5.5px; }
.size--border.size--4 { border-width: 6px; }
.size--outline {
outline: solid 1px @border;
margin-left: 8px;
margin-right: 8px;
}
.size--outline.size--1 { outline-width: 5px; }
.size--outline.size--2 { outline-width: 5.4px; }
.size--outline.size--3 { outline-width: 5.5px; }
.size--outline.size--4 { outline-width: 6px; }
View Compiled
This Pen doesn't use any external JavaScript resources.