<aside class="user-dashboard">
<div class="user-details-container">
<a href="#" class="avatar user-profile">
<img src="https://assets.codepen.io/137754/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1597542102&width=512"/>
</a>
<a href="#" class="user-settings">
<i class="stroke-config"></i>
</a>
</div>
<nav class="main">
<h5>Menu</h5>
<ul class="nav-container">
<li class="nav-item open">
<span>analytics</span>
<ul class="subnav">
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
<li><a href="#">option 4</a></li>
</ul>
</li>
<li class="nav-item">
<span>projects</span>
<ul class="subnav">
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
<li><a href="#">option 4</a></li>
</ul class="subnav">
</li>
<li class="nav-item">
<span>teams</span>
<ul class="subnav">
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
<li><a href="#">option 4</a></li>
</ul>
</li>
<li class="nav-item">
<span>users</span>
<ul class="subnav">
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
<li><a href="#">option 4</a></li>
</ul>
</li>
<li class="nav-item">
<span>time</span>
<ul class="subnav">
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
<li><a href="#">option 4</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<main class="main">
<header class="main">
<h5>Hello <a href="#">James</a>! Check out your latest stats.</h5>
<form class="input-container">
<label>Search</label>
<input type="search">
</form>
</header>
<div class="scroll-container">
<div class="content-container">
<section class="content-section">
<div class="content-item">
<div class="content-header">
<h5>Weekly Sprint</h5>
<a href="#" class="content-menu"><i class="stroke-more"></i></a>
</div>
<div class="content-body">
<div class="content-body-item">
<h4>Monday</h4>
<p class="stat negative">20%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,60 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Tuesday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,40 0,20 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,0 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Wednesday</h4>
<p class="stat negative">50%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,40 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,30 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Thursday</h4>
<p class="stat positive">40%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,80 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,20 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Friday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,90 0,30 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,70 0,80 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Saturday</h4>
<p class="stat positive">80%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,10 0,90 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,70 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Sunday</h4>
<p class="stat positive">100%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,100 0,80 0,100 100,100" />
</svg>
</div>
</div>
</div>
</div>
</section>
<section class="content-section">
<div class="content-item">
<div class="content-header">
<h5>Weekly Tasks</h5>
<a href="#" class="content-menu"><i class="stroke-more"></i></a>
</div>
<div class="content-body">
<div class="content-body-item">
<h4>Monday</h4>
<p class="stat negative">20%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,60 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Tuesday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,40 0,20 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,0 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Wednesday</h4>
<p class="stat negative">50%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,40 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,30 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Thursday</h4>
<p class="stat positive">40%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,80 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,20 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Friday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,90 0,30 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,70 0,80 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Saturday</h4>
<p class="stat positive">80%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,10 0,90 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,70 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Sunday</h4>
<p class="stat positive">100%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,100 0,80 0,100 100,100" />
</svg>
</div>
</div>
</div>
</div>
</section>
<section class="content-section">
<div class="content-item">
<div class="content-header">
<h5>Weekly PRs</h5>
<a href="#" class="content-menu"><i class="stroke-more"></i></a>
</div>
<div class="content-body">
<div class="content-body-item">
<h4>Monday</h4>
<p class="stat negative">20%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,60 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Tuesday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,40 0,20 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,0 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Wednesday</h4>
<p class="stat negative">50%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,40 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,30 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Thursday</h4>
<p class="stat positive">40%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,80 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,20 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Friday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,90 0,30 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,70 0,80 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Saturday</h4>
<p class="stat positive">80%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,10 0,90 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,70 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Sunday</h4>
<p class="stat positive">100%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,100 0,80 0,100 100,100" />
</svg>
</div>
</div>
</div>
</div>
</section>
<section class="content-section">
<div class="content-item">
<div class="content-header">
<h5>Weekly Commits</h5>
<a href="#" class="content-menu"><i class="stroke-more"></i></a>
</div>
<div class="content-body">
<div class="content-body-item">
<h4>Monday</h4>
<p class="stat negative">20%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,60 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Tuesday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,40 0,20 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,0 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Wednesday</h4>
<p class="stat negative">50%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,40 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,30 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Thursday</h4>
<p class="stat positive">40%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,80 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,20 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Friday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,90 0,30 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,70 0,80 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Saturday</h4>
<p class="stat positive">80%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,10 0,90 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,70 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Sunday</h4>
<p class="stat positive">100%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,100 0,80 0,100 100,100" />
</svg>
</div>
</div>
</div>
</div>
</section>
<section class="content-section">
<div class="content-item">
<div class="content-header">
<h5>Weekly Issues</h5>
<a href="#" class="content-menu"><i class="stroke-more"></i></a>
</div>
<div class="content-body">
<div class="content-body-item">
<h4>Monday</h4>
<p class="stat negative">20%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,60 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Tuesday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,40 0,20 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,0 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Wednesday</h4>
<p class="stat negative">50%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,40 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,20 0,30 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Thursday</h4>
<p class="stat positive">40%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,30 0,80 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,20 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Friday</h4>
<p class="stat negative">10%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,90 0,30 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,70 0,80 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Saturday</h4>
<p class="stat positive">80%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,10 0,90 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,80 0,70 0,100 100,100" />
</svg>
</div>
</div>
<div class="content-body-item">
<h4>Sunday</h4>
<p class="stat positive">100%</p>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,0 0,10 0,100 100,100" />
</svg>
</div>
<div class="graph">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="100,100 0,80 0,100 100,100" />
</svg>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</main>// Vars
$primary: #343434;
$primaryFont: #EFEFEF;
$primaryFontAlt: #D8D7D7;
$primaryBorder: #252525;
$secondary: #F9F9F9;
$secondaryAlt: #FFF;
$secondaryFont: #343434;
$secondaryFontAlt: #484848;
$secondaryBorder: #e3e3e3;
$tertiary: #56A1DB;
$tertiaryFont: #FFF;
$gradientStep1: #436F60;
$gradientStep2: #D2C493;
$gradientStep3: #3D3739;
$gradientStep4: #233E4F;
$blue: #56A1DB;
$red: #F47264;
$green: #28D8B2;
$yellow: #FBD046;
$purple: #735FA4;
$contentSectionTop: #5f636d;
$contentSectionBottom: #4c5f71;
// Font Import
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700);
@font-face {
font-family: 'stroke';
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137754/stroke.eot?d7yf1v');
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137754/stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137754/stroke.woff?d7yf1v') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/137754/stroke.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="stroke-"], [class*=" stroke-"] {
display: inline-block;
font-family: 'stroke';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@mixin stroke {
display: inline-block;
font-family: 'stroke';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
}
html, body {
margin:0;
padding:0;
height:100%;
min-width: 1100px;
background: $primary;
font-size: 14px;
font-weight: 400;
font-family: 'Lato', sans-serif;
}
body {
display: flex;
overflow: hidden;
background-image: linear-gradient(to bottom, $gradientStep1, $gradientStep2, $gradientStep3, $gradientStep4);
}
main.main {
background: rgba(0,0,0,.5);
height: 100vh;
width: calc(100% - 250px);
color: $primaryFont;
display: flex;
flex-direction: column;
}
.content-container {
margin: 0 60px;
border-radius: 3px;
background: rgba(0,0,0,.4);
position: relative;
padding: 20px 0;
&::before {
width: 60px;
height: 100%;
content: '';
background-image: linear-gradient(to left, rgba(0,0,0,.4), rgba(0,0,0,0));
position: absolute;
top: 0;
left: -60px;
}
&::after {
width: 60px;
height: 100%;
content: '';
background-image: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0));
position: absolute;
top: 0;
right: -60px;
}
}
.scroll-container {
overflow: auto;
width: 100%;
}
h1, h2, h3, h4, h5, h6, p, span, a, th, td, input, label {
font-family: 'Lato', sans-serif;
}
h1 {
font-size: 32px;
font-weight: 300;
}
h2 {
font-size: 28px;
font-weight: 300;
}
h3 {
font-size: 26px;
font-weight: 300;
}
h4 {
font-size: 24px;
font-weight: 300;
}
h5 {
font-size: 20px;
font-weight: 300;
}
h6 {
font-size: 18px;
}
a {
color: $tertiary;
text-decoration: none;
&:hover, &.selected {
color: darken( $tertiary, 15% );
}
}
input:focus, .button:focus { outline: none; }
.button {
color: $tertiaryFont;
background: $tertiary;
border: none;
padding: 10px 40px;
text-align: center;
font-size: 1rem;
display: block;
&:hover, &.selected {
background: darken( $tertiary, 30% );
}
}
.user-dashboard {
background: $secondary;
color: $secondaryFont;
width: 250px;
height: 100vh;
display: flex;
flex-direction: column;
}
.user-details-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
padding: 20px;
flex: 0 0 auto;
position: relative;
.user-settings {
font-size: 34px;
width: 34px;
height: 34px;
position: absolute;
top: 10px;
right: 10px;
}
}
nav.main {
display: flex;
flex-direction: column;
flex: 1;
h5 {
padding: 0 20px 10px;
color: $secondaryFontAlt;
border-bottom: 1px solid $secondaryBorder;
}
ul.nav-container {
overflow: auto;
}
li.nav-item {
overflow: hidden;
span {
display: block;
width: 100%;
text-transform: uppercase;
color: $secondaryFontAlt;
background: $secondaryAlt;
padding: 16px 20px 16px 40px;
border-top: 1px solid $secondaryBorder;
border-bottom: 1px solid transparent;
cursor: pointer;
position: relative;
user-select: none;
&::before {
content: '';
position: absolute;
width: 6px;
height: 6px;
border: 2px solid;
border-radius: 50%;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
&::after {
@include stroke;
content: '\e684';
font-size: 28px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.25s ease;
}
}
&:first-of-type span {
border-top: none;
}
&:last-of-type span {
border-bottom: 1px solid $secondaryBorder;
}
&:first-of-type {
span::before {
border-color: $green;
}
li a::before {
background: $green;
}
}
&:nth-of-type(2) {
span::before {
border-color: $red;
}
li a::before {
background: $red;
}
}
&:nth-of-type(3) {
span::before {
border-color: $blue;
}
li a::before {
background: $blue;
}
}
&:nth-of-type(4) {
span::before {
border-color: $yellow;
}
li a::before {
background: $yellow;
}
}
&:nth-of-type(5) {
span::before {
border-color: $purple;
}
li a::before {
background: $purple;
}
}
ul.subnav {
visibility: hidden;
max-height: 0;
transition: 0.25s ease;
transition-property: max-height, opacity;
opacity: 0;
a {
display: block;
width: 100%;
text-transform: uppercase;
color: lighten( $secondaryFontAlt, 15% );
padding: 16px 20px 16px 40px;
position: relative;
&:hover {
background: dadrken( $secondary, 10% );
}
}
li {
a::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
left: 22px;
top: 50%;
transform: translateY(-50%);
}
}
}
&.open {
span {
border-bottom: 1px solid $secondaryBorder;
&::after {
transform: translateY(-50%) rotate(90deg);
}
}
ul.subnav {
visibility: visible;
max-height: 200px;
opacity: 1;
}
}
}
}
header.main {
padding: 24px 60px;
display: flex;
justify-content: space-between;
align-items: center;
background-image: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,0));
flex: 0 0 auto;
position: relative;
&::after {
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, transparent, $primaryBorder, transparent);
}
h5 {
padding-left: 34px;
font-size: 18px;
position: relative;
&::before {
@include stroke;
content: '\e66b';
color: $primaryFontAlt;
font-size: 28px;
position: absolute;
left: 0;
top: -4px;
}
}
form.input-container {
display: flex;
align-items: center;
label {
width: 28px;
height: 28px;
font-size: 28px;
overflow: hidden;
display:inline-block;
margin-right: 10px;
cursor: pointer;
&::before {
@include stroke;
content: '\e618';
color: $primaryFontAlt;
}
}
input[type="search"] {
background: none;
border: none;
border-bottom: 1px solid $secondary;
line-height: 22px;
width: 240px;
color: $primaryFont;
font-size: 22px;
font-weight: 300;
display: none;
}
}
}
section.content-section {
background-image: linear-gradient(to right, rgba($contentSectionTop, .5), rgba($contentSectionBottom, .8));
margin-bottom: 10px;
border-radius: 3px;
overflow: hidden;
.content-item {
display: flex;
flex-direction: column;
.content-header {
display: flex;
flex: 0 0 auto;
justify-content: space-between;
padding: 20px;
align-items: center;
border-bottom: 1px solid $primaryBorder;
h5 {
padding-left: 20px;
position: relative;
&::after {
content: '';
width: 8px;
height: 8px;
background: $red;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 50%;
}
}
.content-menu {
transform: rotate(90deg);
width: 26px;
height: 26px;
font-size: 26px;
color: $primaryFontAlt;
overflow: hidden;
text-align: center;
}
}
.content-body {
flex: 0 0 260px;
display: flex;
align-items: stretch;
.content-body-item {
flex: 1;
border-right: 1px solid $primaryBorder;
padding: 10px;
cursor: pointer;
position: relative;
h4 {
color: darken( $primaryFontAlt, 30% );
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
.stat {
text-align: center;
font-size: 32px;
font-weight: 100;
&.negative {
&::before {
content: '-';
color: $red;
padding-right: 4px;
}
}
&.positive {
&::before {
content: '+';
color: $green;
padding-right: 4px;
}
}
}
.graph {
position: absolute;
width: 100%;
left: 0;
bottom: 0px;
height: 170px;
opacity: .9;
svg {
width: 100%;
height: 170px;
}
}
&:hover {
background: $secondary;
h4 {
color: lighten( $secondaryFontAlt, 30% );
}
.stat {
color: lighten( $secondaryFontAlt, 20% );
font-weight: 300;
}
}
&:last-of-type {
border-right: none;
}
}
}
}
&:first-of-type .content-item {
.content-header h5::after {
background: $red;
}
.graph {
svg polygon {
fill: rgba(0,0,0,.4);
}
&:nth-last-of-type(2) svg polygon {
fill: darken( $red, 20% );
}
}
}
&:nth-of-type(2) .content-item {
.content-header h5::after {
background: $blue;
}
.graph {
svg polygon {
fill: rgba(0,0,0,.4);
}
&:nth-last-of-type(2) svg polygon {
fill: darken( $blue, 20% );
}
}
}
&:nth-of-type(3) .content-item {
.content-header h5::after {
background: $yellow;
}
.graph {
svg polygon {
fill: rgba(0,0,0,.4);
}
&:nth-last-of-type(2) svg polygon {
fill: darken( $yellow, 20% );
}
}
}
&:nth-of-type(4) .content-item {
.content-header h5::after {
background: $green;
}
.graph {
svg polygon {
fill: rgba(0,0,0,.4);
}
&:nth-last-of-type(2) svg polygon {
fill: darken( $green, 20% );
}
}
}
&:nth-of-type(5) .content-item {
.content-header h5::after {
background: $purple;
}
.graph {
svg polygon {
fill: rgba(0,0,0,.4);
}
&:nth-last-of-type(2) svg polygon {
fill: darken( $purple, 20% );
}
}
}
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
background: $red;
img {
width: 100%;
}
}
$('li.nav-item').click( function() {
$(this).toggleClass('open');
});
External CSS
This Pen doesn't use any external CSS resources.