| |
| @import '//fonts.googleapis.com/css?family=Roboto:400,700'; |
| |
| /* |
| * Chart components layout |
| */ |
| |
| .chart-wrapper { |
| font-family: 'Roboto'; |
| display: block; |
| } |
| |
| .chart-host-wrapper { |
| display: flex; |
| width: 100%; |
| } |
| |
| .chart-host { |
| display: block; |
| width: 70%; |
| } |
| |
| .chart-legend-host { |
| display: block; |
| width: 30%; |
| } |
| |
| /* |
| * Chart title |
| */ |
| |
| .chart-title-wrapper { |
| margin-bottom: 26px; /* charts adds an extra 10px */ |
| } |
| |
| .chart-title { |
| font-size: 16px; |
| color: #757575; |
| margin-bottom: 8px; |
| } |
| |
| .chart-subtitle { |
| font-size: 14px; |
| color: #BDBDBD; |
| } |
| |
| /* |
| * Styles for the SVG chart rendering |
| */ |
| |
| .chart-canvas { |
| font-family: 'Roboto'; |
| display: block; |
| } |
| |
| .chart-axis-label { |
| font-size: 12px; |
| color: #424242; |
| } |
| |
| .chart-axis-label-tooltip { |
| color: white; |
| opacity: 0; |
| transition: opacity .25s; |
| background-color: black; |
| position: absolute; |
| padding: 4px; |
| border-radius: 2px; |
| z-index: 9999; |
| } |
| |
| .chart-axis-text, |
| .dimension-axis-group text, .measure-axis-group text { |
| font-size: 12px; |
| fill: #757575; |
| stroke: none; |
| } |
| |
| /* |
| * Styles for the legend. |
| */ |
| |
| .chart-legend-row, |
| .chart-legend-more { |
| width: 100%; |
| display: flex; |
| font-size: 14px; |
| margin-bottom: 16px; |
| position: relative; |
| padding-left: 20px; |
| cursor: default; |
| } |
| |
| .chart-legend-title { |
| color: #838383; |
| } |
| |
| .chart-legend-subtitle { |
| color: #C1C1C1; |
| } |
| |
| .chart-legend-selected, |
| .chart-legend-hover { |
| color: #434343; |
| } |
| |
| .chart-legend-more-row { |
| white-space: nowrap; |
| display: flex; |
| font-size: 14px; |
| margin-top: 10px; |
| } |
| |
| .chart-legend-more-row:first-child { |
| margin-top: 0px; |
| } |
| |
| .chart-legend-label { |
| flex-basis: 80px; |
| max-width: 120px; |
| } |
| |
| .chart-legend-color, |
| .chart-legend-more-color { |
| width: 12px; |
| height: 12px; |
| margin: auto 8px; |
| border-radius: 2px; |
| } |
| .type-line-rdr > .chart-legend-color { |
| height: 4px; |
| } |
| .type-pie-rdr > .chart-legend-color { |
| border-radius: 6px; |
| } |
| |
| .chart-legend-more-tooltip { |
| position: absolute; |
| left: 70px; |
| padding: 10px; |
| top: 0px; |
| border-radius: 2px; |
| border: 1px solid #C1C1C1; |
| box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); |
| z-index: 9999; |
| background-color: white; |
| font-size: 14px; |
| pointer-events: none; |
| opacity: 0; |
| transition: opacity .4s; |
| } |
| |
| /* |
| * Axes styles |
| */ |
| |
| .tick line, .domain { |
| fill: none; |
| stroke: #E0E0E0; |
| stroke-width: 1px; |
| shape-rendering: crispEdges; |
| } |
| |
| .measure-axis-group .domain { |
| stroke-width: 0; |
| } |
| |
| .dimension-axis-group .domain { |
| stroke: #9E9E9E; |
| } |
| |
| /* |
| * Axis markers |
| */ |
| |
| .axis-marker { |
| stroke: #E0E0E0; |
| stroke-dasharray: 3 3; |
| } |
| |
| |
| /* |
| * Styles for LineChartRenderer |
| */ |
| |
| .line-rdr-line { |
| stroke-width: 2px; |
| transition: stroke-width .4s; |
| stroke-linecap: round; |
| } |
| |
| .line-rdr-line.col-selected { |
| stroke-width: 4px; |
| } |
| |
| .line-rdr-line.col-selected, |
| .line-rdr-line.col-previewed { |
| filter: url('#active-shadow'); |
| } |
| |
| .line-rdr-point { |
| opacity: 0; |
| transition: opacity .2s; |
| } |
| |
| /* |
| * Styles for BarChartRenderer and StackedBarChartRenderer |
| */ |
| |
| .bar-rdr-bar.col-selected, |
| .bar-rdr-bar.col-previewed, |
| .stack-rdr-bar.col-selected, |
| .stack-rdr-bar.col-previewed, |
| .bar-rdr-bar.row-hovered, |
| .bar-rdr-bar.row-highlighted, |
| .stack-rdr-bar.row-hovered, |
| .stack-rdr-bar.row-highlighted { |
| filter: url('#active-shadow'); |
| } |
| |
| /* |
| * Styles for the tooltip. |
| */ |
| |
| .tooltip { |
| opacity: 0; |
| display: flex; |
| flex-direction: column; |
| position: absolute; |
| border-radius: 2px; |
| border: 1px solid #C1C1C1; |
| padding: 20px; |
| box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); |
| z-index: 9999; |
| background-color: white; |
| font-size: 14px; |
| pointer-events: none; |
| transition: opacity .25s; |
| } |
| |
| .tooltip-title { |
| color: #434343; |
| font-weight: bold; |
| margin-bottom: 16px; |
| } |
| |
| .tooltip-total { |
| color: #636363; |
| font-weight: bold; |
| margin-bottom: 16px; |
| } |
| |
| .tooltip-item { |
| white-space: nowrap; |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| color: #838383; |
| margin-bottom: 16px; |
| } |
| |
| .tooltip-item:last-child { |
| margin-bottom: 0px; |
| } |
| |
| .tooltip .tooltip-item-value { |
| margin-left: 20px; |
| margin-right: 0; |
| } |
| .tooltip.rtl .tooltip-item-value { |
| margin-left: 0; |
| margin-right: 20px; |
| } |