ignite-ui/css/themes/bootstrap3/superhero/mixins.less

Ignite UI for jQuery by Infragistics

/* states */

.stateNormal {
  border: 1px solid @btn-default-border;
  background-color: @btn-default-bg;
  color: @btn-default-color;
}

.stateHover {
  border-color: darken(@btn-default-border, 12%);
  background-color: darken(@btn-default-bg, 8%);
  color: @btn-default-color;
}

.stateActive {
  border: 1px solid darken(@component-active-bg, 6.5%);
  background-color: @component-active-bg;
  color: @component-active-color;
}

.stateFocused {
  border: 1px solid darken(@component-active-bg, 6.5%);
  background-color: @component-active-bg;
  color: @component-active-color;
}

.btn-state-hover.btn-state-hover,
.btn-state-hover.btn-state-active,
.btn-state-hover,
.stateHover.stateFocused,
.stateHover.stateActive,
.stateHover {
  background: lighten(@component-active-bg, 5%);
}

// Chart palette
.chartPalette1 {
  background-color: @brand-primary !important;
  border: 1px solid darken(@brand-primary, 6.5%) !important;
}

.chartPalette2 {
  background-color: @brand-success !important;
  border: 1px solid darken(@brand-success, 6.5%) !important;
}

.chartPalette3 {
  background-color: @brand-info !important;
  border: 1px solid darken(@brand-info, 6.5%) !important;
}

.chartPalette4 {
  background-color: @brand-warning !important;
  border: 1px solid darken(@brand-warning, 6.5%) !important;
}

.chartPalette5 {
  background-color: @brand-danger !important;
  border: 1px solid darken(@brand-danger, 6.5%) !important;
}

.chartPalette6 {
  background-color: darken(@brand-primary, 20%) !important;
  border: 1px solid darken(@brand-primary, 26.5%) !important;
}

.chartPalette7 {
  background-color: darken(@brand-success, 20%) !important;
  border: 1px solid darken(@brand-success, 26.5%) !important;
}

.chartPalette8 {
  background-color: darken(@brand-info, 20%) !important;
  border: 1px solid darken(@brand-info, 26.5%) !important;
}

.chartPalette9 {
  background-color: darken(@brand-warning, 20%) !important;
  border: 1px solid darken(@brand-warning, 26.5%) !important;
}

.chartPalette10 {
  background-color: darken(@brand-danger, 20%) !important;
  border: 1px solid darken(@brand-danger, 26.5%) !important;
}

.chartPalette11 {
  background-color: darken(@brand-primary, 30%) !important;
  border: 1px solid darken(@brand-primary, 36.5%) !important;
}

.chartPalette12 {
  background-color: darken(@brand-success, 30%) !important;
  border: 1px solid darken(@brand-success, 36.5%) !important;
}

.chartPaletteNegative {
  background-color: darken(@brand-danger, 30%) !important;
  border: 1px solid darken(@brand-danger, 36.5%) !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 {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25)!important;
}

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