| $chart-nav-width: 180px; |
| $chart-icon-width: 32px; |
| $chart-icon-border: 1px; |
| |
| #left-chart-nav { |
| position: fixed; |
| top: 49px; |
| bottom: 0; |
| left: 0; |
| border-top: 1px solid $clr-primary-darker; |
| |
| // padding-top: $nav-height; |
| width: $chart-nav-width; |
| |
| background-color: $clr-primary; |
| overflow-y: hidden; |
| z-index: 15; |
| |
| &:hover { |
| overflow-y: auto; |
| } |
| |
| ul { |
| padding: 0; |
| } |
| |
| li { |
| height: 54px; |
| transition: 0.5s; |
| padding: 0; |
| |
| a { |
| display: block; |
| padding: 10px 15px; |
| color: #ccc; |
| 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-light; |
| } |
| } |
| |
| &.active { |
| background-color: $clr-contrast; |
| |
| a { |
| color: $clr-lightest; |
| } |
| |
| .chart-icon { |
| border-color: $clr-lightest; |
| } |
| } |
| |
| &:hover { |
| background-color: $clr-primary-dark; |
| |
| &.active { |
| background-color: $clr-contrast; |
| } |
| } |
| } |
| } |
| |
| @media (max-width: 768px) { |
| #left-chart-nav { |
| display: none; |
| } |
| } |
| |
| #nav-mask { |
| display: none; |
| position: fixed; |
| top: 50px; |
| left: 155px; |
| bottom: 0; |
| right: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, .3); |
| z-index: 12; |
| } |
| #nav-layer { |
| display: none; |
| position: fixed; |
| width: 620px; |
| max-height: 350px; |
| left: $chart-nav-width; |
| top: 200px; |
| z-index: 15; |
| background-color: #fff; |
| overflow-y: scroll; |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); |
| |
| .chart-list { |
| @include clearfix; |
| width: 100%; |
| clear: both; |
| padding: 10px; |
| box-sizing: border-box; |
| } |
| li { |
| float: left; |
| width: 180px; |
| margin: 10px 10px; |
| padding: 5px; |
| // border-radius: 10px; |
| // border: 1px solid rgba(0, 0, 0, .2); |
| box-shadow: 0 0 1px rgba(0, 0, 0, .3); |
| transition: box-shadow 0.5s ease-out; |
| &:hover { |
| box-shadow: 0 0 20px rgba(0, 0, 0, .3); |
| } |
| } |
| img { |
| width: 100%; |
| height: 100%; |
| } |
| } |
| |
| |
| |
| // icon sprites |
| $chart-types: 'line', 'bar', 'scatter', 'pie', 'radar', 'funnel', 'gauge', 'map', |
| 'graph', 'treemap', 'parallel', 'sankey', 'candlestick', 'boxplot', 'heatmap', |
| 'pictorialBar', 'themeRiver', 'calendar', 'custom', 'sunburst', 'gl', 'tree'; |
| $chart-position: 0, 1, 2, 4, 5, 10, 9, 8, 7, 15, 16, 17, 3, 18, 11, 24, 25, 26, 27, 28, 29, 14; |
| |
| @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; |
| } |
| } |