ignite-ui/css/themes/infragistics/modules/infragistics.ui.spreadsheet.less

Ignite UI for jQuery by Infragistics

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

.ui-igspreadsheet-inputmessage {
  background-color: @igGray4;
  border-color: @igGray9;
  color: @igGray10;
}

/* ToolTip */
.ui-igspreadsheet-tooltip {
  background-color: @igGray4;
  border-color: @igGray6;
  color: @igGray9;
}

/* Splitters */
.ui-igspreadsheet-rowsplitter,
.ui-igspreadsheet-columnsplitter,
.ui-igspreadsheet-splitterintersection {
  background-color: @igGray4;
}

/* SelectAll */
.ui-igspreadsheet-selectall {
  background-color: @igGray4;
  color: @igGray6;
}

.ui-igspreadsheet-selectall.ui-state-active {
  color: @spreadsheet-accent;
  background-color: lighten(@spreadsheet-accent, 15%);
}

/* SpreadSheet Header & Footer background */
.ui-igspreadsheet-tabareabackground,
.ui-igspreadsheet-formulabar {
  background-color: @bar-background;
}

/* SpreadSheet Footer top border */
.ui-igspreadsheet-tabareaborder {
  background-color: @tab-bar-border;
}

/* Splitter icon */
.ui-igspreadsheet-tabareasplitter,
.ui-igspreadsheet-nameboxsplitter {
  color: @spreadsheet-icon;
}

/* Unselected tab */
.ui-igspreadsheet-tabitem {
  border-right: 1px solid @tab-bar-border;
  border-left: 1px solid @tab-bar-border;
  background-color: transparent;
  border-bottom: 2px solid transparent; /* reserved space so we don't see jumping when the tab is selected */
  color: @spreadsheet-tab-text-color;
}

/* Tab hover */
.ui-igspreadsheet-tabitem.ui-state-hover {
  color: @spreadsheet-accent;
}

/* Active tab */
.ui-igspreadsheet-tabitem-active {
  background: @spreadsheet-empty-bg;
  border-bottom-color: @spreadsheet-accent;
}

.ui-igspreadsheet-tabitem-active,
.ui-igspreadsheet-tabitem-active.ui-state-hover {
  color: @spreadsheet-accent;
}

/* [LIGHT|DARK TAB START]  */
.ui-igspreadsheet-tabitem-light > .ui-igspreadsheet-tabitemcontent > span {
  color: @spreadsheet-accent;
}

.ui-igspreadsheet-tabitem-dark > .ui-igspreadsheet-tabitemcontent > span {
  color: @igGray3;
}

.ui-igspreadsheet-tabitem-selected.ui-igspreadsheet-tabitem-dark > .ui-igspreadsheet-tabitemcontent > span,
.ui-igspreadsheet-tabitem-selected.ui-igspreadsheet-tabitem-light > .ui-igspreadsheet-tabitemcontent > span {
  color: @spreadsheet-accent;
}

.ui-igspreadsheet-tabitem-active.ui-igspreadsheet-tabitem-dark > .ui-igspreadsheet-tabitemcontent > span,
.ui-igspreadsheet-tabitem-active.ui-igspreadsheet-tabitem-light > .ui-igspreadsheet-tabitemcontent > span {
  color: @spreadsheet-accent;
}

/* [LIGHT|DARK TAB END] */

/* Tab Area Buttons */
.ui-igspreadsheet-activateprevioushiddentab,
.ui-igspreadsheet-activatenexthiddentab,
.ui-igspreadsheet-scrollfirsttab,
.ui-igspreadsheet-scrolllasttab,
.ui-igspreadsheet-scrollprevioustab,
.ui-igspreadsheet-scrollnexttab {
  color: @spreadsheet-icon;
}

.ui-igspreadsheet-addnewworksheet.ui-state-hover,
.ui-igspreadsheet-activateprevioushiddentab.ui-state-hover,
.ui-igspreadsheet-activatenexthiddentab.ui-state-hover,
.ui-igspreadsheet-scrollfirsttab.ui-state-hover,
.ui-igspreadsheet-scrolllasttab.ui-state-hover,
.ui-igspreadsheet-scrollprevioustab.ui-state-hover,
.ui-igspreadsheet-scrollnexttab.ui-state-hover {
  color: darken(@spreadsheet-accent, 15%);
}

.ui-igspreadsheet-addnewworksheet.ui-state-disabled,
.ui-igspreadsheet-scrollfirsttab.ui-state-disabled,
.ui-igspreadsheet-scrolllasttab.ui-state-disabled,
.ui-igspreadsheet-scrollprevioustab.ui-state-disabled,
.ui-igspreadsheet-scrollnexttab.ui-state-disabled {
  color: @spreadsheet-disabled;
}

/* Add New Worksheet */
.ui-igspreadsheet-addnewworksheet {
  color: @spreadsheet-accent;
  cursor: pointer;
}

/* ScrollBar related */
.ui-igspreadsheet-scrollbar-button-left,
.ui-igspreadsheet-scrollbar-button-right,
.ui-igspreadsheet-scrollbar-button-up,
.ui-igspreadsheet-scrollbar-button-down {
  background-color: @igGray4;
  border: 1px solid @igGray7;
  color: @igGray9;
}

.ui-igspreadsheet-scrollbar-button-left.ui-state-hover,
.ui-igspreadsheet-scrollbar-button-right.ui-state-hover,
.ui-igspreadsheet-scrollbar-button-up.ui-state-hover,
.ui-igspreadsheet-scrollbar-button-down.ui-state-hover {
  background-color: @igGray4;
  border-color: @igGray7;
  color: @igGray9;
}

.ui-igspreadsheet-scrollbar-button-left.ui-state-active,
.ui-igspreadsheet-scrollbar-button-right.ui-state-active,
.ui-igspreadsheet-scrollbar-button-up.ui-state-active,
.ui-igspreadsheet-scrollbar-button-down.ui-state-active {
  background-color: @igGray1;
  border-color: @igGray7;
  color: @igGray8;
}

.ui-igspreadsheet-scrollbar-track-left,
.ui-igspreadsheet-scrollbar-track-right,
.ui-igspreadsheet-scrollbar-track-up,
.ui-igspreadsheet-scrollbar-track-down {
  background-color: @igGray4;
}

.ui-igspreadsheet-scrollbar-thumb-vertical,
.ui-igspreadsheet-scrollbar-thumb-horizontal {
  background-color: @igGray6;
  border: 1px solid @igGray7;
}

.ui-igspreadsheet-scrollbar-thumb-vertical.ui-state-hover,
.ui-igspreadsheet-scrollbar-thumb-horizontal.ui-state-hover,
.ui-igspreadsheet-scrollbar-thumb-vertical.ui-state-active,
.ui-igspreadsheet-scrollbar-thumb-horizontal.ui-state-active {
  background-color: @igGray7;
  border-color: @igGray4;
}

/* Headers
   =======
*/

/* Cols & Rows Headers */
.ui-igspreadsheet-columnheader,
.ui-igspreadsheet-rowheader {
  background-color: @bar-background;
  color: @spreadsheet-text-color;
}

/* Cols & Rows Headers borders  */
.ui-igspreadsheet-columnheader {
  border-right-color: @row-col-bar-border;
}

.ui-igspreadsheet-rowheader {
  border-bottom-color: @row-col-bar-border;
}

/* Cols & Rows Header, Selected  */
.ui-igspreadsheet-columnheader-selected {
  border-right-color: darken(@spreadsheet-accent, 10%);
}

.ui-igspreadsheet-rowheader-selected {
  border-bottom-color: darken(@spreadsheet-accent, 10%);
}

/* Cols & Rows Header, Selected but not focused */
.ui-igspreadsheet-columnheader-selected,
.ui-igspreadsheet-rowheader-selected {
  background-color: @spreadsheet-accent;
  color: @spreadsheet-text-color;
}

.ui-igspreadsheet-columnheader-selected.ui-state-highlight,
.ui-igspreadsheet-rowheader-selected.ui-state-highlight {
  color: lighten(@accent1, 40%);
}

/* Selected cel, header col & row background and color */
.ui-igspreadsheet-columnheader-selectedcells,
.ui-igspreadsheet-rowheader-selectedcells {
  background-color: @igGray6;
  color: lighten(@spreadsheet-accent, 10%);;
}

/* Selected cel, header col & row border color */
.ui-igspreadsheet-columnheader-selectedcells {
  border-right-color: darken(@row-col-bar-border, 5%);
}

.ui-igspreadsheet-rowheader-selectedcells {
  border-bottom-color: darken(@row-col-bar-border, 5%);
}

/* Selected cel, header hover col & row  background & colors */
.ui-igspreadsheet-columnheader-hover,
.ui-igspreadsheet-rowheader-hover {
  background-color: lighten(@accent1, 10%);
  color: @spreadsheet-text-color;
}

.ui-igspreadsheet-columnheader-hover {
  border-right-color: darken(@spreadsheet-accent, 10%);
}

.ui-igspreadsheet-rowheader-hover {
  border-bottom-color: darken(@spreadsheet-accent, 10%);
}

.ui-igspreadsheet-header-resizeline {
  background-color: @spreadsheet-accent;
}

/* Formula Bar
   =======
*/

.ui-igspreadsheet .ui-igspreadsheet-formulabarexpandbutton {
  background-color: @spreadsheet-formula-btn-bg;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  &:before {
    border-color: @spreadsheet-formula-btn-color;
  }
}

/* Buttons background */
.ui-igspreadsheet-nameboxcontainer,
.ui-igspreadsheet-formulabartextareacontainer,
.ui-igspreadsheet-formulabarbuttoncontainer {
  border: 1px solid @igGray5;
  box-sizing: border-box;
  background-color: @igGray3;
  border-radius: @border-radius-base;
}

/* Enabled buttons */
.ui-igspreadsheet-formulabarenterbutton,
.ui-igspreadsheet-formulabarcancelbutton {
  color: @igGray10;
}

/* Disabled Buttons */
.ui-igspreadsheet-formulabarenterbutton.ui-state-disabled,
.ui-igspreadsheet-formulabarcancelbutton.ui-state-disabled {
  color: @spreadsheet-disabled;
}

// Enter Button
.ui-igspreadsheet-formulabarenterbutton.ui-state-hover {
  color: @spreadsheet-accent;
}

// Cancel Button
.ui-igspreadsheet-formulabarcancelbutton.ui-state-hover {
  color: @spreadsheet-danger;
}

.ui-igspreadsheet-invaliddata {
  border-color: @spreadsheet-danger;
}

/*
    Formula Bar END
   ==================
*/

/* Multi cell selection background color */
.ui-igspreadsheet-cellselection {
  background-color: @spreadsheet-cell-selection-rgba;
  border-color: white;
  outline-color: @spreadsheet-cell-selection-rgba;
}

.ui-igspreadsheet-cellselection.ui-state-highlight {
  outline-color: @spreadsheet-accent;
}

.ui-igspreadsheet-cellselectionhandle {
  background-color: @spreadsheet-accent;
  border-color: @igGray4;
}

/* Icons image */
.ui-icon.ui-igspreadsheet-copy-icon,
.ui-icon.ui-igspreadsheet-cut-icon,
.ui-icon.ui-igspreadsheet-paste-icon,
.ui-icon.ui-igspreadsheet-paste-icon,
.ui-icon.ui-igspreadsheet-clearcontents-icon,
  /* insert */
.ui-icon.ui-igspreadsheet-insertcellsshiftright-icon,
.ui-icon.ui-igspreadsheet-insertcellsshiftdown-icon,
.ui-icon.ui-igspreadsheet-insertrows-icon,
.ui-icon.ui-igspreadsheet-insertcolumns-icon,
  /* delete */
.ui-icon.ui-igspreadsheet-deletecellsshiftleft-icon,
.ui-icon.ui-igspreadsheet-deletecellsshiftup-icon,
.ui-icon.ui-igspreadsheet-deleterows-icon,
.ui-icon.ui-igspreadsheet-deletecolumns-icon {
  background-image: url(images/igSpreadsheet/ig-Spreadsheet.png);
  left: 0.5em;
  width: 16px;
  height: 16px;
}

// Icons positions

.ui-igspreadsheet-copy-icon {
  background-position: 0 0;
}

.ui-igspreadsheet-cut-icon {
  background-position: 0 -16px;
}

.ui-igspreadsheet-paste-icon {
  background-position: 0 -32px;
}

.ui-igspreadsheet-clearcontents-icon {
  background-position: 0 -128px;
}

.ui-igspreadsheet-insertcellsshiftdown-icon {
  background-position: 0 -112px;

}

.ui-igspreadsheet-insertcellsshiftright-icon {
  background-position: 0 -96px;
}

.ui-igspreadsheet-deletecellsshiftup-icon {
  background-position: 0 -80px;
}

.ui-igspreadsheet-deletecellsshiftleft-icon {
  background-position: 0 -64px;
}

.ui-igspreadsheet-insertrows-icon,
.ui-igspreadsheet-deleterows-icon {
  background-position: 0 -160px;
}

.ui-igspreadsheet-insertcolumns-icon,
.ui-igspreadsheet-deletecolumns-icon {
  background-position: 0 -144px;
}

.ui-igspreadsheet .ui-menu {
  box-shadow: 0 0 10px @igGray5;
}

.ui-igspreadsheet .ui-menu-item .ui-menu {
  border-radius: 0 @border-radius-base @border-radius-base @border-radius-base;
}

/* Styles for jQuery 1.12.1*/
.ui-igspreadsheet .ui-menu .ui-menu-item-wrapper.ui-state-active {
  background: @accent2;
  color: @text-color-light;
  .ui-icon {
    color: @text-color-light;
  }
}
/* Styles for jQuery 1.12.1 END */


/* Styles for jQuery 1.10.3*/
.ui-menu-item .ui-state-focus:hover,
.ui-menu-item a.ui-state-active
{
  color: #fff;
  background: @accent2;
  .ui-icon {
    color: #fff;
  }
}

.ui-igspreadsheet .ui-menu-item > a {
  border-color: transparent;
  background: transparent;
  color:@text-color;
  .ui-icon {
    color: @text-color;
  }
}
/* Styles for jQuery 1.10.3 END */

/* Styles for jQuery 1.11.1*/
.ui-menu-item.ui-state-focus {
  background: @accent1;
  color: #fff;
}

.ui-menu-item.ui-state-active > div,
.ui-menu-item.ui-state-active {
  background: @accent1;
}

.ui-menu .ui-menu-item {
  margin: -1px;
  .ui-icon {
    color: @text-color;
  }
}
/* Styles for jQuery 1.11.1 END */
.ui-menu .ui-menu-item.ui-state-focus > span {
  color: #fff;
}
.ui-menu .ui-menu-item.ui-state-focus > div {
  background: @accent2;
  color: #fff;
  .ui-icon {
    color: #fff;
  }
}

.ui-igspreadsheet .ui-spinner-button {
  border-left: 1px solid @igGray4;

  &:hover {
    background: @igGray2;
  }
}