| $chart-nav-width: 180px; |
| $chart-icon-width: 32px; |
| $chart-icon-border: 1px; |
| |
| #left-chart-nav { |
| position: fixed; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| |
| padding-top: $nav-height; |
| width: $chart-nav-width; |
| |
| background-color: $clr-primary; |
| overflow-y: hidden; |
| |
| &:hover { |
| overflow-y: auto; |
| } |
| |
| li { |
| height: 54px; |
| padding: 10px 0 10px 20px; |
| transition: 0.5s; |
| |
| a { |
| color: $clr-gray; |
| position: relative; |
| display: block; |
| transition: 0.5s; |
| |
| .chart-name { |
| display: inline-block; |
| position: relative; |
| top: -12px; |
| margin-left: 10px; |
| } |
| |
| .chart-icon { |
| content: ''; |
| display: inline-block; |
| width: $chart-icon-width; |
| height: $chart-icon-width; |
| background-image: url('../images/chart-icon.png'); |
| background-size: $chart-icon-width; |
| background-repeat: no-repeat; |
| border-radius: 50%; |
| border: $chart-icon-border solid $clr-gray-dark; |
| } |
| } |
| |
| &.active { |
| background-color: $clr-contrast; |
| |
| a { |
| color: $clr-gray-light; |
| } |
| |
| .chart-icon { |
| border-color: $clr-gray-light; |
| } |
| } |
| |
| &:hover { |
| background-color: $clr-primary-dark; |
| } |
| } |
| } |
| |
| @media (max-width: 768px) { |
| #left-chart-nav { |
| display: none; |
| } |
| } |
| |
| |
| |
| // icon sprites |
| $chart-types: 'line', 'bar', 'scatter', 'pie', 'radar', 'funnel', 'gauge', 'map', |
| 'graph', 'treemap', 'parallel', 'sankey', 'candlestick', 'boxplot', 'heatmap', |
| 'pictorialBar', 'themeRiver', 'calendar', 'custom', 'sunburst', 'tree', |
| 'globe', 'bar3D', 'scatter3D', 'surface', 'map3D', 'lines3D', 'line3D', |
| 'scatterGL', 'linesGL', 'flowGL', 'graphGL', 'geo3D', 'geo', 'lines', 'dataset'; |
| $chart-position: 0, 1, 2, 4, 5, 10, 9, 8, 7, 15, 16, 17, 3, 18, 11, 24, 25, 26, 27, 28, 14, |
| 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 8, 20, 22; |
| |
| @each $type in $chart-types { |
| $i: index($chart-types, $type); |
| $pos: nth($chart-position, $i); |
| #left-chart-nav-#{$type} .chart-icon { |
| background-position-x: - $chart-icon-border; |
| background-position-y: - $chart-icon-border - $pos * $chart-icon-width; |
| } |
| } |