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

Ignite UI for jQuery by Infragistics

/* states */

.stateNormal-A {
  border: 1px solid @border-color-A;
  background-color: @header-bg-A;
  color: @header-text-A;
}

.stateHover-A {
  border: 1px solid @border-color-A;
  background-color: @header-bg-A;
  color: @header-active-text-A;
}

.stateActive-A {
  border: 1px solid @border-color-A;
  background-color: @header-active-bg-A;
  color: @header-active-text-A;
}

.stateNormal-B {
  border-color: @border-color-B;
  background-color: @header-bg-B;
  color: @header-text-B;
}

.stateHover-B {
  border: 1px solid @igGray6;
  background-color: @igGray5;
  color: @igGray10;
}

.stateActive-B {
  border: 1px solid @border-color-B;
  background-color: @header-active-bg-B;
  color: @header-active-text-B;
}

.stateNormal-C {
  border-color: @border-color-C;
  background-color: @header-bg-C;
  color: @header-text-C;
}

.stateHover-C {
  border: 1px solid @accent3-light;
  background-color: @accent3-light;
  color: @igGray10;
}

.stateActive-C {
  border: 1px solid @border-color-C;
  background-color: @header-active-bg-C;
  color: @header-active-text-C;
}

.buttonNormal-A {
  border: 1px solid transparent;
  background-color: transparent;
  color: @header-active-text-A;
}

.buttonHover-A {
  border: 1px solid transparent;
  background-color: @accent1-light;
  color: @header-active-text-A;
}

.buttonActive-A {
  border: 1px solid transparent;
  background-color: @accent1-light;
  color: @header-active-text-A;
}

.stateFocused {
  border: 1px solid @accent1-mid;
  background-color: @igGray3;
  color: @igGray10;
}

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

// Charts

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

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

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

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

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

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

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

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

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

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

.chartPalette11 {
  background-color: @chartPalette-BG-11!important;
  border: 1px solid @chartPalette-border-11!important;
}

.chartPalette12 {
  background-color: @chartPalette-BG-12!important;
  border: 1px solid @chartPalette-border-12!important;
}

.chartPaletteNegative {
  background-color: @chartPaletteNegative!important;
  border: 1px solid @chartPaletteNegative-border!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 {
  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);
}