<div class="container">
<header>
<nav>
<button type="button"><i data-feather="arrow-left"></i></button>
<button type="button"><i data-feather="search"></i></button>
</nav>
</header>
<main>
<h1 class="t1">History</h1>
<div class="toggle-group">
<input id="today-date" type="radio" name="date-choose">
<label for="today-date" class="t4">Today</label>
<input id="yesterday-date" type="radio" name="date-choose" checked>
<label for="yesterday-date" class="t4">Yesterday</label>
</div>
<div class="chart">
<div class="chart-label">
<span class="t2">45%</span>
<span class="text-muted">saving</span>
</div>
<svg class="progress" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
<circle r="40" cx="50" cy="50" stroke-width="7" fill="transparent" stroke="#E2E8F0"></circle>
<circle id="chartfill" r="40" cx="50" cy="50" stroke-width="7" stroke-dasharray="245" stroke-dashoffset="245" fill="transparent" stroke="#D53F8C" stroke-linecap="round" class="meter"></circle>
</svg>
</div>
<button id="btntransactions" class="t4 w-100">Show my transactions</button>
</main>
<nav>
<a href="#" class="btn text-muted"><i data-feather="home"></i></a>
<a href="#" class="btn text-muted"><i data-feather="credit-card"></i></a>
<a href="#" class="btn text-muted active"><i data-feather="trending-up"></i></a>
<a href="#" class="btn text-muted"><i data-feather="bell"></i></a>
</nav>
</div>// TODO: cleanup
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
$gray-100: hsla(210, 38%, 95%, 1);
$muted: hsla(214, 25%, 65%, 1);
$white: #ffffff;
$black: #4a5568;
$dark: #DFE4EA;
$shadow-tl: -4px -2px 4px 0px;
$shadow-br: 4px 2px 6px 0px;
$shadow: $shadow-tl $white, $shadow-br $dark;
$shadow-flip: $shadow-tl $dark inset, $shadow-br $white inset;
$radius: 3px;
html {
font-size: 16px;
}
body {
font-family: "Kulim Park", sans-serif;
background-color: #f5f6f7;
color: $black;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
}
a {
color: $black;
}
.text-muted {
color: $muted;
}
$sizes: 1.5rem, 1.25rem, 1rem, 0.85rem, 0.5rem;
@for $i from 1 through length($sizes) {
.t#{$i} {
font-size: nth($sizes, $i);
}
}
.w-100 {
width: 100%;
}
.container {
height: 600px;
width: 300px;
padding: 1rem 1.5rem;
border-radius: $radius;
box-shadow: $shadow;
}
nav {
display: flex;
justify-content: space-between;
}
%button {
color: inherit;
position: relative;
background: inherit;
outline: none;
border: none;
box-shadow: $shadow;
border-radius: $radius;
cursor: pointer;
text-transform: uppercase;
}
%button-focus {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: $radius;
box-shadow: 2px 2px 2px 0px $dark inset, -2px -2px 2px 0px $white inset;
}
button {
@extend %button;
padding: 0.5rem 0.75rem;
&:focus,
&:active {
&::after {
@extend %button-focus;
}
}
svg.feather {
color: $muted;
width: 1.25rem;
height: 1.25rem;
}
}
.btn {
@extend %button;
padding: 0.5rem 0.75rem;
&.active {
color: $black;
&::after {
@extend %button-focus;
}
}
}
main {
padding: 1.5rem 0.25rem;
}
.toggle-group {
display: flex;
justify-content: space-around;
label {
@extend %button;
flex: 1;
padding: 0.75rem;
text-align: center;
border-radius: 8px;
&:first-of-type {
margin-right: 1rem;
}
}
input {
display: none;
&:checked {
+ label::after {
@extend %button-focus;
border-radius: 8px;
}
}
}
}
.chart {
position: relative;
border-radius: 50%;
margin: 2rem;
box-shadow: $shadow;
/* inner shadow */
&::after {
content: "";
position: absolute;
border-radius: 50%;
margin: 3rem;
top: 0;
bottom: 0;
right: 0;
left: 0;
box-shadow: 2px 2px 2px 0px $dark inset, -2px -2px 2px 0px $white inset;
}
.chart-label {
position: absolute;
top: 0;
bottom: 0.5rem;
left: 0;
right: 0;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
span {
display: block;
}
}
}
#btntransactions {
padding: 0.75rem;
}
#chartfill {
animation: chart 500ms linear forwards;
}
@keyframes chart {
from {
stroke-dashoffset: 245;
}
to {
stroke-dashoffset: 110;
}
}(function() {
feather.replace()
})();
External CSS
This Pen doesn't use any external CSS resources.