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

Ignite UI for jQuery by Infragistics

// Font
@font-family-base: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@text-color: @igGray10;
@text-color-light: #fff;
@highlight-color:#0c2837;
@text-muted: fade(@text-color, 70%);
@edit-container-bg: #fff;

// * Radius */
@radius: 6px;
@border-radius-base:@radius;
/* Palettes */


// highlighters

@accent1: #007aff;
@accent2: #4cd864;
@accent3: #fd472b;

@accent1-light: lighten(@accent1, 45%);
@accent1-mid: lighten(@accent1, 20%);
@accent1-mid-2: lighten(@accent1, 40%);
@accent3-light: lighten(@accent3, 35%);
@accent3-mid: lighten(@accent3, 20%);

@dialog-header:@accent1;


@chartPalette-BG-1: @accent1;
@chartPalette-BG-2: @accent2;
@chartPalette-BG-3: @accent3;
@chartPalette-BG-4: #ffcc00;
@chartPalette-BG-5: #879922;
@chartPalette-BG-6: #ff9500;
@chartPalette-BG-7: #ff2d55;
@chartPalette-BG-8: #8e8e93;
@chartPalette-BG-9: #f1bd5c;
@chartPalette-BG-10: #65ab88;
@chartPalette-BG-11: #7e7bc1;
@chartPalette-BG-12: #9f725f;
@chartPalette-border-1: transparent;
@chartPalette-border-2: transparent;
@chartPalette-border-3: transparent;
@chartPalette-border-4: transparent;
@chartPalette-border-5: transparent;
@chartPalette-border-6: transparent;
@chartPalette-border-7: transparent;
@chartPalette-border-8: transparent;
@chartPalette-border-9: transparent;
@chartPalette-border-10: transparent;
@chartPalette-border-11: transparent;
@chartPalette-border-12: transparent;

@chartPaletteNegative: #c33d4a;
@chartPaletteNegative-border: #872933;



// Sparkline
@ui-sparkline-BG-sparkpath:#43ABD5;
@ui-sparkline-BG-negativesparkpath:#B9242E;
@ui-sparkline-BG-trendline:#7F7F7F;
@ui-sparkline-BG-markers:@ui-sparkline-BG-sparkpath;
@ui-sparkline-BG-firstmarker:#237FA7;
@ui-sparkline-BG-lastmarker:#FBC139;
@ui-sparkline-BG-highmarker:#A3B929;
@ui-sparkline-BG-lowmarker:#AF39FF;
@ui-sparkline-BG-negativemarkers:#E5516F;
@ui-sparkline-BG-range:#808080;

@ui-sparkline-axis-border:#989EA3;
@ui-sparkline-axis-color:#406090;


// swatches
@header-bg-A: @igGray2;
@header-active-bg-A: @accent1-light;
@header-text-A: @igGray10;
@header-active-text-A: @accent1;
@border-color-A: @igGray6;
@content-bg-A: @igGray1;
@text-color-A: @igGray10;
@link-color-A: @igGray10;
@accent-color-A: @accent1;

@header-bg-B: @igGray1;
@header-active-bg-B: @accent1;
@header-text-B: @accent1;
@header-active-text-B: @igGray1;
@border-color-B: @accent1;
@content-bg-B: @igGray1;
@text-color-B: @igGray10;
@link-color-B: @igGray10;
@accent-color-B: @accent1;

@header-bg-C: @igGray2;
@header-active-bg-C: @accent3;
@header-text-C: @igGray10;
@header-active-text-C: @igGray1;
@border-color-C: @accent3;
@content-bg-C: @igGray1;
@text-color-C: @igGray10;
@link-color-C: @igGray10;
@accent-color-C: @accent3;

@jq-icons-base: url(images/ui-icons_8e8e93_256x240.png);
@jq-icons-accent: url(images/ui-icons_007aff_256x240.png);
@jq-icons-dark: url(images/ui-icons_000000_256x240.png);
@jq-icons-light: url(images/ui-icons_ffffff_256x240.png);
@jq-icons-error: url(images/ui-icons_fd472b_256x240.png);
@iggrid-icons-dark: url(images/igGrid/filter-icons-333333.png);
@iggrid-icons-light: url(images/igGrid/filter-icons-FFFFFF.png);


// * grays */
@igGray1: #FFFFFF;
@igGray2: #f8f8f8;
@igGray3: #ececec;
@igGray4: #ebebeb;
@igGray5: #D9D9D9;
@igGray6: #cccccc;
@igGray7: #999999;
@igGray8: #787878;
@igGray9: #303030;
@igGray10: #000000;
@igGray11: #666;


// Icons
@ui-icons-darker: @igGray10;
@ui-icons-dark: #888888;
@ui-icons-light: #ffffff;
@ui-icons-accent: @accent1;


// Variables for Grids
@body-bg: #FFFFFF;
@table-bg: @body-bg; // table bg
@table-border-color: @igGray5;
@table-bg-accent: @igGray1; // alt row bg
@table-bg-hover: @igGray6;
@table-bg-active: @accent1; // select
@iggrid-icons-dark: url(../../structure/images/igGrid/filter-icons-333333.png); //dark filter icons
@iggrid-icons-light: url(../../structure/images/igGrid/filter-icons-FFFFFF.png); //white filter icons


// Dropdowns and Menus
@dropdown-bg: @body-bg;
@dropdown-link-color: @text-color;
@dropdown-link-hover-color: @text-color;
@dropdown-link-hover-bg: @igGray6;
@dropdown-link-active-color: @text-color;
@dropdown-link-active-bg: @accent1;


// Gradual palette, used mainly for bulletGraph and linearGauge
@chartGradualPalette1: @accent1;
@chartGradualPalette2: lighten(@accent1, 5%);
@chartGradualPalette3: lighten(@accent1, 10%);
@chartGradualPalette4: lighten(@accent1, 15%);
@chartGradualPalette5: lighten(@accent1, 20%);
@chartGradualPalette6: lighten(@accent1, 24%);
@chartGradualPalette7: lighten(@accent1, 28%);
@chartGradualPalette8: lighten(@accent1, 32%);
@chartGradualPalette9: lighten(@accent1, 36%);
@chartGradualPalette10: lighten(@accent1, 40%);
@chartGradualPalette11: lighten(@accent1, 44%);
@chartGradualPalette12: lighten(@accent1, 48%);


//lineargauge, bulletgraph, radialgauge range palette
@range-1:#005E9C;
@range-2:#0078C8;
@range-3:#0092F4;
@range-4:#21A7FF;
@range-5:#4FB9FF;


//* igChart colors */
@chartToolTipBgColor: rgba(255, 255, 255, 0.95);


/*
    Spreadsheet
  =================
*/

@bar-background: #e4e4e4;
@row-col-bar-border: #cccccc;
@tab-bar-border: #999;
@spreadsheet-accent: #007AFF;
@spreadsheet-icon:#666;
@spreadsheet-cell-selection: #007AFF;
@spreadsheet-cell-selection-rgba: rgba(0,122,255, .22);
@spreadsheet-text-color:#111;
@spreadsheet-wight-text: #fff;
@spreadsheet-empty-bg: #fff;
@spreadsheet-disabled: #c4c4c4;
@spreadsheet-danger: #FF1A1E;
@spreadsheet-menu-item-bg-hover: @spreadsheet-cell-selection-rgba;
@spreadsheet-formula-btn-bg: @igGray5;
@spreadsheet-tab-text-color: #666;
@spreadsheet-formula-btn-color: #111;

// scheduler

@start-time-selected-color: @accent1;
@end-time-selected-color: lighten(@accent1, 15%);

@subject-agenda-color: @accent1;
@location-agenda-color: lighten(@accent1, 15%);

@appointment-popover-from-to: @accent1;

@monthview-activity-indicator: rgb(192, 192, 192);

@igscheduler-tabs-hover-bg: #fff;
@igscheduler-tabs-hover-color: @igGray9;


// Scheduler
@scheduler-bg:@body-bg;
@scheduler-text-color:@text-color;
@scheduler-border-color: @table-border-color;
@scheduler-shadow-color: @body-bg;
@scheduler-header-bg:@body-bg;
@scheduler-month-view-day-selected:@igGray3;

@scheduler-start-time-color: @accent1;
@scheduler-end-time-color: @accent3;

@scheduler-selected-subject-color: @accent1;
@scheduler-selected-location-color: @accent1;

@scheduler-month-view-bg: transparent;

@scheduler-activity-indicator-bg: @igGray6;

@scheduler-day-week-view-bg: transparent;
@scheduler-day-week-timeslot-selected: @igGray6;

@scheduler-day-week-appt-bg:@igGray5;
@scheduler-day-week-appt-location-bg:transparent;
@scheduler-day-week-appt-location-color:@igGray9;
@scheduler-day-week-appt-subject-bg:transparent;
@scheduler-day-week-appt-subject-color:@igGray10;

@scheduler-agenda-appt-selected:@igGray1;

@scheduler-day-week-day-header-bg:transparent;
@scheduler-day-week-day-header-color:rgb(153, 153, 153);

@scheduler-all-day-event-area-bg:@igGray5;
@scheduler-all-day-event-subject-color:@igGray10;
@scheduler-all-day-event-subject-bg:@igGray5;

@scheduler-agenda-view-bg:transparent;

@scheduler-header-border-color:@igGray6;


@scheduler-tabs-color:@text-color;
@scheduler-tabs-selected-text-color:@accent1;
@scheduler-tabs-selected-icons-color:@accent1;
@scheduler-tabs-selected-hover:darken(@accent1, 3%);


@scheduler-month-view-dayday-selected-bg: @igGray11;
@scheduler-month-view-dayday-selected-color: @igGray8;

@scheduler-month-view-day-today-indicator-bg: transparent;
@scheduler-month-view-day-today-color: @accent1;

@scheduler-month-view-month-header-bg:@accent1;

@scheduler-month-view-day-leading-bg:transparent;
@scheduler-month-view-day-leading-color:@igGray6;

@scheduler-month-view-day-trailing-bg:transparent;
@scheduler-month-view-day-trailing-color:@igGray6;

@scheduler-selectall-bg:@accent1;

@scheduler-appointment-dialog-save-button-bg:@igGray4;
@scheduler-appointment-dialog-save-button-hover-bg:@igGray3;

@scheduler-appointment-dialog-cancel-button-bg:@igGray4;
@scheduler-appointment-dialog-cancel-button-hover-bg:@igGray3;

@scheduler-navigator-back-button-hover-bg:transparent;
@scheduler-navigator-date-range-button-hover-bg:transparent;
@scheduler-navigator-forward-button-hover-bg:transparent;

@scheduler-today-button-hover-bg:transparent;
@scheduler-today-button-hover-color:@accent1;

@scheduler-tabs-hover-bg:transparent;
@scheduler-tabs-hover-color:@accent1;

@scheduler-day-week-timeslot-bg:rgba(255, 255, 255, .005);
@scheduler-day-week-timeslot-descripto-bg:transparent;
@scheduler-day-week-timeslot-working-hour-bg:rgb(238, 238, 238);
@scheduler-day-week-timeslot-selected-bg:@igGray3!important;

// Chart Toolbar
@chart-toolbar-dd-arrow: @igGray11;
@chart-toolbar-background: @igGray2;
@chart-toolbar-border-color: @igGray4;
@range-selector-active-color: @text-color;
@range-selector-active-background: @igGray4;