first commit
This commit is contained in:
@@ -0,0 +1,216 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3 charts
|
||||
*
|
||||
* Styles for C3.js visualization library
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
.c3 {
|
||||
|
||||
// Use smaller text
|
||||
svg {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Paths and lines defaults
|
||||
path,
|
||||
line {
|
||||
fill: none;
|
||||
stroke: @text-muted;
|
||||
}
|
||||
path.domain {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Disable text selection
|
||||
text {
|
||||
.user-select(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Components
|
||||
// ------------------------------
|
||||
|
||||
// Default shape rendering style
|
||||
.c3-legend-item-tile,
|
||||
.c3-xgrid-focus,
|
||||
.c3-ygrid,
|
||||
.c3-event-rect,
|
||||
.c3-bars path {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Arcs
|
||||
.c3-chart-arc {
|
||||
path {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
text {
|
||||
fill: #fff;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.c3-grid {
|
||||
line {
|
||||
stroke: #aaa;
|
||||
}
|
||||
|
||||
text {
|
||||
fill: #aaa;
|
||||
}
|
||||
}
|
||||
.c3-xgrid,
|
||||
.c3-ygrid {
|
||||
stroke-dasharray: 3 3;
|
||||
}
|
||||
|
||||
// Text on chart
|
||||
.c3-text {
|
||||
font-weight: 500;
|
||||
|
||||
&.c3-empty {
|
||||
fill: #808080;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Line
|
||||
.c3-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
// Area
|
||||
.c3-area {
|
||||
stroke-width: 0;
|
||||
.opacity(0.4);
|
||||
}
|
||||
|
||||
// Point
|
||||
.c3-circle._expanded_ {
|
||||
stroke-width: 1.5px;
|
||||
stroke: #fff;
|
||||
}
|
||||
.c3-selected-circle {
|
||||
fill: #fff;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
// Bar
|
||||
.c3-bar {
|
||||
stroke-width: 0;
|
||||
|
||||
&._expanded_ {
|
||||
fill-opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
// Arc
|
||||
.c3-chart-arcs-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.c3-chart-arcs {
|
||||
.c3-chart-arcs-background {
|
||||
fill: #e0e0e0;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.c3-chart-arcs-gauge-unit {
|
||||
fill: @text-color;
|
||||
font-size: @font-size-h6;
|
||||
}
|
||||
|
||||
.c3-chart-arcs-gauge-max,
|
||||
.c3-chart-arcs-gauge-min {
|
||||
fill: @gray-light;
|
||||
}
|
||||
}
|
||||
.c3-chart-arc .c3-gauge-value {
|
||||
fill: @text-color;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
// Focus
|
||||
.c3-target {
|
||||
&.c3-focused {
|
||||
.opacity(1);
|
||||
|
||||
path.c3-line,
|
||||
path.c3-step {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.c3-defocused {
|
||||
.opacity(0.3)!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Region
|
||||
.c3-region {
|
||||
fill: @color-slate-600;
|
||||
fill-opacity: .1;
|
||||
}
|
||||
|
||||
// Brush
|
||||
.c3-brush .extent {
|
||||
fill-opacity: .1;
|
||||
}
|
||||
|
||||
// Legend
|
||||
.c3-legend-item {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
.c3-legend-background {
|
||||
fill: #fff;
|
||||
stroke: lightgray;
|
||||
stroke-width: 1;
|
||||
.opacity(0.75);
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
.c3-tooltip {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background-color: #fff;
|
||||
empty-cells: show;
|
||||
.opacity(0.95);
|
||||
|
||||
th {
|
||||
background-color: #333;
|
||||
padding: 4px 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: 1px solid #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: @font-size-small;
|
||||
padding: 6px 10px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Chart styling
|
||||
*
|
||||
* Charts base - container and sizing setup
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
// Add scroll
|
||||
&.has-scroll {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Add scroll for all charts on mobile to hide overflow
|
||||
@media (max-width: @screen-xs-max) {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Chart itself
|
||||
.chart {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
direction: ltr;
|
||||
|
||||
// Give chart min width
|
||||
&.has-minimum-width {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
// Give chart fixed height
|
||||
.has-fixed-height {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
// Pie charts
|
||||
.chart-pie {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
min-width: 500px;
|
||||
}
|
||||
@@ -0,0 +1,431 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js library
|
||||
*
|
||||
* Basic styles for D3.js visualization library
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Apr 25, 2017
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Axis
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.d3-axis {
|
||||
|
||||
// Path
|
||||
path {
|
||||
fill: none;
|
||||
stroke: @text-muted;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Line
|
||||
line {
|
||||
stroke: @gray-lighter;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.tick {
|
||||
&,
|
||||
text {
|
||||
font-size: @font-size-small;
|
||||
fill: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Lighter axis text
|
||||
.d3-axis-solid {
|
||||
path,
|
||||
line {
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.tick {
|
||||
fill: @text-muted;
|
||||
|
||||
text {
|
||||
fill: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stronger axis text
|
||||
.d3-axis-strong {
|
||||
path,
|
||||
line {
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.tick {
|
||||
fill: @text-color;
|
||||
|
||||
text {
|
||||
fill: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent axis
|
||||
.d3-axis-transparent {
|
||||
|
||||
// Hide path
|
||||
path {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
// Hide line
|
||||
line {
|
||||
stroke: #e5e5e5;
|
||||
}
|
||||
|
||||
// Change tick colors
|
||||
.tick {
|
||||
fill: @text-muted;
|
||||
|
||||
text {
|
||||
fill: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Tooltip
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Basic tooltip
|
||||
//
|
||||
|
||||
// Base
|
||||
.d3-tip {
|
||||
position: absolute;
|
||||
padding: (@padding-base-vertical + 1) @padding-large-horizontal;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @tooltip-bg;
|
||||
color: @tooltip-color;
|
||||
margin-bottom: -(@tooltip-arrow-width - 1);
|
||||
font-size: @font-size-small;
|
||||
z-index: @zindex-tooltip;
|
||||
|
||||
// Arrow
|
||||
.d3-tip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip positioning
|
||||
.d3-tip {
|
||||
&.n .d3-tip-arrow {
|
||||
bottom: -(@tooltip-arrow-width);
|
||||
left: 50%;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
&.e .d3-tip-arrow {
|
||||
top: 50%;
|
||||
left: -(@tooltip-arrow-width);
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-right-color: @tooltip-arrow-color;
|
||||
}
|
||||
&.w .d3-tip-arrow {
|
||||
top: 50%;
|
||||
right: -(@tooltip-arrow-width);
|
||||
margin-top: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-left-color: @tooltip-arrow-color;
|
||||
}
|
||||
&.s .d3-tip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||
border-bottom-color: @tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Venn diagram tooltip
|
||||
//
|
||||
|
||||
// Base
|
||||
.venntooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
min-width: 60px;
|
||||
white-space: nowrap;
|
||||
background-color: @tooltip-bg;
|
||||
color: @tooltip-color;
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
border-radius: @border-radius-base;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Chart types
|
||||
// ------------------------------
|
||||
|
||||
// Lines
|
||||
.d3-line {
|
||||
fill: none;
|
||||
|
||||
// Thin stroke
|
||||
&-thin {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
// Medium stroke
|
||||
&-medium {
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
// Strong stroke
|
||||
&-strong {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Line circles
|
||||
.d3-line-circle {
|
||||
fill: none;
|
||||
cursor: pointer;
|
||||
|
||||
// Thin stroke
|
||||
&-thin {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
// Medium stroke
|
||||
&-medium {
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
// Strong stroke
|
||||
&-strong {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Grid
|
||||
// ------------------------------
|
||||
|
||||
// Basic grid
|
||||
.d3-grid {
|
||||
.tick {
|
||||
line {
|
||||
stroke-width: 1px;
|
||||
stroke: #e5e5e5;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
text {
|
||||
fill: @text-color;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dashed grid
|
||||
.d3-grid-dashed {
|
||||
.tick {
|
||||
stroke-dasharray: 4,2;
|
||||
stroke-width: 1px;
|
||||
stroke: #e5e5e5;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Components
|
||||
// ------------------------------
|
||||
|
||||
// Crosshair overlay
|
||||
.d3-crosshair-overlay {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Bullets
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
|
||||
// Ticks
|
||||
.bullet-tick {
|
||||
|
||||
// Line styles
|
||||
line {
|
||||
stroke: @text-muted;
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Text styles
|
||||
text {
|
||||
fill: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-marker {
|
||||
stroke-width: 2px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
// Title
|
||||
.bullet-title {
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Subtitle
|
||||
.bullet-subtitle {
|
||||
fill: @text-muted;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// First bullet
|
||||
//
|
||||
|
||||
// Ranges
|
||||
.bullet-1 .bullet-range-1 {
|
||||
fill: fade(@color-slate-500, 80%);
|
||||
}
|
||||
.bullet-1 .bullet-range-2 {
|
||||
fill: fade(@color-slate-500, 40%);
|
||||
}
|
||||
.bullet-1 .bullet-range-3 {
|
||||
fill: @color-slate-500;
|
||||
}
|
||||
|
||||
// Measures
|
||||
.bullet-1 .bullet-measure-1 {
|
||||
fill: fade(@color-slate-600, 90%);
|
||||
}
|
||||
.bullet-1 .bullet-measure-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-1 .bullet-marker {
|
||||
stroke: @color-slate-800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Second bullet
|
||||
//
|
||||
|
||||
// Ranges
|
||||
.bullet-2 .bullet-range-1 {
|
||||
fill: fade(@color-warning-400, 60%);
|
||||
}
|
||||
.bullet-2 .bullet-range-2 {
|
||||
fill: fade(@color-warning-400, 30%);
|
||||
}
|
||||
.bullet-2 .bullet-range-3 {
|
||||
fill: @color-warning-400;
|
||||
}
|
||||
|
||||
// Measures
|
||||
.bullet-2 .bullet-measure-1 {
|
||||
fill: fade(@color-warning-600, 90%);
|
||||
}
|
||||
.bullet-2 .bullet-measure-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-2 .bullet-marker {
|
||||
stroke: @color-warning-800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Third bullet
|
||||
//
|
||||
|
||||
// Ranges
|
||||
.bullet-3 .bullet-range-1 {
|
||||
fill: fade(@color-success-400, 70%);
|
||||
}
|
||||
.bullet-3 .bullet-range-2 {
|
||||
fill: fade(@color-success-400, 35%);
|
||||
}
|
||||
.bullet-3 .bullet-range-3 {
|
||||
fill: @color-success-400;
|
||||
}
|
||||
|
||||
// Measures
|
||||
.bullet-3 .bullet-measure-1 {
|
||||
fill: fade(@color-success-600, 90%);
|
||||
}
|
||||
.bullet-3 .bullet-measure-2 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.bullet-3 .bullet-marker {
|
||||
stroke: @color-success-800;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Progress counter icon. Styles moved to
|
||||
// CSS, because IE9 drove me crazy...
|
||||
// ------------------------------
|
||||
|
||||
.counter-icon {
|
||||
font-size: (@icon-font-size * 2);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -(@icon-font-size);
|
||||
}
|
||||
|
||||
|
||||
// Legend
|
||||
// ------------------------------
|
||||
|
||||
.chart-widget-legend {
|
||||
margin: @content-padding-small 0 0 0;
|
||||
padding: 0;
|
||||
font-size: @font-size-small;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
margin: 5px 10px 0;
|
||||
padding: 7px 8px 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Sparklines library
|
||||
*
|
||||
* Generate sparklines (small inline charts) directly in the browser
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Core
|
||||
.jqsfield {
|
||||
font-size: @font-size-small!important;
|
||||
font-family: 'Roboto', sans-serif!important;
|
||||
}
|
||||
|
||||
|
||||
// Tooltip
|
||||
.jqstooltip {
|
||||
font-size: @font-size-small !important;
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
padding: @padding-base-vertical !important;
|
||||
line-height: @line-height-small !important;
|
||||
border: 0 !important;
|
||||
border-radius: @border-radius-base !important;
|
||||
.box-sizing(content-box);
|
||||
}
|
||||
Reference in New Issue
Block a user