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

Ignite UI for jQuery by Infragistics

// states

.stateNormal {
  border: 1px solid @igGray5;
  background-color: @igGray3;
  color: @text-color;
}
.stateHover {
  border: 1px solid @accent2;
  background-color: lighten(@accent1,5%);
  color: @text-color-light;
}

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

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

.stateDisabled {
  opacity: 0.40;
  cursor: default !important;
}


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