ignite-ui/css/themes/infragistics/modules/infragistics.ui.chart.less

Ignite UI for jQuery by Infragistics

/***********/
/* igChart */
/***********/

.ui-chart-palette-1 {
  .chartPalette1;
}

.ui-chart-palette-2 {
  .chartPalette2;
}

.ui-chart-palette-3 {
  .chartPalette3;
}

.ui-chart-palette-4 {
  .chartPalette4;
}

.ui-chart-palette-5 {
  .chartPalette5;
}

.ui-chart-palette-6 {
  .chartPalette6;
}

.ui-chart-palette-7 {
  .chartPalette7;
}

.ui-chart-palette-8 {
  .chartPalette8;
}

.ui-chart-palette-9 {
  .chartPalette9;
}

.ui-chart-palette-10 {
  .chartPalette10;
}

// NOTE: charts use a palette only with 10 colors
// .ui-chart-palette-11 {
//   .chartPalette11;
// }

// .ui-chart-palette-12 {
//   .chartPalette12;
// }

.ui-chart-maker-palette-1 {
  .chartMarkerPalette1;
}

.ui-chart-maker-palette-2 {
  .chartMarkerPalette2;
}

.ui-chart-maker-palette-3 {
  .chartMarkerPalette3;
}

.ui-chart-maker-palette-4 {
  .chartMarkerPalette4;
}

.ui-chart-maker-palette-5 {
  .chartMarkerPalette5;
}

.ui-chart-maker-palette-6 {
  .chartMarkerPalette6;
}

.ui-chart-maker-palette-7 {
  .chartMarkerPalette7;
}

.ui-chart-maker-palette-8 {
  .chartMarkerPalette8;
}

.ui-chart-maker-palette-9 {
  .chartMarkerPalette9;
}

.ui-chart-maker-palette-10 {
  .chartMarkerPalette10;
}

// NOTE: charts use a palette only with 10 colors
// .ui-chart-maker-palette-11 {
//   .chartMarkerPalette11;
// }

// .ui-chart-maker-palette-12 {
//   .chartMarkerPalette12;
// }
.ui-chart-legend,.ui-chart-piechart-container {
  border:none;
}
.ui-chart-piechart-container,
.ui-chart-legend-item-text {
  font-size: 12px;
  font-family: @font-family-base;
}


.ui-chart-toolbar .ui-slider-handle {
  height: 18px;
  margin-left: -6px!important;
  /* needed for map scenario */

  width: 12px;
  top: -6px!important;
}

.igTouch .ui-chart-toolbar .ui-slider-handle
{
  border: 1px solid @igGray10;
  background: @igGray9;
  margin-left: -15px;
  top: -15px;
}

.ui-chart-title {
  margin-bottom: 5px;
  text-align: center;
}

.ui-chart-subtitle {
  margin-bottom: 5px;
  text-align: center;
}

.ui-widget-content.ui-chart-tooltip {
  background-color: @chartToolTipBgColor;
  border:1px solid #888;

}
.ui-chart-innerlabels {
  color: #fff !important;
}
.ui-chart-outerlabels {
  color: #666 !important;
}

/******************/
/* Doughnut Chart */
/******************/
.ui-doughnut-palette-1 {
  .doughnutPalette1;
}

.ui-doughnut-palette-2 {
  .doughnutPalette2;
}

.ui-doughnut-palette-3 {
  .doughnutPalette3;
}

.ui-doughnut-palette-4 {
  .doughnutPalette4;
}

.ui-doughnut-palette-5 {
  .doughnutPalette5;
}

.ui-doughnut-palette-6 {
  .doughnutPalette6;
}

.ui-doughnut-palette-7 {
  .doughnutPalette7;
}

.ui-doughnut-palette-8 {
  .doughnutPalette8;
}

.ui-doughnut-palette-9 {
  .doughnutPalette9;
}

.ui-doughnut-palette-10 {
  .doughnutPalette10;
}

// NOTE: charts use a palette only with 10 colors
// .ui-doughnut-palette-11 {
//   .doughnutPalette11;
// }

// .ui-doughnut-palette-12 {
//   .doughnutPalette12;
// }

/*******************/
/* Sparkline chart */
/*******************/

.ui-sparkline {
  font-family: @font-family-base;
  font-size: 13px;
  padding: 10px 5px 10px 5px;
  border: 0px;
}

.ui-sparkline-tooltip {
  background-color: @chartToolTipBgColor;
  .boxShadow2;
  border:1px solid #888;
  padding: 5px 8px;
}

.ui-sparkline-sparkpath {
  background: #8BDC5C;
  border: 1px solid;
}

.ui-sparkline-negativesparkpath {
  background: #ee5879;
  border: 1px solid;
}

.ui-sparkline-trendline {
  background: #7f7f7f;
  border: 2px solid;
}

.ui-sparkline-markers {
  background: #8961A9;
  border: 3px solid;
}

.ui-sparkline-firstmarker {
  background: #82E9D9;
  border: 5px solid;
}

.ui-sparkline-lastmarker {
  background: #ee5879;
  border: 5px solid;
}

.ui-sparkline-highmarker {
  background: #6DB1FF;
  border: 4px solid;
}

.ui-sparkline-lowmarker {
  background: #F8CE4F;
  border: 3px solid;
}

.ui-sparkline-negativemarkers {
  background: #ee5879;
  border: 3px solid;
}

.ui-sparkline-range {
  background: gray;
  opacity: 0.2;
}

.ui-sparkline-axis-x {
  font-family: @font-family-base;
  border: 2px solid #666;
  color: #777;
  text-transform: uppercase;
}

.ui-sparkline-axis-y {
  font-family: @font-family-base;
  border: 2px solid #666;
  color: #777;
  text-align: right;
  text-transform: uppercase;
}
/****************/
/* Funnel chart */
/****************/

.ui-funnel {
  font-family: @font-family-base;
  font-size: 12px;
  color: #666;
  border: 0px;
}

.ui-funnel-tooltip {
  background-color: @chartToolTipBgColor;
  .boxShadow2;
  border:1px solid #888;
  padding: 5px 8px;
}

.ui-funnel-slice {
  color: #FFFFFF;
  border: 0;
}

.ui-funnel-slice-selected {
  opacity: 1.0;
}

.ui-funnel-slice-unselected {
  opacity: 0.49;
  border-color: transparent;
}
/********************/
/* igDoughnut Chart */
/********************/

.ui-doughnut {
  border: 0px;
  font-size: 12px;
  font-family: @font-family-base;
}

.ui-doughnut-tooltip {
  background-color: @chartToolTipBgColor;
  .boxShadow2;
  border:1px solid #888;
  padding: 5px 8px;
}


/***********************/
/* igRadialGauge Chart */
/***********************/

.ui-radialgauge-needle {
  background-color: #999999;
  border-color: #FFFFFF;
}

.ui-radialgauge-needlePivot {
  background-color: #999999;
  border-color: #FFFFFF;
}

.ui-radialgauge-backing {
  background-color: #FFFFFF;
  border: #cccccc;
}

.ui-radialgauge-scale {
  background-color: transparent;
  border: none;
}

.ui-radialgauge-tick {
  background-color: rgba(0, 0, 0, 0.35);
  border-top-color: none;
}

.ui-radialgauge-minorTick {
  background-color: rgba(0, 0, 0, 0.2);
  border: none;
}

.ui-radialgauge-label {
  background-color: #666;
  border: none;
}

.ui-radialgauge-range-palette-1 {
  background-color: #005E9C;
  border-top-color: transparent;
}

.ui-radialgauge-range-palette-2 {
  background-color: #0078C8;
  border-top-color: transparent;
}

.ui-radialgauge-range-palette-3 {
  background-color: #0092F4;
  border-top-color: transparent;
}

.ui-radialgauge-range-palette-4 {
  background-color: #21A7FF;
  border-top-color: transparent;
}

.ui-radialgauge-range-palette-5 {
  background-color: #4FB9FF;
  border-top-color: transparent;
}

.ui-radialgauge-container {
  font-family: Verdana;
  font-size: 11px;
}
/***********************/
/* igBulletGraph Chart */
/***********************/

.ui-bulletgraph-backing {
  background-color: #ffffff;
  border-color: #ffffff;
}

.ui-bulletgraph-targetvalue {
  background-color: #333333;
  border-color: transparent;
}

/* TICKS AND LABELS */
.ui-bulletgraph-tick {
  background-color: rgba(0, 0, 0, 0.35);
  border: transparent;
}

.ui-bulletgraph-minortick {
  background-color: rgba(0, 0, 0, 0.2);
  border: transparent;
}

.ui-bulletgraph-label {
  background-color: #666;
  border: transparent;
}

/* RANGE VALUES */
.ui-bulletgraph-range-palette-1 {
  background-color: #005E9C;
  border: transparent;
}

.ui-bulletgraph-range-palette-2 {
  background-color: #0078C8;
  border: transparent;
}

.ui-bulletgraph-range-palette-3 {
  background-color: #0092F4;
  border: transparent;
}

.ui-bulletgraph-range-palette-4 {
  background-color: #21A7FF;
  border: transparent;
}

.ui-bulletgraph-range-palette-5 {
  background-color: #4FB9FF;
  border: transparent;
}

/* ACTUAL VALUES */
.ui-bulletgraph-value {
  background-color: #333333;
  border: transparent;
}

/* TOOLTIPS */
.ui-bulletgraph-tooltip {
  border-style: none;
  white-space: nowrap;
  background-color: transparent;
}

.ui-bulletgraph-range-tooltip {
  border-style: solid;
  border-width: 2px;
  background-color: rgba(230, 230, 230, 0.74);
  padding: 4px;
  font-weight: bold;
}

.ui-bulletgraph-value-tooltip {
  border-style: solid;
  border-width: 2px;
  background-color: rgba(230, 230, 230, 0.74);
  padding: 4px;
  font-weight: bold;
}

.ui-bulletgraph-targetvalue-tooltip {
  border-style: solid;
  border-width: 2px;
  background-color: rgba(230, 230, 230, 0.74);
  padding: 4px;
  font-weight: bold;
}

.ui-bulletgraph-container {
  font-family: Verdana;
  font-size: 11px;
}

/***********************/
/* igLinearGauge Chart */
/***********************/

.ui-lineargauge-backing {
  background-color: #ffffff;
  border-color: #ffffff;
}

.ui-lineargauge-needle {
  background-color: #999999;
  border-color: #FFFFFF;
}

.ui-lineargauge-scale {
  background-color: transparent;
  border-color: transparent;
}

/* TICKS AND LABELS */
.ui-lineargauge-tick {
  background-color: rgba(0, 0, 0, 0.35);
  border: transparent;
}

.ui-lineargauge-minortick {
  background-color: rgba(0, 0, 0, 0.2);
  border: transparent;
}

.ui-lineargauge-label {
  background-color: #666;
  border: transparent;
}

/* RANGE VALUES */
.ui-lineargauge-range-palette-1 {
  background-color: #005E9C;
  border: transparent;
}

.ui-lineargauge-range-palette-2 {
  background-color: #0078C8;
  border: transparent;
}

.ui-lineargauge-range-palette-3 {
  background-color: #0092F4;
  border: transparent;
}

.ui-lineargauge-range-palette-4 {
  background-color: #21A7FF;
  border: transparent;
}

.ui-lineargauge-range-palette-5 {
  background-color: #4FB9FF;
  border: transparent;
}

/* TOOLTIPS */
.ui-lineargauge-tooltip {
  border-style: none;
  white-space: nowrap;
  background-color: transparent;
}

.ui-lineargauge-range-tooltip {
  border-style: solid;
  border-width: 2px;
  background-color: rgba(230, 230, 230, 0.74);
  padding: 4px;
  font-weight: bold;
}

.ui-lineargauge-needle-tooltip {
  border-style: solid;
  border-width: 2px;
  background-color: rgba(230, 230, 230, 0.74);
  padding: 4px;
  font-weight: bold;
}

.ui-lineargauge-container {
  font-family: Verdana;
  font-size: 11px;
}