Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save calebreister/fc5515a250bf1c1222af to your computer and use it in GitHub Desktop.
Save calebreister/fc5515a250bf1c1222af to your computer and use it in GitHub Desktop.
.title
%h1
Swagtastic UI Stat Pop out
%h2
Hover over each stat. Pure CSS...of course!
.ui
.ui_box
.ui_box__inner
%h2
Conversion Rate
%p Lorem ipsum dolor sit amet
.stat
%span 58%
.progress
.progress_bar
%p Lorem ipsum dolor sit amet. Some more super groovy information about this stat.
.drop
%p Take a closer look
.arrow
.ui_box
.ui_box__inner
%h2
Sales By Type
%p Lorem ipsum dolor sit amet
.stat_left
%ul
%li
Electical
%li
Clothing
%li
Entertainment
%li
Kitchen
.progress_graph
.progress_graph__bar--1
.progress_graph__bar--2
.progress_graph__bar--3
.progress_graph__bar--4
%p Lorem ipsum dolor sit amet. Some more super groovy information.
.drop
%p Take a closer look
.arrow
.ui_box
.ui_box__inner
%h2
Total Sales
%p Lorem ipsum dolor sit amet
.stat
%span $34,403.93
.progress
.progress_bar--two
%p Lorem ipsum dolor sit amet. Some more super groovy information about this stat.
.drop
%p Take a closer look
.arrow
/* Nope, not today */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
$background:#4FA584;
body{
background:#ededeb;
.title{
width:600px;
margin:0 auto;
text-align:center;
h1{
margin:30px 0px 0px 0px;
font-family: 'Source Sans Pro', sans-serif;
font-weight:400;
color: #3d3d3d;
}
h2{
margin:10px 0px 0px 0px;
font-size:18px;
color: #8B8B8B;
font-weight:400;
font-family: 'Source Sans Pro', sans-serif;
}
}
.ui{
width:900px;
margin:0 auto;
margin-top:50px;
font-family: 'Source Sans Pro', sans-serif;
color:white;
box-shadow:none;
ul{
margin:0px 30px 10px 0px;
padding:0;
list-style-type:none;
font-size:11px;
font-weight:400;
line-height:20px;
}
.drop{
z-index:-3;
opacity:0;
width: 240px;
height: 10px;
background: darken($background,10%);
position: absolute;
color:white;
bottom: 0;
padding:12px 30px 21px 30px;
transition-property:bottom,opacity;
transition-duration:.3s;
p{
color:lighten($background,50%);
}
}
&_box{
width:300px;
height:220px;
position:relative;
background:#3d3d3d;
float:left;
box-shadow:-1px 0px rgba(255, 255, 255, 0.07);
cursor:pointer;
transform:scale(1);
transition-property:transform,background;
transition-duration:.3s;
&__inner{
padding:30px;
span{
font-size:36px;
font-weight:700;
}
.progress{
width:100%;
margin-top:10px;
height:6px;
background:rgba(0, 0, 0, 0.3);
margin-bottom:15px;
&_graph{
float: right;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
width: 85px;
text-align: center;
position: relative;
padding-left: 20px;
top: 24px;
&__bar--1{
width:10px;
height:20px;
background:$background;float:left;margin-right:10px;position: relative;
bottom: -10px;-webkit-animation:graph 1s;
}
&__bar--2{
width:10px;-webkit-animation:graph2 1s;
height:30px;float:left;
margin-right:10px;
background:$background;
}
&__bar--3{
width:10px;
height:24px;margin-right:10px;-webkit-animation:graph3 1s;
background:$background;float:left;position: relative;
bottom: -6px;
}
&__bar--4{
width: 10px;
height: 14px;-webkit-animation:graph4 1s;
bottom: -16px;
position: relative;
background: $background;
float: left;
}
}
&_bar{
height:6px;float:left;
width:58%;
background:$background;
-webkit-animation:bar 2s;
}
&_bar--two{
height:6px;float:left;
width:78%;
background:$background;
-webkit-animation:bar2 2s;
}
}
}
h2{
font-weight:normal;
font-size:16px;
margin:-4px 0px 3px 0px;
}
p{
font-size:11px;
color:rgb(182, 182, 182);clear: left;
font-weight:300;
width:160px;
margin:2px 0px 15px 0px;
}
&:hover{
background:$background;
transform:scale(1.1);
transition-property:transform,background;
transition-duration:.3s;
position:relative;
z-index:1
}
}
}
}
.ui_box:hover > .ui_box__inner p{
color:lighten($background,30%);
}
.ui_box:hover > .drop{
transition-property:bottom,opacity;
transition-duration:.3s;
bottom:-42px;
opacity:1;
}
.ui_box:hover > .drop .arrow{
transition-property:transform;
transition-duration:1s;
transform:rotate(765deg);
}
.ui_box:hover > .ui_box__inner .progress_graph > div{
background:white;
}
.ui_box:hover > .ui_box__inner .progress .progress_bar,.ui_box:hover > .ui_box__inner .progress .progress_bar--two{
background:white;
}
.stat_left{float:left;}
.arrow{
width: 4px;
height: 4px;
transition-property:transform;
transition-duration:1s;
transform:rotate(45deg);
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 1px solid #CDEAD3;
border-right: 1px solid #CDEAD3;
float: right;
position: relative;
top: -24px;
right: 0px;
}
@keyframes bar{
from{width:0px}
to{width:58%;}
}
@keyframes bar2{
from{width:0px}
to{width:78%;}
}
@keyframes graph{
from{height:0px}
to{height:20px}
}
@keyframes graph2{
from{height:0px}
to{height:30px}
}
@keyframes graph3{
from{height:0px}
to{height:24px}
}
@keyframes graph4{
from{height:0px}
to{height:13px}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment