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

Ignite UI for jQuery by Infragistics

.grafient-mixin (@startColor, @endColor) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}

// states
.stateNormal {
  border-color: @table-border-color;
  .grafient-mixin(@gradient-0-1, @gradient-0-2);
  color: @text-color;
}

.stateHover {
  border-color: @accent1;
  .grafient-mixin(@gradient-3-1, @gradient-3-2);
  color: #fff;
}

.stateActive {
  border-color: @accent2;
  .grafient-mixin(@gradient-3-1, @gradient-3-2);
  color: #fff;
}

.stateFocused {
  border-color: @accent2;
  .grafient-mixin(@gradient-3-1, @gradient-3-2);
  color: #fff;
}


// 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;
}

.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: #fff!important;
  border: 1px solid @chartGradualPalette1!important;
}

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

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

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

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

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

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

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

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

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

.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;
}

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

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


// Shadows

.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);
}