status-im
/
burnchart
mirror of https://github.com/status-im/burnchart.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve style

This commit is contained in:
Radek Stepan 2013-09-26 22:35:54 +01:00
parent 5841eb2c46
commit 8873441737
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/styles/app.styl
View File

@ -1,13 +1,18 @@
// color definitions
$closed = #4DAF7C $closed = #4DAF7C
$opened = #E55F3A $opened = #E55F3A
$grey = #E2E2E2 $grey = #CACACA
$ideal = $grey $brown = #64584C
// font and gradient bg
body body
font-family: 'Source Sans Pro', sans-serif height: 100%
background: linear-gradient(135deg, #d7bcab 0%, #cc9485 100%) background: linear-gradient(135deg, #d7bcab 0%, #cc9485 100%)
background-repeat: no-repeat
background-attachment: fixed
font-family: 'Source Sans Pro', sans-serif
padding: 100px padding: 100px
color: #64584C color: $brown
ul ul
list-style-type: none list-style-type: none
@ -20,10 +25,12 @@ h2
font-size: 16px font-size: 16px
text-transform: uppercase text-transform: uppercase
// the white content box
.box .box
background: #FFF background: #FFF
box-shadow: 2px 4px 6px rgba(0,0,0,0.2) box-shadow: 2px 4px 6px rgba(0,0,0,0.2)
// different classes thereof
&.generic, &.info, &.error, &.success &.generic, &.info, &.error, &.success
border-top: 4px solid #EAC85D border-top: 4px solid #EAC85D
padding: 20px padding: 20px
@ -40,19 +47,21 @@ h2
border-top-color: #4DB07A border-top-color: #4DB07A
a a
color: #64584C color: $brown
h1 h1
margin: 0 margin: 0
padding: 20px padding: 20px
color: #64584c color: $brown
font-size: 20px font-size: 20px
text-transform: uppercase text-transform: uppercase
// where D3 renders to
#graph #graph
height: 200px height: 200px
position: relative position: relative
// position will be adjusted dynamically
#tooltip #tooltip
position: absolute position: absolute
top: 0 top: 0
@ -65,50 +74,59 @@ h2
stroke-width: 1px stroke-width: 1px
clip-path: url(#clip) clip-path: url(#clip)
// actual progress
&.actual &.actual
stroke: #64584c stroke: $brown
stroke-width: 3px stroke-width: 3px
// ideal velocity throughout the sprint
&.ideal &.ideal
stroke: #CACACA stroke: $grey
stroke-width: 3px stroke-width: 3px
// trend of actual issue closures
&.trendline &.trendline
stroke: #64584c stroke: $brown
stroke-width: 1.5px stroke-width: 1.5px
stroke-dasharray: 5,5 stroke-dasharray: 5,5
// right now
line line
&.today &.today
stroke: #CACACA stroke: $grey
stroke-width: 1px stroke-width: 1px
shape-rendering: crispEdges shape-rendering: crispEdges
stroke-dasharray: 5,5 stroke-dasharray: 5,5
// represents one issue closed
circle circle
fill: #64584c fill: $brown
// make it easier to click
stroke: transparent stroke: transparent
stroke-width: 15px stroke-width: 15px
cursor: pointer cursor: pointer
// axes...
.axis .axis
shape-rendering: crispEdges shape-rendering: crispEdges
line line
stroke: rgba(#CACACA, 0.25) stroke: rgba($grey, 0.25)
shape-rendering: crispEdges shape-rendering: crispEdges
text text
font-weight: bold font-weight: bold
fill: #CACACA fill: $grey
path path
display: none display: none
// progression graph
#progress #progress
padding: 20px padding: 20px
border-radius: 0 0 6px 6px border-radius: 0 0 6px 6px
// clear
&:after &:after
clear: both clear: both
display: block display: block
@ -117,6 +135,7 @@ h2
.bars .bars
position: relative position: relative
// the two bars
div div
border-radius: 6px border-radius: 6px
height: 12px height: 12px
@ -127,6 +146,7 @@ h2
left: 0 left: 0
background: $closed background: $closed
// when we have issues left
&:not(.done) &:not(.done)
border-radius: 6px 0 0 6px border-radius: 6px 0 0 6px