ignite-ui/css/themes/infragistics/mixins.less

Ignite UI for jQuery by Infragistics

/* states */

.stateNormal {
  border: 1px solid @igGray5;
  background-color: @igGray3;
  color: @text-color;
}
.stateHover {
  border: 1px solid @igGray7;
  background-color: @igGray6;
  color: @text-color;
}

.stateActive {
  border: 1px solid @accent2;
  background-color: @accent1;
  color: @text-color;
}

.stateFocused {
  border: 1px solid @accent2;
  background-color: @igGray3;
  color: @text-color;
}


// Gradual palette

.chartPalette1 {
  background-color: @chartGradualPalette1!important;
  border: 1px solid @chartGradualPalette1!important;
}

.chartPalette2 {
  background-color: @chartGradualPalette2!important;
  border: 1px solid @chartGradualPalette2!important;
}

.chartPalette3 {
  background-color: @chartGradualPalette3!important;
  border: 1px solid @chartGradualPalette3!important;
}

.chartPalette4 {
  background-color: @chartGradualPalette4!important;
  border: 1px solid @chartGradualPalette4!important;
}

.chartPalette5 {
  background-color: @chartGradualPalette5!important;
  border: 1px solid @chartGradualPalette5!important;
}

.chartPalette6 {
  background-color: @chartGradualPalette6!important;
  border: 1px solid @chartGradualPalette6!important;
}

.chartPalette7 {
  background-color: @chartGradualPalette7!important;
  border: 1px solid @chartGradualPalette7!important;
}

.chartPalette8 {
  background-color: @chartGradualPalette8!important;
  border: 1px solid @chartGradualPalette8!important;
}

.chartPalette9 {
  background-color: @chartGradualPalette9!important;
  border: 1px solid @chartGradualPalette9!important;
}

.chartPalette10 {
  background-color: @chartGradualPalette10!important;
  border: 1px solid @chartGradualPalette10!important;
}

// NOTE: charts use a palette only with 10 colors
// .chartPalette11 {
//   background-color: @chartGradualPalette11!important;
//   border: 1px solid @chartGradualPalette11!important;
// }

// .chartPalette12 {
//   background-color: @chartGradualPalette12!important;
//   border: 1px solid @chartGradualPalette12!important;
// }


// Chart Marker Palettes

.chartMarkerPalette1 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette1!important;
}

.chartMarkerPalette2 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette2!important;
}

.chartMarkerPalette3 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette3!important;
}

.chartMarkerPalette4 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette4!important;
}

.chartMarkerPalette5 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette5!important;
}

.chartMarkerPalette6 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette6!important;
}

.chartMarkerPalette7 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette7!important;
}

.chartMarkerPalette8 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette8!important;
}

.chartMarkerPalette9 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette9!important;
}

.chartMarkerPalette10 {
  background-color: @chartMarkerFill!important;
  border: 1px solid @chartGradualPalette10!important;
}

// NOTE: charts use a palette only with 10 colors
// .chartMarkerPalette11 {
//   background-color: #fff!important;
//   border: 1px solid @chartGradualPalette11!important;
// }

// .chartMarkerPalette12 {
//   background-color: #fff!important;
//   border: 1px solid @chartGradualPalette12!important;
// }



.chartPaletteNegative {
  background-color: @chartPaletteNegative!important;
  border: 1px solid darken(@chartPaletteNegative,15%)!important;
}


// Doughnut Palettes

.doughnutPalette1 {
  background-color: @chartGradualPalette1!important;
  border: 1px solid #fff!important;
}

.doughnutPalette2 {
  background-color: @chartGradualPalette2!important;
  border: 1px solid #fff!important;
}

.doughnutPalette3 {
  background-color: @chartGradualPalette3!important;
  border: 1px solid #fff!important;
}

.doughnutPalette4 {
  background-color: @chartGradualPalette4!important;
  border: 1px solid #fff!important;
}

.doughnutPalette5 {
  background-color: @chartGradualPalette5!important;
  border: 1px solid #fff!important;
}

.doughnutPalette6 {
  background-color: @chartGradualPalette6!important;
  border: 1px solid #fff!important;
}

.doughnutPalette7 {
  background-color: @chartGradualPalette7!important;
  border: 1px solid #fff!important;
}

.doughnutPalette8 {
  background-color: @chartGradualPalette8!important;
  border: 1px solid #fff!important;
}

.doughnutPalette9 {
  background-color: @chartGradualPalette9!important;
  border: 1px solid #fff!important;
}

.doughnutPalette10 {
  background-color: @chartGradualPalette10!important;
  border: 1px solid #fff!important;
}

// NOTE: charts use a palette only with 10 colors
// .doughnutPalette11 {
//   background-color: @chartGradualPalette11!important;
//   border: 1px solid #fff!important;
// }

// .doughnutPalette12 {
//   background-color: @chartGradualPalette12!important;
//   border: 1px solid #fff!important;
// }


// Shadows

.boxShadow {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25)!important;
}
.boxShadow2 {
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
}

.boxShadow-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.boxShadow-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.boxShadow-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.boxShadow-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.boxShadow-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}