Ready to Test

This commit is contained in:
2022-07-26 09:34:09 -07:00
commit 2afec95704
1004 changed files with 164796 additions and 0 deletions

View File

@ -0,0 +1,76 @@
Bootstrap 3 用のテーマ
=====================
1. Default (デフォルトの bootstrap 3 テーマ)
2. Flatly
3. Yeti
4. Superhero
テーマのソース:
https://bootswatch.com/
### テーマ - ファイル構造
* **images** - テーマに関連するすべての画像を含みます。
* **infragistics.theme.less** - すべての部分ファイルをインポートするルート ファイル。
* **Modules** - Ignite UI モジュールに関連するすべてのテーマ スタイルを含みます。
* **Styles-guide** - テーマのスタイル ガイド (作業中)。
* **framework.less** - Ignite UI コンポーネントを jQueryUI コンポーネントと正しく動作させるために必要なスタイルをすべて含みます。
* **variables.less** - テーマ変数。
* **ignite-ui-variables.less** - テーマ変数。
* **mixins.less** - Ignite UI コンポーネントに関連するすべての mixins を含みます。
**注:** ルート "infragistics-theme-less" ファイルは、.CSS にコンパイルする必要のある唯一のファイルです。
**注:** "infragistics.theme.less" で File "@import" の順序が重要です。テーマを正しく動作させるために以下の順序を使用してください。
### ファイルの順序:
```diff
// Bootstrap Theme variables
@import "variables.less";
// Ignite UI Theme variables
@import "ignite-ui-variables";
// Ignite UI Mixins
@import "mixins.less";
//JQuery UI
@import "framework.less";
//Ignite UI styles
@import "modules/modules.less";
// Font styles
@import (css)"icons-styles.css";
```
### アイコンの web フォント
*** css/structure/fonts ***
アイコンの web フォントに関連するすべてのファイルを含みます。
web フォントにアイコン フォームを追加/削除/変更:
1. [icomoon.io/app](icomoon.io/app) に移動し、css/structure/fonts の "**jquery-ui.svg**" ファイルをアップロードします。
2. 変更する場合は、ファイルをダウンロードして変更されたフォントを置き換えます。
**重要:**
フォントを正しく動作させるために icons クラスのプレフィックスを指定する必要があります。
"icomoon.io" のフォント設定で、プレフィックスを "ui-icon-" に設定してください。
既存のフォントをオーバーライドするには、フォントの名前を保持します。

View File

@ -0,0 +1,77 @@
Bootstrap 3 Themes
=====================
1. Default (Default bootstrap 3 theme)
2. Flatly
3. Yeti
4. superhero
Theme source:
https://bootswatch.com/
### Themes - file structure
* **images** - Contain all images related to the theme
* **infragistics.theme.less** - The root file which import all partial files.
* **Modules** - Contain all theme styles related to ignite ui modules.
* **Styles-guide** - In progress theme style guide
* **framework.less** - Contain all styles, that are needed, in order to make ignite UI component's to work properly witch jQueryUI components.
* **variables.less** - Theme variables.
* **ignite-ui-variables.less** -Theme variables.
* **mixins.less** - Contain all mixins related to Ignite UI components
**Note:** the root file "infragistics-theme-less" is the only file that needs to be compiled to .CSS
**Note:** The order of File "@import" inside "infragistics.theme.less" is important! In order the theme to work correctly.
### File order:
```diff
// Bootstrap Theme variables
@import "variables.less";
// Ignite UI Theme variables
@import "ignite-ui-variables";
// Ignite UI Mixins
@import "mixins.less";
//JQuery UI
@import "framework.less";
//Ignite UI styles
@import "modules/modules.less";
// Font styles
@import (css)"icons-styles.css";
```
### Icons web font
*** css/structure/fonts ***
hold all files related to icons web font
To add/remove/change icons form the web font:
1. Go to [icomoon.io/app](icomoon.io/app) and upload the file "**jqurey-ui.svg**" located in: css/structure/fonts
2. Make the desired modification, download and replace the changed font.
**IMPORTANT:**
in order the font to work you need to specify the prefix for the icons clsss.
In "icomoon.io", font settings. The prefix should be "ui-icon-".
Keep the name for the font the same in order to override the existing font.

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,161 @@
@text-color-light:#fff;
// Icons
@ui-icons-darker: #222222;
@ui-icons-dark: #888888;
@ui-icons-light: #ffffff;
@ui-icons-accent: @brand-primary;
//dialog
@dialog-header:@brand-primary;
// Gray palette
@igGray1: #f0f0f0;
@igGray2: #eee;
@igGray3: #e8e8e8;
@igGray4: #dadada;
@igGray5: #bcbcbc;
@igGray6: #ccc;
@igGray7: #999;
@igGray8: #888;
@igGray9: #777;
@igGray10: #444;
@igGray11: rgba(0,0,0, 0.12);
// Gradual palette, used mainly for bulletGraph and linearGauge
@chartGradualPalette1: @brand-primary;
@chartGradualPalette2: lighten(@brand-primary, 5%);
@chartGradualPalette3: lighten(@brand-primary, 10%);
@chartGradualPalette4: lighten(@brand-primary, 15%);
@chartGradualPalette5: lighten(@brand-primary, 20%);
@chartGradualPalette6: lighten(@brand-primary, 24%);
@chartGradualPalette7: lighten(@brand-primary, 28%);
@chartGradualPalette8: lighten(@brand-primary, 32%);
@chartGradualPalette9: lighten(@brand-primary, 36%);
@chartGradualPalette10:lighten(@brand-primary, 40%);
@chartGradualPalette11:lighten(@brand-primary, 44%);
@chartGradualPalette12: lighten(@brand-primary, 48%);
// Sparkline palette
@sparkpath:#43ABD5;
@negativesparkpath:#43ABD5;
@trendline:#7F7F7F;
@markers:#43ABD5;
@firstmarker:#237FA7;
@lastmarker:#FBC139;
@highmarker:#A3B929;
@lowmarker:#AF39FF;
@negativemarkers:#E5516F;
//Spreadsheet
@accent1: @brand-primary;
@bar-background: #e4e4e4;
@row-col-bar-border: #cccccc;
@tab-bar-border: #999;
@spreadsheet-accent: @brand-primary;
@spreadsheet-icon:@brand-primary;
@spreadsheet-cell-selection: @brand-primary;
@spreadsheet-cell-selection-rgba: rgba(66,139,202, .22); /* needs to be improved with mixin*/
@spreadsheet-text-color:#111;
@spreadsheet-wight-text: #fff;
@spreadsheet-empty-bg: #fff;
@spreadsheet-disabled: #c4c4c4;
@spreadsheet-danger: @brand-danger;
@spreadsheet-menu-item-bg-hover: @spreadsheet-cell-selection-rgba;
@spreadsheet-formula-btn-bg: @brand-primary;
@spreadsheet-header-selected-cell-bg:lighten(@body-bg,15%);
@spreadsheet-tab-text-color: #666;
@spreadsheet-formula-btn-color: #fff;
// 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:@igGray4;
@scheduler-start-time-color: @brand-primary;
@scheduler-end-time-color: @brand-warning;
@scheduler-selected-subject-color: @brand-primary;
@scheduler-selected-location-color: @brand-primary;
@scheduler-month-view-bg: transparent;
@scheduler-activity-indicator-bg: @igGray6;
@scheduler-day-week-view-bg: transparent;
@scheduler-day-week-timeslot-selected: @gray-light;
@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:@gray-light;
@scheduler-tabs-color:@text-color;
@scheduler-tabs-selected-text-color:@brand-primary;
@scheduler-tabs-selected-icons-color:@brand-primary;
@scheduler-tabs-selected-hover:darken(@brand-primary, 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: @brand-primary;
@scheduler-month-view-month-header-bg:@brand-primary;
@scheduler-month-view-day-leading-bg:transparent;
@scheduler-month-view-day-leading-color:@gray-light;
@scheduler-month-view-day-trailing-bg:transparent;
@scheduler-month-view-day-trailing-color:@gray-light;
@scheduler-selectall-bg:@brand-primary;
@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:@brand-primary;
@scheduler-tabs-hover-bg:transparent;
@scheduler-tabs-hover-color:@brand-primary;
@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:@gray-light;
// 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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 743 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,28 @@
/******************************************/
/* Infragistics Ignite UI Bootstrap theme */
/******************************************/
// Icon sprites
@ui-icons-darker: url(images/ui-icons_222222_256x240.png);
@ui-icons-dark: url(images/ui-icons_888888_256x240.png);
@ui-icons-light: url(images/ui-icons_ffffff_256x240.png);
@iggrid-icons-dark: url(images/igGrid/filter-icons-333333.png);
@iggrid-icons-light: url(images/igGrid/filter-icons-FFFFFF.png);
// Bootstrap Theme variables
@import "variables.less";
// Ignite UI Theme variables
@import "ignite-ui-variables";
// Ignite UI Mixins
@import "mixins.less";
//JQuery UI
@import "framework.less";
//Ignite UI styles
@import "modules/modules.less";
// Font styles
@import (inline)"icons-styles.css";

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,185 @@
/* states */
.stateNormal {
border : 1px solid @btn-default-border;
background-color : @btn-default-bg;
color : @btn-default-color;
}
.stateHover {
border-color: darken(@btn-default-bg, 8%);
background-color: darken(@btn-default-bg, 8%);
color: @btn-default-color;
}
.stateActive {
border : 0px 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;
}
// Chart Palettes
.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);
}
.inset-shadow {
box-shadow : inset 0 0 8px @text-color;
}

View File

@ -0,0 +1,53 @@
/**************/
/* igCheckbox */
/**************/
.ui-igcheckbox-small.ui-state-default,
.ui-igcheckbox-normal.ui-state-default,
.ui-igcombo-checkbox.ui-state-default {
background-image: none;
background-color: @input-bg;
border: 1px solid @input-border;
}
.ui-igcheckbox-small.ui-state-hover,
.ui-igcheckbox-normal.ui-state-hover,
.ui-igcombo-checkbox.ui-state-hover {
border: 1px solid darken(@input-border, 12%);
;
}
.ui-igcheckbox-small.ui-state-focus,
.ui-igcheckbox-normal.ui-state-focus,
.ui-igcombo-checkbox.ui-state-focus {
border-color: @input-border-focus;
}
.ui-igcombo-checkbox.ui-state-default,
.ui-igcombo-checkbox.ui-state-hover,
.ui-igcombo-checkbox.ui-state-focus {
background-image: none;
}
.ui-igcheckbox-small .ui-icon,
.ui-igcheckbox-normal .ui-icon,
.ui-igcheckbox-small.ui-state-hover .ui-icon,
.ui-igcheckbox-normal.ui-state-hover .ui-icon,
.ui-iggrid th .ui-igcheckbox-normal.ui-state-default .ui-icon,
.ui-igcombo-checkbox .ui-icon,
.ui-state-hover .ui-igcombo-checkbox .ui-icon {
color: @ui-icons-darker;
}
.ui-icon-check-f {
background-position: -64px -144px;
}
.ui-icon-check-p {
/*background-position: -96px -160px;*/
background-color: @gray-dark;
background-image: none !important;
border: 2px solid @body-bg;
box-sizing: border-box;
}

View File

@ -0,0 +1,469 @@
/***********/
/* igChart */
/***********/
.ui-chart-palette-1 {
.chartPalette1;
}
.ui-chart-palette-2 {
.chartPalette2;
}
.ui-chart-palette-3 {
.chartPalette3;
}
.ui-chart-palette-4 {
.chartPalette4;
}
.ui-chart-palette-5 {
.chartPalette5;
}
.ui-chart-palette-6 {
.chartPalette6;
}
.ui-chart-palette-7 {
.chartPalette7;
}
.ui-chart-palette-8 {
.chartPalette8;
}
.ui-chart-palette-9 {
.chartPalette9;
}
.ui-chart-palette-10 {
.chartPalette10;
}
.ui-chart-palette-11 {
.chartPalette11;
}
.ui-chart-palette-12 {
.chartPalette12;
}
.ui-chart-piechart-container,
.ui-chart-legend-item-text {
font-size: 12px;
font-family: @font-family-base;
}
.ui-chart-toolbar .ui-slider-handle {
width: 18px;
height: 18px;
margin-left: -9px!important;
top: -5px!important;
}
.touch .ui-chart-toolbar .ui-slider-handle,
.touchevents .ui-chart-toolbar .ui-slider-handle,
.pointerevents .ui-chart-toolbar .ui-slider-handle
{
border: 1px solid @gray-dark;
background: @gray;
margin-left: -15px;
top: -15px;
}
.ui-chart-title {
margin-bottom: 5px;
text-align: center;
}
.ui-chart-subtitle {
margin-bottom: 5px;
text-align: center;
}
.ui-widget-content.ui-chart-tooltip {
background-color: rgba(255, 255, 255, 0.85);
}
/*******************/
/* Sparkline chart */
/*******************/
.ui-sparkline {
font-family: @font-family-base;
font-size: 13px;
padding: 10px 5px 10px 5px;
border: 0;
}
.ui-sparkline-tooltip {
.boxShadow;
padding: 3px;
}
.ui-sparkline-sparkpath {
background: #43ABD5;
border: 1px solid;
}
.ui-sparkline-negativesparkpath {
background: #B9242E;
border: 1px solid;
}
.ui-sparkline-trendline {
background: #7F7F7F;
border: 2px solid;
}
.ui-sparkline-markers {
background: #43ABD5;
border: 3px solid;
}
.ui-sparkline-firstmarker {
background: #237FA7;
border: 5px solid;
}
.ui-sparkline-lastmarker {
background: #FBC139;
border: 5px solid;
}
.ui-sparkline-highmarker {
background: #A3B929;
border: 4px solid;
}
.ui-sparkline-lowmarker {
background: #AF39FF;
border: 3px solid;
}
.ui-sparkline-negativemarkers {
background: #E5516F;
border: 3px solid;
}
.ui-sparkline-range {
background: gray;
opacity: 0.2;
}
.ui-sparkline-axis-x {
font-family: @font-family-base;
border: 2px solid #989EA3;
color: #406090;
}
.ui-sparkline-axis-y {
font-family: @font-family-base;
border: 2px solid #989EA3;
color: #406090;
text-align: right;
}
/****************/
/* Funnel chart */
/****************/
.ui-funnel {
font-family: @font-family-base;
font-size: 14px;
color: #555555;
border: 0;
}
.ui-funnel-tooltip {
.boxShadow;
padding: 3px;
}
.ui-funnel-slice {
color: #FFFFFF;
border: 0;
}
.ui-funnel-slice-selected {
opacity: 1.0;
}
.ui-funnel-slice-unselected {
opacity: 0.49;
border-color: transparent;
}
/********************/
/* igDoughnut Chart */
/********************/
.ui-doughnut {
border: 0;
font-size: 12px;
font-family: @font-family-base;
}
.ui-doughnut-tooltip {
/*add styles*/
}
/***********************/
/* igRadialGauge Chart */
/***********************/
.ui-radialgauge-needle {
background-color: @gray-dark;
}
.ui-radialgauge-needleCap {
background-color: @gray-dark;
border-color: @gray-dark;
}
.ui-radialgauge-backing {
background-color: @body-bg;
border: @gray;
}
.ui-radialgauge-scale {
background-color: @brand-primary;
border: none;
}
.ui-radialgauge-tick {
background-color: @gray-darker;
border-top-color: none;
}
.ui-radialgauge-minorTick {
background-color: @gray-darker;
border: none;
}
.ui-radialgauge-label {
background-color: @gray-dark;
border: none;
}
.ui-radialgauge-range-palette-1 {
background-color: @chartGradualPalette7;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-2 {
background-color: @chartGradualPalette5;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-3 {
background-color: @chartGradualPalette4;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-4 {
background-color: @chartGradualPalette3;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-5 {
background-color: @chartGradualPalette2;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-6 {
background-color: @chartGradualPalette1;
border-top-color: transparent;
}
.ui-radialgauge {
font-family: @font-family-base;
font-size: 16px;
}
/***********************/
/* igBulletGraph Chart */
/***********************/
.ui-bulletgraph-backing {
background-color: @body-bg;
border-color: @body-bg;
}
.ui-bulletgraph-targetvalue {
background-color: @body-bg;
border-color: @body-bg;
}
/* TICKS AND LABELS */
.ui-bulletgraph-tick {
background-color: @gray-darker;
border: transparent;
}
.ui-bulletgraph-minortick {
background-color: @gray-darker;
border: transparent;
}
.ui-bulletgraph-label {
background-color: @gray-dark;
border: transparent;
}
/* RANGE VALUES */
.ui-bulletgraph-range-palette-1 {
background-color: @chartGradualPalette1;
border: transparent;
}
.ui-bulletgraph-range-palette-2 {
background-color: @chartGradualPalette3;
border: transparent;
}
.ui-bulletgraph-range-palette-3 {
background-color: @chartGradualPalette5;
border: transparent;
}
.ui-bulletgraph-range-palette-4 {
background-color: @chartGradualPalette7;
border: transparent;
}
.ui-bulletgraph-range-palette-5 {
background-color: @chartGradualPalette9;
border: transparent;
}
/* ACTUAL VALUES */
.ui-bulletgraph-value {
background-color: @body-bg;
border: transparent;
}
/* TOOLTIPS */
.ui-bulletgraph-tooltip {
border-style: none;
white-space: nowrap;
background-color: transparent;
}
.ui-bulletgraph-range-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-bulletgraph-value-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-bulletgraph-targetvalue-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-bulletgraph {
font-family: @font-family-base;
font-size: 12px;
color: @text-color;
}
/***********************/
/* igLinearGauge Chart */
/***********************/
.ui-lineargauge-backing {
background-color: @body-bg;
border-color: @body-bg;
}
.ui-lineargauge-needle {
background-color: @gray-light;
border-color: @gray-light;
}
.ui-lineargauge-scale {
background-color: @gray-light;
border-color: @gray-light;
}
/* TICKS AND LABELS */
.ui-lineargauge-tick {
background-color: @gray-darker;
border: transparent;
}
.ui-lineargauge-minortick {
background-color: @gray-darker;
border: transparent;
}
.ui-lineargauge-label {
background-color: @gray-dark;
border: transparent;
}
/* RANGE VALUES */
.ui-lineargauge-range-palette-1 {
background-color: @chartGradualPalette1;
border: transparent;
}
.ui-lineargauge-range-palette-2 {
background-color: @chartGradualPalette3;
border: transparent;
}
.ui-lineargauge-range-palette-3 {
background-color: @chartGradualPalette5;
border: transparent;
}
.ui-lineargauge-range-palette-4 {
background-color: @chartGradualPalette7;
border: transparent;
}
.ui-lineargauge-range-palette-5 {
background-color: @chartGradualPalette9;
border: transparent;
}
/* TOOLTIPS */
.ui-lineargauge-tooltip {
border-style: none;
white-space: nowrap;
background-color: transparent;
}
.ui-lineargauge-range-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-lineargauge-needle-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-lineargauge {
font-family: @font-family-base;
font-size: 12px;
color: @text-color;
}

View File

@ -0,0 +1,103 @@
.financialChartToolbar .financialChartToolbar {
background: @chart-toolbar-background !important;
border-color: @chart-toolbar-border-color !important;
.ui-icon {
color:@text-color!important;
}
.ui-icon-toolbar-dd:before {
content: '';
border-color: @text-color transparent transparent transparent!important;
}
svg {
color: @text-color!important;
}
}
.financialChartIndicatorMenuDropDownButton {
color: @text-color!important;
&:hover {
.ui-icon-toolbar-dd:before {
content: '';
border-color: @brand-primary transparent transparent transparent!important;
}
}
}
.financialChartIndicatorMenu {
color: @text-color!important;
border-right-color:@chart-toolbar-border-color !important;
&:hover {
.financialChartIndicatorMenuDropDownButton,
.financialChartIndicatorMenuDropDownButton:after {
color: @brand-primary!important;
}
}
}
.financialChartTypePicker {
border-left-color: @chart-toolbar-border-color !important;
}
// Range selector section
.financialChartRangeSelectorLabel {
&:hover {
.financialChartRangeSelectorLabelSpan {
color: @brand-primary!important;
}
}
}
.financialChartRangeSelectorLabel input:checked + span {
color: @range-selector-active-color!important;
background-color: @range-selector-active-background!important;
}
.financialChartListItem {
&:hover {
color: @brand-primary!important;
.ui-icon {
color: @brand-primary!important;
}
}
}
.financialChartIndicatorMenuDropDownMenu,
.financialChartTypePickerDropDownMenu {
background: @body-bg!important;
}
.financialChartIndicatorMenuDropDownMenu li.checked,
.financialChartTypePickerDropDownMenu li.checked {
color: @brand-primary!important;
&:before {
color: @brand-primary!important;
}
&:hover,
&:hover {
color: darken(@brand-primary, 10%) !important;
}
}
.financialChartTypePickerDropDownButton {
&:hover {
.ui-icon {
color: @brand-primary!important;
}
.ui-icon-toolbar-dd:before {
content: '';
border-color: @brand-primary transparent transparent transparent!important;
}
}
}
.financialChartListItem[data-value='Auto'] {
border-bottom: 1px solid @chart-toolbar-border-color!important;
}

View File

@ -0,0 +1,86 @@
/***********/
/* igCombo */
/***********/
.ui-igedit.ui-state-hover,
.ui-igcombo.ui-state-hover {
border-color: @input-border-focus;
}
.ui-igedit-button-common.ui-state-highlight,
.ui-igedit-button-common.ui-state-hover,
.ui-igedit-button.ui-state-highlight,
.ui-igedit-button.ui-state-hover,
.ui-igcombo-button.ui-state-highlight,
.ui-igcombo-button.ui-state-hover {
border: inherit;
}
.ui-igedit.ui-state-focus,
.ui-igcombo.ui-state-focus,
.ui-igedit.ui-state-focus.ui-state-hover,
.ui-igcombo.ui-state-focus.ui-state-hover {
border-color: @input-border-focus;
}
.ui-igedit.ui-state-focus .ui-igedit-button-common,
.ui-igedit.ui-state-active .ui-igedit-button-common,
.ui-igcombo.ui-state-focus .ui-igcombo-button,
.ui-igcombo.ui-state-active .ui-igcombo-button {
background-color: @component-active-bg;
border-color: @btn-default-border;
}
.ui-igcombo.ui-state-hover,
.ui-igcombo.ui-state-default {
background-color: transparent;
}
.ui-igedit-input,
.ui-igcombo-fieldholder,
.ui-igcombo.ui-widget .ui-igcombo-clear.ui-unselectable,
.ui-igedit-cleararea,
.ui-igedit-cleararea.ui-state-hover,
.ui-igedit.ui-state-hover .ui-igedit-cleararea,
.ui-igedit.ui-state-focus .ui-igedit-cleararea
{
background: none @input-bg;
border: 0 none;
}
.ui-igcombo-clear .ui-icon,
.ui-igedit-buttonclear .ui-icon,
.ui-igedit-cleararea .ui-icon,
.ui-igedit.ui-state-focus .ui-igedit-cleararea .ui-icon,
.ui-igedit.ui-state-active .ui-igedit-cleararea .ui-icon,
.ui-igcombo.ui-state-active.ui-state-hover .ui-igcombo-clear .ui-icon {
color: @ui-icons-dark;
}
.ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit-cleararea.ui-state-default.ui-state-hover .ui-icon,
.ui-igedit.ui-state-hover .ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit.ui-state-focus .ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit.ui-state-active .ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit-buttonclear.ui-state-default.ui-state-hover .ui-icon,
.ui-igcombo-clear.ui-igcombo-clear-hover.ui-state-hover .ui-icon,
.ui-igcombo.ui-state-active .ui-igcombo-clear.ui-state-hover .ui-icon {
color: @ui-icons-darker;
}
.ui-igcombo-listitem-match {
font-weight: bold
}
.ui-igcombo-field {
color: #333;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-active,
.ui-igedit-list .ui-igedit-listitem.ui-state-active,
.ui-igcombo-listitem.ui-state-hover.ui-igcombo-item-in-focus,
.ui-igcombo-listitem.ui-state-active.ui-igcombo-item-in-focus,
.ui-igcombo-listitem.ui-state-default.ui-igcombo-item-in-focus {
background: @component-active-bg;
color: #FFF;
opacity: 0.8;
}

View File

@ -0,0 +1,310 @@
/***************/
/* HTML Editor */
/***************/
.ui-igbutton .ui-igbutton-table {
.stateActive;
}
.ui-ightmleditor {
background-color: @body-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar {
background-color: @navbar-default-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-igbutton,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton {
border-radius: 0;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-default,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-default {
background-color: transparent;
background-image: none;
border-color: transparent;
}
.ui-splitbutton.ui-state-default {
border-color: @btn-default-border;
}
.ui-splitbutton.ui-splitbutton-hover {
border-color: darken(@btn-default-border, 12%);
}
.ui-splitbutton.ui-state-active {
border-color: darken(@btn-primary-bg, 5%);
}
.ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button,
.ui-ightmleditor .ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button {
background-color: @brand-primary;
}
.ui-splitbutton-arrow .ui-icon {
color: @ui-icons-darker;
}
.ui-splitbutton-arrow.ui-state-hover .ui-icon,
.ui-splitbutton-arrow.ui-state-active .ui-icon,
.ui-splitbutton-arrow.ui-state-focus .ui-icon {
color: @ui-icons-light;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-hover,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-focus,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-focus {
.stateFocused;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-active,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-active {
.stateActive;
}
.ui-ightmleditor .ui-igcombo-fieldholder {
border-color: @input-border;
}
/* html editor icons*/
.ui-igbutton-viewsource.ui-state-default .ui-igbutton-viewsource-icon {
background-position: 0 -160px;
}
.ui-igbutton-viewsource.ui-state-hover .ui-igbutton-viewsource-icon {
background-position: -32px -160px;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover.ui-state-active {
.stateHover;
}
.ui-igbutton.ui-state-active .ui-igbutton-collapse,
.ui-igbutton.ui-state-focus .ui-igbutton-collapse {
background-position: -16px 0;
}
.ui-igbutton.ui-state-active .ui-igbutton-expand,
.ui-igbutton.ui-state-focus .ui-igbutton-expand {
background-position: -16px -16px;
}
.ui-igbutton.ui-state-active .ui-igbutton-redo,
.ui-igbutton.ui-state-focus .ui-igbutton-redo {
background-position: -16px -32px;
}
.ui-igbutton.ui-state-active .ui-igbutton-undo,
.ui-igbutton.ui-state-focus .ui-igbutton-undo {
background-position: -16px -48px;
}
.ui-igbutton.ui-state-active .ui-igbutton-increasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-increasefontsize {
background-position: -16px -80px;
}
.ui-igbutton.ui-state-active .ui-igbutton-decreasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-decreasefontsize {
background-position: -16px -96px;
}
.ui-igbutton.ui-state-active .ui-igbutton-viewsource,
.ui-igbutton.ui-state-focus .ui-igbutton-viewsource {
background-position: -16px -160px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html,
.ui-igbutton.ui-state-focus .ui-igbutton-html {
background-position: -16px -112px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-add,
.ui-igbutton.ui-state-focus .ui-igbutton-html-add {
background-position: -16px -128px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-delete,
.ui-igbutton.ui-state-focus .ui-igbutton-html-delete {
background-position: -16px -144px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-valid,
.ui-igbutton.ui-state-focus .ui-igbutton-html-valid {
background-position: -16px -176px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addimage,
.ui-igbutton.ui-state-focus .ui-igbutton-addimage {
background-position: -16px -192px;
}
.ui-igbutton.ui-state-active .ui-igbutton-link,
.ui-igbutton.ui-state-focus .ui-igbutton-link {
background-position: -16px -208px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addlink,
.ui-igbutton.ui-state-focus .ui-igbutton-addlink {
background-position: -16px -224px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unlink,
.ui-igbutton.ui-state-focus .ui-igbutton-unlink {
background-position: -16px -240px;
}
.ui-igbutton.ui-state-active .ui-igbutton-copy,
.ui-igbutton.ui-state-focus .ui-igbutton-copy {
background-position: -16px -256px;
}
.ui-igbutton.ui-state-active .ui-igbutton-cut,
.ui-igbutton.ui-state-focus .ui-igbutton-cut {
background-position: -16px -272px;
}
.ui-igbutton.ui-state-active .ui-igbutton-paste,
.ui-igbutton.ui-state-focus .ui-igbutton-paste {
background-position: -16px -288px;
}
.ui-igbutton.ui-state-active .ui-igbutton-table,
.ui-igbutton.ui-state-focus .ui-igbutton-table {
background-position: -16px -304px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addrow,
.ui-igbutton.ui-state-focus .ui-igbutton-addrow {
background-position: -16px -320px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addcolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-addcolumn {
background-position: -16px -336px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removerow,
.ui-igbutton.ui-state-focus .ui-igbutton-removerow {
background-position: -16px -352px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removecolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-removecolumn {
background-position: -16px -368px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyleft,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyleft {
background-position: -16px -384px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifycenter,
.ui-igbutton.ui-state-focus .ui-igbutton-justifycenter {
background-position: -16px -400px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyright,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyright {
background-position: -16px -416px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyfull,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyfull {
background-position: -16px -432px;
}
.ui-igbutton.ui-state-active .ui-igbutton-forecolor,
.ui-igbutton.ui-state-focus .ui-igbutton-forecolor {
background-position: -16px -448px;
}
.ui-igbutton.ui-state-active .ui-igbutton-backcolor,
.ui-igbutton.ui-state-focus .ui-igbutton-backcolor {
background-position: -16px -464px;
}
.ui-igbutton.ui-state-active .ui-igbutton-bold,
.ui-igbutton.ui-state-focus .ui-igbutton-bold {
background-position: -16px -480px;
}
.ui-igbutton.ui-state-active .ui-igbutton-italic,
.ui-igbutton.ui-state-focus .ui-igbutton-italic {
background-position: -16px -496px;
}
.ui-igbutton.ui-state-active .ui-igbutton-underline,
.ui-igbutton.ui-state-focus .ui-igbutton-underline {
background-position: -16px -512px;
}
.ui-igbutton.ui-state-active .ui-igbutton-strikethrough,
.ui-igbutton.ui-state-focus .ui-igbutton-strikethrough {
background-position: -16px -528px;
}
.ui-igbutton.ui-state-active .ui-igbutton-horizontalrule,
.ui-igbutton.ui-state-focus .ui-igbutton-horizontalrule {
background-position: -16px -544px;
}
.ui-igbutton.ui-state-active .ui-igbutton-indent,
.ui-igbutton.ui-state-focus .ui-igbutton-indent {
background-position: -16px -560px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removeindent,
.ui-igbutton.ui-state-focus .ui-igbutton-removeindent {
background-position: -16px -576px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unorderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-unorderedlist {
background-position: -16px -592px;
}
.ui-igbutton.ui-state-active .ui-igbutton-orderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-orderedlist {
background-position: -16px -608px;
}
.ui-ightmleditor-content iframe,
.ui-ightmleditor-content textarea {
border: 1px solid @input-border;
-webkit-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
-moz-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
}
/*breadcrumb styling*/
.ui-igPathFinder .ui-button::after {
border-top: 1px solid @btn-default-border;
border-right: 1px solid @btn-default-border;
background: @btn-default-bg;
}
.ui-igPathFinder .ui-button.ui-state-hover::after {
border-top: 1px solid darken(@btn-default-border, 12%);
border-right: 1px solid darken(@btn-default-border, 12%);
background: darken(@btn-default-bg, 8%);
}
.ui-igPathFinder .ui-button.ui-state-active::after {
border-top: 1px solid darken(@component-active-bg, 12%);
border-right: 1px solid darken(@component-active-bg, 12%);
background: @component-active-bg;
color: @component-active-color;
}

View File

@ -0,0 +1,310 @@
/***************/
/* HTML Editor */
/***************/
.ui-igbutton .ui-igbutton-table {
.stateActive;
}
.ui-ightmleditor {
background-color: @body-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar {
background-color: @navbar-default-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-igbutton,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton {
border-radius: 0;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-default,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-default {
background-color: transparent;
background-image: none;
border-color: transparent;
}
.ui-splitbutton.ui-state-default {
border-color: @btn-default-border;
}
.ui-splitbutton.ui-splitbutton-hover {
border-color: darken(@btn-default-border, 12%);
}
.ui-splitbutton.ui-state-active {
border-color: darken(@btn-primary-bg, 5%);
}
.ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button,
.ui-ightmleditor .ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button {
background-color: @brand-primary;
}
.ui-splitbutton-arrow .ui-icon {
color: @ui-icons-darker;
}
.ui-splitbutton-arrow.ui-state-hover .ui-icon,
.ui-splitbutton-arrow.ui-state-active .ui-icon,
.ui-splitbutton-arrow.ui-state-focus .ui-icon {
color: @ui-icons-light;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-hover,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-focus,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-focus {
.stateFocused;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-active,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-active {
.stateActive;
}
.ui-ightmleditor .ui-igcombo-fieldholder {
border-color: @input-border;
}
/* html editor icons*/
.ui-igbutton-viewsource.ui-state-default .ui-igbutton-viewsource-icon {
background-position: 0 -160px;
}
.ui-igbutton-viewsource.ui-state-hover .ui-igbutton-viewsource-icon {
background-position: -32px -160px;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover.ui-state-active {
.stateHover;
}
.ui-igbutton.ui-state-active .ui-igbutton-collapse,
.ui-igbutton.ui-state-focus .ui-igbutton-collapse {
background-position: -16px 0;
}
.ui-igbutton.ui-state-active .ui-igbutton-expand,
.ui-igbutton.ui-state-focus .ui-igbutton-expand {
background-position: -16px -16px;
}
.ui-igbutton.ui-state-active .ui-igbutton-redo,
.ui-igbutton.ui-state-focus .ui-igbutton-redo {
background-position: -16px -32px;
}
.ui-igbutton.ui-state-active .ui-igbutton-undo,
.ui-igbutton.ui-state-focus .ui-igbutton-undo {
background-position: -16px -48px;
}
.ui-igbutton.ui-state-active .ui-igbutton-increasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-increasefontsize {
background-position: -16px -80px;
}
.ui-igbutton.ui-state-active .ui-igbutton-decreasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-decreasefontsize {
background-position: -16px -96px;
}
.ui-igbutton.ui-state-active .ui-igbutton-viewsource,
.ui-igbutton.ui-state-focus .ui-igbutton-viewsource {
background-position: -16px -160px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html,
.ui-igbutton.ui-state-focus .ui-igbutton-html {
background-position: -16px -112px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-add,
.ui-igbutton.ui-state-focus .ui-igbutton-html-add {
background-position: -16px -128px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-delete,
.ui-igbutton.ui-state-focus .ui-igbutton-html-delete {
background-position: -16px -144px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-valid,
.ui-igbutton.ui-state-focus .ui-igbutton-html-valid {
background-position: -16px -176px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addimage,
.ui-igbutton.ui-state-focus .ui-igbutton-addimage {
background-position: -16px -192px;
}
.ui-igbutton.ui-state-active .ui-igbutton-link,
.ui-igbutton.ui-state-focus .ui-igbutton-link {
background-position: -16px -208px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addlink,
.ui-igbutton.ui-state-focus .ui-igbutton-addlink {
background-position: -16px -224px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unlink,
.ui-igbutton.ui-state-focus .ui-igbutton-unlink {
background-position: -16px -240px;
}
.ui-igbutton.ui-state-active .ui-igbutton-copy,
.ui-igbutton.ui-state-focus .ui-igbutton-copy {
background-position: -16px -256px;
}
.ui-igbutton.ui-state-active .ui-igbutton-cut,
.ui-igbutton.ui-state-focus .ui-igbutton-cut {
background-position: -16px -272px;
}
.ui-igbutton.ui-state-active .ui-igbutton-paste,
.ui-igbutton.ui-state-focus .ui-igbutton-paste {
background-position: -16px -288px;
}
.ui-igbutton.ui-state-active .ui-igbutton-table,
.ui-igbutton.ui-state-focus .ui-igbutton-table {
background-position: -16px -304px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addrow,
.ui-igbutton.ui-state-focus .ui-igbutton-addrow {
background-position: -16px -320px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addcolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-addcolumn {
background-position: -16px -336px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removerow,
.ui-igbutton.ui-state-focus .ui-igbutton-removerow {
background-position: -16px -352px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removecolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-removecolumn {
background-position: -16px -368px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyleft,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyleft {
background-position: -16px -384px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifycenter,
.ui-igbutton.ui-state-focus .ui-igbutton-justifycenter {
background-position: -16px -400px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyright,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyright {
background-position: -16px -416px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyfull,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyfull {
background-position: -16px -432px;
}
.ui-igbutton.ui-state-active .ui-igbutton-forecolor,
.ui-igbutton.ui-state-focus .ui-igbutton-forecolor {
background-position: -16px -448px;
}
.ui-igbutton.ui-state-active .ui-igbutton-backcolor,
.ui-igbutton.ui-state-focus .ui-igbutton-backcolor {
background-position: -16px -464px;
}
.ui-igbutton.ui-state-active .ui-igbutton-bold,
.ui-igbutton.ui-state-focus .ui-igbutton-bold {
background-position: -16px -480px;
}
.ui-igbutton.ui-state-active .ui-igbutton-italic,
.ui-igbutton.ui-state-focus .ui-igbutton-italic {
background-position: -16px -496px;
}
.ui-igbutton.ui-state-active .ui-igbutton-underline,
.ui-igbutton.ui-state-focus .ui-igbutton-underline {
background-position: -16px -512px;
}
.ui-igbutton.ui-state-active .ui-igbutton-strikethrough,
.ui-igbutton.ui-state-focus .ui-igbutton-strikethrough {
background-position: -16px -528px;
}
.ui-igbutton.ui-state-active .ui-igbutton-horizontalrule,
.ui-igbutton.ui-state-focus .ui-igbutton-horizontalrule {
background-position: -16px -544px;
}
.ui-igbutton.ui-state-active .ui-igbutton-indent,
.ui-igbutton.ui-state-focus .ui-igbutton-indent {
background-position: -16px -560px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removeindent,
.ui-igbutton.ui-state-focus .ui-igbutton-removeindent {
background-position: -16px -576px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unorderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-unorderedlist {
background-position: -16px -592px;
}
.ui-igbutton.ui-state-active .ui-igbutton-orderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-orderedlist {
background-position: -16px -608px;
}
.ui-ightmleditor-content iframe,
.ui-ightmleditor-content textarea {
border: 1px solid @input-border;
-webkit-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
-moz-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
}
/*breadcrumb styling*/
.ui-igPathFinder .ui-button::after {
border-top: 1px solid @btn-default-border;
border-right: 1px solid @btn-default-border;
background: @btn-default-bg;
}
.ui-igPathFinder .ui-button.ui-state-hover::after {
border-top: 1px solid darken(@btn-default-border, 12%);
border-right: 1px solid darken(@btn-default-border, 12%);
background: darken(@btn-default-bg, 8%);
}
.ui-igPathFinder .ui-button.ui-state-active::after {
border-top: 1px solid darken(@component-active-bg, 12%);
border-right: 1px solid darken(@component-active-bg, 12%);
background: @component-active-bg;
color: @component-active-color;
}

View File

@ -0,0 +1,733 @@
/**********/
/* igGrid */
/**********/
.ui-iggrid table tbody td,
.ui-iggrid .ui-iggrid-header,
.ui-iggrid table th {
/*padding: 10px;*/
}
.ui-iggrid th,
.ui-iggrid th.ui-widget-header.ui-state-default {
border-top: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-groupbyarea {
background-color: @body-bg;
border-color: @table-border-color;
color: @text-color;
}
.ui-iggrid-groupedcolumnlabel {
box-shadow: 0 0 2em 0 fade(@table-border-color, 15%) inset;
//in case the body-bg is the same as the default button bg
}
.ui-iggrid-groupbylabelrightedgeend {
border-color: @body-bg @body-bg @body-bg transparent!important;
}
/*grid paging*/
.ui-iggrid-pagelist li {
padding: 0.2em 0.5em !important;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-firstpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-prevpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-nextpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-lastpage,
.ui-iggrid-pagedropdownlabels {
padding-top: 0.2em!important;
padding-bottom: 0.2em!important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
.stateNormal;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging .ui-iggrid-page.ui-state-hover,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging .ui-iggrid-paging-item.ui-state-hover {
.stateHover;
}
.ui-iggrid-paging .ui-iggrid-pagelist {
background: none!important;
border: none!important;
}
/*row selectors*/
.ui-iggrid tbody>tr>th.ui-iggrid-rowselector-class {
border-right: 0 none!important;
background-color: transparent;
}
.ui-iggrid th.ui-iggrid-rowselector-class > .ui-icon {
margin-right: 0!important;
margin-top: 0.2em;
}
//.ui-iggrid-rowselector-header,
.ui-iggrid .ui-iggrid-addrow th {
border: 0;
}
.ui-widget-content.ui-iggrid-buttoncontainer {
.boxShadow;
}
.ui-iggrid .ui-iggrid-content {
border-color: @table-border-color;
}
.ui-iggrid tr.ui-ig-altrecord {
background-color: @table-bg-accent;
}
/* adding lateral borders to the table (by design) */
.ui-iggrid .ui-iggrid-tablebody>tr>td:first-child,
.ui-iggrid .ui-iggrid-table>tbody>tr>td:first-child,
.ui-iggrid thead .ui-iggrid-editingcell:first-child,
.ui-iggrid .ui-iggrid-addrow + .ui-iggrid-activerow td:first-child,
.ui-iggrid th.ui-iggrid-rowselector-class:first-child {
border-left: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-tablebody>tr>td:last-child,
.ui-iggrid .ui-iggrid-table>tbody>tr>td:last-child,
.ui-iggrid thead .ui-iggrid-editingcell:last-child {
border-right: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-coldesc,
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-colasc {
border-bottom: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-addrow {
border-bottom: 0;
}
/* Bug 214415 18.02.2016 S.D. Missing borders; new classes for a MRL grid */
.ui-iggrid .ui-iggrid-table-mrl tbody td {
border:1px solid @table-border-color;
}
/* footer summary tables*/
.ui-iggrid tfoot td {
border-color: @table-border-color;
}
.ui-iggrid tfoot tr:first-child td,
.ui-iggrid > table tfoot tr:first-child td {
border-top-width: 0!important;
}
.ui-iggrid .ui-iggrid-footertable tfoot tr:last-child td {
border-bottom-width: 0!important;
}
.ui-iggrid .ui-iggrid-summaries-footer-icon-container.ui-state-hover {
.stateHover;
}
.ui-iggrid .ui-iggrid-summaries-footer-icon-container.ui-state-active {
.stateActive!important;
}
.ui-iggrid .ui-iggrid-summaries-footer-icon-container.ui-state-active .ui-icon {
color: @iggrid-icons-light!important;
}
.ui-iggrid tfoot,
.ui-iggrid-footer {
border-bottom: 1px solid @table-border-color !important;
}
.ui-iggrid .ui-iggrid-scrolldiv {
background-color: @table-bg-accent;
box-shadow: inset 0 0 0 1px @table-border-color;
border-bottom: 1px solid @table-border-color !important;
/* !important needed because layout css removes borders */
}
.ui-iggrid .ui-iggrid-scrolldiv:first-child,
.ui-iggrid > table tr:first-child td,
/*.ui-iggrid > table > tbody tr:first-child th, removed for hierarchical grid issues */
.ui-iggrid-responsive-vertical,
.ui-iggrid > table tr:first-child th.ui-iggrid-rowselector-class {
border-top: 1px solid @table-border-color!important;
/* border-top for tables without headers */
}
.ui-iggrid.ui-igpivotgrid > table tr:first-child td {
border-bottom: 1px solid @table-border-color!important;
}
.ui-iggrid.ui-igpivotgrid > table > tbody tr:first-child th {
border-top: none!important;
}
.ui-iggrid-layout-helper {
border-bottom: 1px solid @table-border-color;
}
.ui-iggrid-layout-helper > tbody > tr:first-child > td th {
border-top: 0 !important;
}
.ui-iggrid .ui-widget-header,
.ui-iggrid th,
.ui-iggrid th.ui-state-default {
background-color: #0b3250;
color: #fffff;
border-color: @table-border-color;
border-right: 1px solid @table-border-color;
}
//if the theme has dark grid headers change the image to @iggrid-icons-light
.ui-iggrid th .ui-iggrid-indicatorcontainer .ui-iggrid-summaries-header-icon.ui-icon {
background: @iggrid-icons-dark no-repeat scroll -416px 0 transparent;
}
//if the theme has a dark button hover state change the image to @iggrid-icons-light
.ui-iggrid th .ui-iggrid-indicatorcontainer .ui-iggrid-summaries-header-icon.ui-icon {
background: @iggrid-icons-dark no-repeat scroll -416px 0 transparent;
}
.ui-iggrid th:first-child {
border-left: 1px solid @table-border-color;
}
.ui-iggrid > table > tbody tr:first-child th.ui-igpivotgrid-header {
border-top-color: @table-border-color!important;
}
.ui-iggrid th a,
.ui-iggrid th.ui-state-default a,
.ui-iggrid th.ui-state-hover a,
.ui-iggrid th.ui-state-active a {
color: @text-color;
}
.ui-iggrid th.ui-state-hover {
background: @table-bg-hover;
}
.ui-iggrid th.ui-state-active,
.ui-iggrid th.ui-state-focus,
.ui-iggrid-sortableheader:focus{
background: @table-bg-active;
}
.ui-iggrid .ui-iggrid-footer,
.ui-iggrid .ui-iggrid-toolbar {
display: block;
}
.ui-iggrid .ui-iggrid-footer,
.ui-iggrid .ui-iggrid-toolbar,
.ui-iggrid .ui-iggrid-addrow td,
.ui-iggrid .ui-iggrid-addrow th {
background-color: @table-border-color;
font-weight: normal;
text-align: left;
color: @text-color;
border: none;
}
.ui-iggrid .ui-iggrid-footer .ui-state-default,
.ui-iggrid .ui-iggrid-toolbar .ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-state-hover {
background-color: @table-bg;
color: @text-color;
text-decoration: none;
}
.ui-iggrid .ui-iggrid-footer .ui-state-default a,
.ui-iggrid .ui-iggrid-toolbar .ui-state-default a,
.ui-iggrid .ui-iggrid-addrow td a,
.ui-iggrid .ui-iggrid-footer .ui-state-default a {
color: @btn-default-color;
text-decoration: none;
}
.ui-iggrid tbody .ui-icon,
.ui-iggrid .ui-iggrid-addrow td .ui-icon {
color: @ui-icons-dark;
}
.ui-iggrid .ui-igedit-button .ui-icon,
.ui-igpivot-metadataitem .ui-icon-close {
color: @ui-icons-dark;
}
.ui-igpivot-metadataitem {
outline: red!important
}
.ui-iggrid th .ui-icon,
.ui-iggrid th.ui-state-active.ui-state-hover .ui-icon {
color: @ui-icons-dark;
}
.ui-iggrid th.ui-state-hover .ui-icon,
.ui-iggrid th.ui-state-active.ui-state-hover .ui-icon {
color: @ui-icons-darker;
}
/* BUG 246065 Marin Popov 23.12.2017 Grid's header and body are misaligned when a grid is Multi Row Layout and is continuous virtualization mode.*/
.ui-iggrid tbody td {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.ui-iggrid-headertable-mrl.ui-iggrid-headertable-mrl-scrollable,
.ui-iggrid .ui-iggrid-table-mrl tbody td {
border-right: 1px solid @table-border-color;
}
/* BUG 246065 END */
.ui-iggrid tbody td,
.ui-iggrid thead .ui-iggrid-editingcell,
.ui-iggrid tbody th.ui-iggrid-rowselector-class,
.ui-iggrid tfoot td {
border-top: 1px solid transparent;
border-bottom: 1px solid @table-border-color;
}
/*sorting*/
.ui-iggrid td.ui-state-highlight {
background: none;
background-color: @table-bg-active;
color: @text-color;
font-weight: normal;
border: 0 none;
}
/* hover */
.ui-iggrid td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-default.ui-state-hover,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-default.ui-state-hover,
.ui-iggrid-responsive-vertical tr > td.ui-state-hover:first-child,
.ui-iggrid-responsive-vertical tr.ui-ig-altrecord > td.ui-state-hover:first-child {
color: @text-color;
background: @table-bg-hover;
border-top: 1px solid transparent;
border-bottom: 1px solid @table-border-color;
}
.ui-iggrid td.ui-state-hover a,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover a {
color: @link-color;
text-shadow: none;
}
.ui-iggrid td.ui-state-hover a:hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover a:hover {
color: @link-hover-color;
}
.ui-iggrid tbody td:first-child,
.ui-iggrid tbody .ui-ig-altrecord td:first-child,
.ui-iggrid tbody th.ui-iggrid-rowselector-class:first-child,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-default.ui-state-hover {}
/* active cells */
.ui-iggrid td.ui-state-focus,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-focus {
background-image: none;
}
.ui-ig-altrecord td.ui-state-focus,
.ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-focus {
background: @table-bg-accent none;
}
/* active rows */
.ui-iggrid tr.ui-state-focus {
background: @table-bg none;
}
.ui-iggrid .ui-ig-altrecord.ui-state-focus {
background: @table-bg-accent none;
}
.ui-iggrid tr.ui-state-focus td,
.ui-iggrid tr.ui-state-focus th,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus th {
border-top: 1px solid @brand-primary!important;
border-bottom: 1px solid @brand-primary!important;
}
.ui-iggrid td.ui-state-active.ui-state-focus,
.ui-iggrid td.ui-state-focus {
border: 1px solid @brand-primary!important;
}
/*fix padding to prevent jump when adding borders on focus*/
.ui-iggrid tr.ui-state-focus td,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td,
.ui-iggrid td.ui-state-active.ui-state-focus,
.ui-iggrid td.ui-state-focus {
padding-left: 4px;
padding-right: 4px;
}
.ui-iggrid-activerow .ui-iggrid-selectedcell .ui-state-active {
border-color: transparent!important;
}
/* selected rows */
.ui-iggrid td.ui-state-active,
.ui-iggrid .ui-ig-altrecord td.ui-state-active,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-active,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-active,
.ui-iggrid tbody .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid tbody .ui-iggrid-mergedcellstop.ui-state-active,
.ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcellstop.ui-state-active {
background: @table-bg-active;
color: @text-color;
border-color: @table-bg-active;
}
/* Focus state on paging buttons */
.ui-iggrid .ui-iggrid-paging-item.ui-state-focus,
.ui-iggrid .ui-iggrid-paging-item.ui-state-default.ui-state-focus,
.ui-iggrid .ui-iggrid-page.ui-state-focus,
.ui-iggrid .ui-iggrid-pageui-state-default.ui-state-focus {
.stateActive;
}
.ui-iggrid .ui-iggrid-paging-item.ui-state-focus span,
.ui-iggrid .ui-iggrid-paging-item.ui-state-default.ui-state-focus span,
.ui-iggrid .ui-iggrid-page.ui-state-focus a,
.ui-iggrid .ui-iggrid-pageui-state-default.ui-state-focus a {
.stateNormal;
}
.ui-iggrid-page .ui-state-default {
.stateNormal;
}
.ui-iggrid .ui-iggrid-paging-item.ui-state-focus .ui-icon,
.ui-iggrid .ui-iggrid-paging-item.ui-state-default.ui-state-focus .ui-icon {
color: @ui-icons-dark;
}
/* Dropdowns */
.ui-igedit-list .ui-igedit-listitem {
font-size: 1em;
line-height: 1.4em;
}
.ui-iggrid-filterbutton {
border: 1px solid transparent;
}
.ui-state-hover .ui-icon.ui-iggrid-filterbutton.ui-state-hover,
.ui-state-hover .ui-icon.ui-iggrid-filterbutton,
.ui-iggrid-filterbutton.ui-state-active,
.ui-iggrid-filterbutton.ui-state-focus {
color: @brand-primary;
}
.ui-igedit-dropdown,
.ui-iggrid-filterdd,
.ui-iggrid-featurechooser-dropdown-dialog,
.ui-widget.ui-widget-content.ui-igpivot-filterdropdown,
.ui-widget.ui-widget-content.ui-igpivot-metadatadropdown {
background: @body-bg;
border: 1px solid @gray-lighter;
}
/*fix dialogs*/
.ui-iggrid-summaries-dialog {
background-color: @body-bg!important; // needed to override structure css
}
.ui-iggrid-summaries-dialog label {
color: @text-color;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-default,
.ui-igedit-list .ui-igedit-listitem.ui-state-default,
.ui-iggrid-filterddlist li.ui-state-default,
.ui-iggrid-featurechooser-list li.ui-state-default,
.ui-iggrid-hiding-dropdown-list li.ui-state-default,
.ui-iggrid-columnmoving-dropdown-list li.ui-state-default,
.ui-igcombo-listitemholder li.ui-state-default {
color: @text-color;
background-color: @body-bg;
border: 1px solid transparent;
}
// Bug:220147 06.16.2017 Marin Popov
// Fix hover background matches text color
.ui-iggrid-featurechooser-list li.ui-state-default:hover .ui-iggrid-featurechooserddlistitemtext {
color: @gray;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-hover,
.ui-igedit-list .ui-igedit-listitem.ui-state-hover,
.ui-iggrid-filterddlist li.ui-state-hover,
.ui-iggrid-filterddlistitem.ui-state-hover a,
.ui-iggrid-featurechooser-list.ui-state-hover a,
.ui-iggrid-hiding-dropdown-list li.ui-state-hover,
.ui-iggrid-hiding-dropdown-list.ui-state-hover a,
.ui-iggrid-columnmoving-dropdown-list li.ui-state-hover,
.ui-iggrid-columnmoving-dropdown-list.ui-state-hover a,
.ui-igcombo-listitemholder li.ui-state-hover,
.ui-igcombo-listitemholder li.ui-state-hover a,
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-default.ui-igedit-listitemactive{
.stateHover;
}
.ui-iggrid-filterddlist li.ui-state-active,
.ui-iggrid-filterddlistitem.ui-state-active a,
.ui-iggrid-featurechooser-list li.ui-state-active,
.ui-iggrid-featurechooser-list.ui-state-active a,
.ui-iggrid-hiding-dropdown-list li.ui-state-active,
.ui-iggrid-hiding-dropdown-list.ui-state-active a,
.ui-iggrid-columnmoving-dropdown-list li.ui-state-active,
.ui-iggrid-columnmoving-dropdown-list.ui-state-active a,
.ui-igcombo-listitemholder li.ui-state-active,
.ui-igcombo-listitemholder li.ui-state-active a {
.stateActive;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-highlight,
.ui-igedit-list .ui-igedit-listitem.ui-state-highlight,
.ui-igcombo-listitemholder li.ui-state-highlight,
.ui-igcombo-listitemholder li.ui-state-highlight a {
.stateActive;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-hover a,
.ui-igedit-list .ui-igedit-listitem.ui-state-hover a,
.ui-igedit-list .ui-igedit-listitem.ui-state-active a {
color: #FFFFFF;
}
/* Group by */
.ui-iggrid tbody td.ui-iggrid-nongrouprowemptycell,
.ui-iggrid tbody .ui-ig-altrecord td.ui-iggrid-nongrouprowemptycell {
background-color: @body-bg;
box-shadow: none;
}
.ui-iggrid tbody td.ui-iggrid-nongrouprowemptycell.ui-state-hover {
background-image: none;
}
.ui-iggrid .ui-iggrid-tablebody td.ui-iggrid-nongrouprowemptycell.ui-iggrid-last-emptycell {
/*box-shadow: inset 0 -1px 0 #E2E2E2;*/
border-bottom: 1px solid @table-border-color;
}
.ui-draggable-dragging .ui-iggrid-headertext {
font-family: @font-family-base;
}
.ui-iggrid-dragMarkup {
z-index: 10000;
}
/* Hierarchical grid */
.ui-iggrid-expandcolumn-expanded {
border-bottom-width: 0!important;
box-shadow: none!important;
/*tabbed look*/
}
.ui-iggrid-expandcolumn-expanded.ui-state-focus {
border-bottom-width: 1px!important;
/*tabbed look*/
}
.ui-ig-altrecord + tr > td.ui-iggrid-childarea {
background-color: @table-bg-accent;
/* expanded from altrecord should have the same bg colour */
border-color: transparent @table-border-color @table-border-color;
}
/* Feature Chooser */
.ui-iggrid-featurechooser-list .item-selected .ui-iggrid-featurechooserddlistitemtext {
text-shadow: none;
}
.ui-iggrid-featurechooser-list li.ui-state-default,
.ui-iggrid-featurechooser-list li.ui-state-hover {
border-width: 0;
}
/* modal dialog */
.ui-iggrid .ui-widget-content.ui-dialog {
border: 1px solid @panel-default-border;
}
.ui-iggrid-modaldialog-caption-buttoncontainer .ui-button.ui-state-hover {
background: @btn-primary-bg;
border: 1px solid @btn-primary-border;
box-shadow: none;
}
.ui-iggrid-modaldialog-caption-buttoncontainer .ui-button.ui-state-hover .ui-button-text {
color: @btn-primary-color;
}
.ui-iggrid-dialog-groupby-button a,
.ui-iggrid-columnchooser-item a,
.ui-iggrid-sorting-dialog-unsortedcolumns-sortbybutton a {
text-decoration: none;
}
/* Summaries */
.ui-iggrid .ui-widget-footer,
.ui-iggrid .ui-iggrid-footertable {
background: @table-bg;
border-bottom: 1px solid @table-border-color;
border-right: 1px solid @table-border-color;
}
.ui-iggrid tfoot td.ui-widget-content,
.ui-iggrid tfoot td.ui-state-default {
background-color: transparent;
color: @text-color;
border-color: @table-border-color;
border-style: solid;
}
.ui-iggrid tfoot td.ui-state-hover {
background-color: @table-bg-hover;
}
.ui-iggrid tfoot td.ui-state-default .ui-icon {
color: @ui-icons-darker;
}
/* Column Moving custom icons */
.ui-iggrid-columnmoving-dragtop {
background: transparent @ui-icons-darker no-repeat scroll -65px -12px!important;
}
.ui-iggrid-columnmoving-dragbottom {
background: transparent @ui-icons-darker no-repeat scroll 0 -20px!important;
}
.ui-iggrid-indicatorcontainer .ui-iggrid-moving-indicator {
color: @iggrid-icons-dark;
}
/* Grid Updating */
@-webkit-keyframes addingHighlight {
0% {
background-color: @brand-primary;
}
100% {
background-color: transparent;
}
}
@-moz-keyframes addingHighlight {
0% {
background-color: @brand-primary;
}
100% {
background-color: transparent;
}
}
.ui-iggrid-modifiedrecord > td {
-webkit-animation-name: addingHighlight;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-moz-animation-name: addingHighlight;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-o-animation-name: addingHighlight;
-o-animation-timing-function: ease-in-out;
-o-animation-duration: 1s;
animation-name: addingHighlight;
animation-timing-function: ease-in-out;
animation-duration: 1s;
}
.ui-iggrid-modifiedrecord > td {
background-color: transparent;
color: @gray-light;
}
/* Merged cells */
.ui-iggrid .ui-iggrid-mergedcell,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight {
background-color: @body-bg;
}
.ui-iggrid .ui-iggrid-mergedcell,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-mergedcell.ui-iggrid-coldesc,
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-mergedcell.ui-iggrid-colasc {
color: @gray-lighter;
border-bottom-color: transparent;
}
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell,
.ui-iggrid .ui-iggrid-mergedcellstop {
border-left-color: transparent;
}
.ui-iggrid .ui-iggrid-mergedcellstop.ui-state-highlight,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-highlight {
border-left-color: transparent;
}
.ui-iggrid .ui-iggrid-mergedcellstop,
.ui-iggrid .ui-iggrid-mergedcellstop.ui-state-highlight,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcellstop,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcellstop.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-highlight {
background-color: @body-bg;
border-bottom-color: transparent;
box-shadow: none;
}
.ui-iggrid .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-focus,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-focus {
color: #FFF;
}
.ui-iggrid tbody .ui-iggrid-mergedcell.ui-state-hover,
.ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-hover {
background-color: @table-bg-hover;
color: @text-color;
}
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcellsbottom.ui-state-highlight,
.ui-iggrid .ui-iggrid-mergedcellsbottom.ui-state-highlight {
border-bottom-color: @table-border-color;
}
.ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
border-bottom: 1px solid @table-border-color;
}

View File

@ -0,0 +1,10 @@
/*****************/
/* Notifier */
/****************/
.ui-igpopover.ui-ignotify-error .ui-icon {
color: @ui-icons-light;
}
.ui-igpopover.ui-ignotify-error.ui-ignotify-inline .ui-icon {
color: @ui-icons-dark;
}

View File

@ -0,0 +1,34 @@
/****************/
/* igPivot Grid */
/****************/
.ui-igpivot-metadataitem.ui-state-default {
background: @btn-default-bg;
border: 1px solid @btn-default-border;
color: @btn-default-color;
}
.ui-igpivot-metadataitem .ui-widget .ui-corner-all .ui-state-default .ui-draggable {
color: @text-color;
}
.ui-igpivot-metadataitem .ui-icon.ui-icon-close {
color: @ui-icons-dark;
}
.ui-igpivotgrid .ui-igpivot-metadataitem .ui-icon-pivot-smallfilter,
.ui-igpivot-droparea .ui-igpivot-metadataitem .ui-icon-pivot-smallfilter {
background-position: -64px 0!important;
}
.ui-igpivot-filterdropdown .ui-igtree-node {
line-height: 2em!important;
}
.ui-igpivot-filterdropdown .ui-igtree-expander {
top: 1em!important;
}
.ui-igpivot-filterdropdown span[data-role=checkbox] {
margin-top: 0.65em;
}

View File

@ -0,0 +1,7 @@
/*****************/
/* Popover */
/****************/
.ui-igpopover > .ui-widget-content {
.boxShadow;
}

View File

@ -0,0 +1,48 @@
/************/
/* igRating */
/************/
.ui-igrating,
.ui-igrating.ui-state-default {
background: transparent none;
border: none;
}
.ui-icon.ui-igrating-vote,
.ui-iggrid .ui-icon.ui-igrating-vote {
background-image: url(images/igRating/ig-rating.png);
background-position: -75px 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-voteselected,
.ui-iggrid .ui-icon.ui-igrating-voteselected {
background-image: url(images/igRating/ig-rating.png);
background-position: 0 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-votehover,
.ui-iggrid .ui-icon.ui-igrating-votehover {
background-image: url(images/igRating/ig-rating.png);
background-position: -25px 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-votedisabled,
.ui-iggrid .ui-icon.ui-igrating-votedisabled {
background-image: url(images/igRating/ig-rating.png);
background-position: -100px 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-votedisabledselected,
.ui-iggrid .ui-icon.ui-igrating-votedisabledselected {
background-image: url(images/igRating/ig-rating.png);
background-position: -50px 0;
width: 20px;
height: 20px;
}

View File

@ -0,0 +1,325 @@
/* ============
Scheduler
============= */
#scheduler {
background: @scheduler-bg;
}
.ui-igscheduler-core .ui-igscheduler-agendaview {
background-color: @scheduler-agenda-view-bg;
}
.ui-igscheduler-core .ui-igscheduler-agendaview-day-header {
background-color: transparent;
color: @scheduler-text-color;
border-color: @scheduler-border-color !important;
}
.ui-igscheduler-core .ui-igscheduler-agendaview-message {
font-size: 1.1em;
}
.ui-igscheduler-header {
background:@scheduler-header-bg;
border-color: @scheduler-header-border-color;
}
.ui-igscheduler-tabs {
color: @scheduler-tabs-color;
}
.ui-igscheduler-tabs.ui-igscheduler-tabs-selected {
color: @scheduler-tabs-selected-text-color;
.ui-icon {
color: @scheduler-tabs-selected-icons-color;
}
}
.ui-igscheduler-tabs.ui-igscheduler-tabs-selected:hover,
.ui-igscheduler-tabs.ui-igscheduler-tabs-selected:active {
color: @scheduler-tabs-selected-hover;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-selected,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-start-time,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-subject {
color: @scheduler-text-color
}
.ui-igscheduler-core .ui-igscheduler-monthview-day,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-end-time {
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-of-week-header,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-location {
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-selected {
background-color: @scheduler-agenda-appt-selected;
}
// Vertical Separator
.ui-igscheduler-core .ui-igscheduler-dayweek-vertical-separator,
.ui-igscheduler-core .ui-igscheduler-monthview-day-vertical-separator {
background-color: @scheduler-border-color;
}
// Horizontal Separator
.ui-igscheduler-core .ui-igscheduler-dayweek-horizontal-separator,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-horizontal-separator,
.ui-igscheduler-core .ui-igscheduler-monthview-day-horizontal-separator{
background-color: @scheduler-border-color;
}
.ui-igscheduler-agendaview .null {
background-color: @scheduler-border-color !important;
}
.ui-igscheduler-monthview {
box-shadow: 1px 2px 15px darken(@scheduler-shadow-color, 20%);
z-index: 1;
}
.ui-igscheduler-core .ui-igscheduler-monthview-dayday-selected {
background-color: @scheduler-month-view-dayday-selected-bg;
color: @scheduler-month-view-dayday-selected-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-today-indicator {
background: @scheduler-month-view-day-today-indicator-bg;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-today span,
.ui-igscheduler-core .ui-igscheduler-monthview-day-today {
color: @scheduler-month-view-day-today-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-month-header {
background-color: @scheduler-month-view-month-header-bg;
color: white;
}
.ui-igscheduler-core .ui-igscheduler-monthview-week-header {
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-leading,
.ui-igscheduler-core .ui-igscheduler-monthview-day-trailing {
background-color: @scheduler-month-view-day-leading-bg;
color:@scheduler-month-view-day-leading-color;
}
.ui-igscheduler-selectall {
background-color: @scheduler-selectall-bg;
}
.ui-igscheduler-navigator-disabled-date-range-button {
color: @scheduler-text-color;
}
.ui-igscheduler-navigator-next-button:hover {
color: @scheduler-text-color;
}
.ui-igscheduler-navigator-next-button:hover span:after,
.ui-igscheduler-navigator-previous-button:hover span:after {
border-color: @brand-primary;
}
.ui-igscheduler-navigator-back-button:hover,
.ui-igscheduler-navigator-date-range-button:hover,
.ui-igscheduler-navigator-forward-button:hover {
background-color: @scheduler-navigator-back-button-hover-bg;
}
.ui-igscheduler-today-button {
color:@scheduler-text-color;
}
.ui-igscheduler-today-button:hover {
background-color: @scheduler-today-button-hover-bg;
color: @scheduler-today-button-hover-color;
}
.ui-igscheduler-tabs:hover {
background-color: @scheduler-tabs-hover-bg;
color: @scheduler-tabs-hover-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-start-time-selected {
color: @scheduler-start-time-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-end-time-selected {
color:@scheduler-end-time-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-subject-selected {
color: @scheduler-selected-subject-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-location-selected {
color: lighten(@scheduler-selected-location-color, 15%);
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-area {
margin: 10px 0;
}
.ui-igscheduler-core .ui-igscheduler-monthview {
background-color: @scheduler-month-view-bg;
}
.ui-igscheduler-core .ui-igscheduler-monthview-activity-indicator {
background-color: @scheduler-activity-indicator-bg;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-appointment {
font-size: .75em;
}
.ui-igscheduler-tabs,
.ui-igscheduler-today-button {
.ui-icon {
margin-top: -9px !important;
}
}
#scheduler .ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-selected {
background-color : @scheduler-day-week-timeslot-selected;
}
/* Week & day views */
.ui-igscheduler-core .ui-igscheduler-dayweekview {
background-color: @scheduler-day-week-view-bg;
}
.ui-igscheduler-core .ui-igscheduler-allday-event-area {
background-color: @scheduler-all-day-event-area-bg;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-appt {
background-color: @scheduler-day-week-appt-bg;
height: auto!important;
}
.ui-igscheduler-core .ui-igscheduler-allday-event-subject {
font-size: .5em;
background-color: @scheduler-all-day-event-subject-bg;
color: @scheduler-all-day-event-subject-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-appt-location {
font-size: 1em;
background-color: @scheduler-day-week-appt-location-bg;
color: @scheduler-day-week-appt-location-color;
}
/*
.ui-igscheduler-core .ui-igscheduler-dayweek-appt-color-bar {}
.ui-igscheduler-core .ui-igscheduler-dayweek-header-area {}
.ui-igscheduler-core .ui-igscheduler-dayweek-topleft-corner {}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-descriptor-area {}
*/
.ui-igscheduler-core .ui-igscheduler-dayweek-appt-subject {
background-color: @scheduler-day-week-appt-subject-bg;
color: @scheduler-day-week-appt-subject-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-day-header {
font-size: .8em;
background-color: @scheduler-day-week-day-header-bg;
color: @scheduler-day-week-day-header-color;
}
.ui-igscheduler-monthview-day-selected {
background: @scheduler-month-view-day-selected;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-navigation-header-date-text {
font-size: 1em;
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-resource-header {
font-size: 1.1em;
background-color: transparent;
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot {
background-color: @scheduler-day-week-timeslot-bg;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-descriptor {
font-size: .8em;
background-color: @scheduler-day-week-timeslot-descripto-bg;
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-working-hour {
background-color: @scheduler-day-week-timeslot-working-hour-bg;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-selected {
background-color:@scheduler-day-week-timeslot-selected-bg;
}
/* Styles for jQuery 1.12.1*/
.ui-igspreadsheet .ui-menu .ui-menu-item-wrapper.ui-state-active {
background: @brand-primary;
color: #fff;
.ui-icon {
color: #fff;
}
}
/* 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: @brand-primary;
.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 */

View File

@ -0,0 +1,19 @@
/**************/
/* igSplitter */
/**************/
.ui-igsplitter-splitbar-horizontal.ui-state-default,
.ui-igsplitter-splitbar-vertical.ui-state-default {
background: none @btn-default-bg;
border-color: transparent;
}
.ui-igsplitter-splitbar-horizontal.ui-state-hover,
.ui-igsplitter-splitbar-vertical.ui-state-hover {
background: none @component-active-bg;
border-color: transparent;
}
.ui-igsplitter.ui-widget-content {
border: 0;
}

View File

@ -0,0 +1,414 @@
/*
=========================
Spreadsheet colors
=========================
*/
.ui-igspreadsheet {
background: #fff;
}
.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: @igGray5;
}
/* SelectAll */
.ui-igspreadsheet-selectall {
color: @spreadsheet-accent;
}
.ui-igspreadsheet-selectall.ui-state-active {
color: @spreadsheet-accent;
background-color: @spreadsheet-accent;
}
/* 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;
}
/* TabItem
=========
*/
/* 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: @brand-primary;
}
/* 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: darken(@row-col-bar-border, 10%);
}
.ui-igspreadsheet-rowheader {
border-bottom-color: darken(@row-col-bar-border, 10%);
}
/* 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: @btn-primary-color;
}
.ui-igspreadsheet-columnheader-selected.ui-state-highlight,
.ui-igspreadsheet-rowheader-selected.ui-state-highlight {
color: #fff;
}
/* Selected cel, header col & row background and color */
.ui-igspreadsheet-columnheader-selectedcells,
.ui-igspreadsheet-rowheader-selectedcells {
background-color: @spreadsheet-accent;
color: @btn-primary-color;
}
/* Selected cel, header col & row border color */
.ui-igspreadsheet-columnheader-selectedcells {
border-right-color: darken(@row-col-bar-border, 10%);
}
.ui-igspreadsheet-rowheader-selectedcells {
border-bottom-color: darken(@row-col-bar-border, 10%);
}
/* Selected cel, header hover col & row background & colors */
.ui-igspreadsheet-columnheader-hover,
.ui-igspreadsheet-rowheader-hover {
background-color: lighten(@spreadsheet-accent, 3%);
color: @btn-primary-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 @row-col-bar-border;
box-sizing: border-box;
background-color: @bar-background;
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
.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-cell-selection;
}
.ui-igspreadsheet-cellselectionhandle {
background-color: @spreadsheet-cell-selection;
border-color: @igGray4;
}
.ui-igspreadsheet .ui-menu {
.boxShadow-1;
}
.ui-igspreadsheet .ui-menu .ui-menu-item-wrapper.ui-state-active {
background: @brand-primary;
color: #fff;
.ui-icon {
color: #fff;
}
}
/* Styles for jQuery 1.12.1*/
.ui-igspreadsheet .ui-menu .ui-menu-item-wrapper.ui-state-active {
background: @brand-primary;
color: #fff;
.ui-icon {
color: #fff;
}
}
/* 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: @brand-primary;
.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: @brand-primary;
color: #fff;
}
.ui-menu-item.ui-state-active > div,
.ui-menu-item.ui-state-active {
background: @brand-primary;
}
.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: @brand-primary;
color: #fff;
.ui-icon {
color: #fff;
}
}

View File

@ -0,0 +1,7 @@
/***********************/
/* Tile manager */
/***********************/
.ui-state-hover .ui-igtile-inner-container {
color: @text-color;
}

View File

@ -0,0 +1,36 @@
/**********/
/* igTree */
/**********/
.ui-widget-content.ui-igtree-root {
background: none;
border: none;
}
.ui-igtree a {
color: @text-color;
padding: 5px!important;
}
.ui-igtree a.ui-state-hover {
.stateHover;
border: 1px solid @btn-default-border;
}
.ui-igtree a.ui-state-hover,
.ui-igtree a.ui-state-active,
.ui-igtree a.ui-state-focus {
padding: 4px!important;
}
.ui-igtree a.ui-state-focus {
.stateFocused
}
.ui-igtree-dropindicator.ui-state-highlight .ui-icon {
color: @ui-icons-darker;
}
.ui-igtree-insertline.ui-state-default {
-webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(0.8, #535353), color-stop(1, transparent)) 100 0 stretch stretch;
}

View File

@ -0,0 +1,26 @@
/***********************/
/* TreeGrid */
/***********************/
/*TreeGrid Paging Context Row*/
.ui-igtreegrid-contextrow {
background-color: @table-bg;
color: fade(@text-color, 70%);
}
.ui-igtreegrid-contextrow td {
border-bottom: solid 1px @table-border-color;
}
.ui-igtreegrid-contextrow td:first-child {
border-left: solid 1px @table-border-color;
}
.ui-igtreegrid-contextrow td:last-child {
border-right: solid 1px @table-border-color;
}
.ui-igtreegrid-contextrow-icon.ui-icon.ui-icon-bookmark {
background-image: @iggrid-icons-dark;
background-position: -464px 0;
}

View File

@ -0,0 +1,60 @@
/************/
/* igUpload */
/************/
.ui-igupload-progressbar-icon-default,
.ui-igupload-progressbar-icon-default {
background: url(images/icon_sprite.png) 0 -128px no-repeat !important;
}
.ui-igupload-progressbar-icon-exe {
background: url(images/icon_sprite.png) 0 -144px no-repeat !important;
}
.ui-igupload-progressbar-icon-images {
background: url(images/icon_sprite.png) 0 -160px no-repeat !important;
}
.ui-igupload-progressbar-icon-music {
background: url(images/icon_sprite.png) 0 -176px no-repeat !important;
}
.ui-igupload-progressbar-icon-video {
background: url(images/icon_sprite.png) 0 -192px no-repeat !important;
}
.ui-igupload-cancel-button .ui-button-icon-primary {
color: @ui-icons-dark;
}
.ui-state-hover.ui-igupload-cancel-button {
background-color: transparent !important;
}
.ui-widget-content .ui-igupload-progress-container {
border: 0;
}
.ui-igupload-cancel-button.ui-state-hover .ui-icon-closethick,
.ui-igupload-cancel-button.ui-state-focus .ui-icon-closethick {
color: @ui-icons-darker;
}
.ui-igupload .ui-igprogressbar {
background-color: @progress-bg;
height: 11px!important;
border: 0!important;
}
.ui-igupload-progressbar-filesize {
color: gray;
}
.ui-igupload-summaryprogress-label {
color: gray;
top: 10px;
}
.ui-igupload-summaryprogress-secondary-label {
color: white;
}

View File

@ -0,0 +1,156 @@
/***********************
IG video player
Fixed colours since it works with fixed images
************************/
.ui-igplayer .ui-igplayer-controls,
.ui-igplayer-tooltip .ui-widget-content {
background: #e5e5e5;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2) !important;
}
.ui-igplayer .ui-igplayer-controls {
background-color: rgba(255, 255, 255, 0.9);
}
.ui-igplayer-tooltip .ui-widget-content,
.ui-igtooltip > .ui-widget-content {
background-color: #e5e5e5!important; //left this because of the arrow bg colour
background-image: none!important;
border: 1px solid #c6c6c6!important;
color: @text-color!important;
}
.ui-igtooltip > .ui-widget-content {
padding: 5px;
}
.ui-igtooltip-arrow-bottom,
.ui-igtooltip-arrow-top,
.ui-igtooltip-arrow-left,
.ui-igtooltip-arrow-right {
background-image: url(../../structure/images/igPopover/igPopoverArrows.png) !important;
}
.ui-igtooltip .ui-icon.ui-icon-close {
color: @ui-icons-darker !important;
}
.ui-igplayer .ui-state-active,
.ui-igplayer .ui-state-focus {
border-width: 1px!important;
outline: none;
}
.ui-igplayer .ui-state-hover .ui-icon {
color: @ui-icons-dark;
}
.ui-igplayer .ui-state-focus .ui-icon,
.ui-igplayer .ui-state-active .ui-icon {
color: @ui-icons-dark;
}
.ui-igplayer .ui-igplayer-bookmark-item-title:hover {
text-decoration: none;
}
.ui-igplayer .ui-igbutton.ui-state-default,
.ui-igplayer .ui-button.ui-state-default {
border-color: transparent;
background-color: transparent;
}
.ui-igplayer .ui-igbutton.ui-state-hover,
.ui-igplayer .ui-button.ui-state-hover {
.stateHover;
}
.ui-igplayer .ui-igbutton.ui-state-active,
.ui-igplayer .ui-button.ui-state-active {
.stateActive;
}
.ui-igplayer .ui-igbutton.ui-state-active .ui-icon,
.ui-igplayer .ui-button.ui-state-active .ui-icon {
color: @ui-icons-light;
}
.ui-igplayer .ui-igbutton.ui-state-focus,
.ui-igplayer .ui-button.ui-state-focus {
border-color: darken(@component-active-bg, 6.5%);
}
.ui-igplayer .ui-igprogressbar.ui-widget-content {
background-color: @progress-bg;
}
.ui-widget-header.ui-igplayer-controls {
color: @text-color;
border-bottom: 0;
}
.ui-igplayer-related-list .ui-igplayer-related-video-hover img {
.stateNormal;
border-width: 3px;
}
.ui-igplayer-bookmark-item-time {
background: url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 1px rgba(0, 0, 0, 0)!important;
}
.ui-igslider .ui-igslider-bookmark.ui-state-default {
background: url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 -1px rgba(0, 0, 0, 0)!important;
}
.ui-igplayer-bookmark-item-time:hover,
.ui-igplayer-bookmark-active-item .ui-igplayer-bookmark-item-time,
.ui-igplayer-bookmark-list li:hover .ui-igplayer-bookmark-item-time {
background: transparent url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 -17px!important;
}
.ui-igslider .ui-igslider-bookmark.ui-state-hover {
background: transparent url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 -19px!important;
}
/* igProgressBar */
.ui-igprogressbar {}
.ui-igprogressbar.ui-widget-content {
border: 0;
}
.ui-igplayer .ui-widget-header a {
color: @text-color;
}
.ui-igprogressbar-range {
background-color: @progress-bar-bg!important;
}
.ui-igplayer-bookmark-list > li.ui-igplayer-bookmark-active-item {
background-color: @component-active-bg;
}
.ui-igplayer-related-video-container a.ui-button.ui-igbutton,
.ui-igplayer-related-video-bar .ui-button.ui-igbutton {
.stateNormal;
}
.ui-igplayer-related-video-container a.ui-button.ui-igbutton.ui-state-hover,
.ui-igplayer-related-video-bar .ui-button.ui-igbutton.ui-state-hover {
.stateActive;
}
.ui-igplayer-related-video-container a.ui-button.ui-igbutton.ui-state-hover .ui-icon,
.ui-igplayer-related-video-bar .ui-button.ui-igbutton.ui-state-hover .ui-icon {
color: @ui-icons-light;
}
.ui-igplayer-bookmark-list li:hover {
background-color: @gray-lighter;
}
.ui-progressbar.ui-widget-content {
border: 0;
}

View File

@ -0,0 +1,20 @@
@import "base/infragistics.ui.checkbox.less";
@import "infragistics.ui.chart.less";
@import "infragistics.ui.chart.toolbar.less";
@import "infragistics.ui.combo.less";
@import "infragistics.ui.dialog.less";
@import "infragistics.ui.editors.less";
@import "infragistics.ui.grid.less";
@import "infragistics.ui.notifier.less";
@import "infragistics.ui.pivot.less";
@import "infragistics.ui.popover.less";
@import "infragistics.ui.rating.less";
@import "infragistics.ui.scheduler.less";
@import "infragistics.ui.splitter.less";
@import "infragistics.ui.spreadsheet.less";
@import "infragistics.ui.tilemanager.less";
@import "infragistics.ui.tree.less";
@import "infragistics.ui.treegrid.less";
@import "infragistics.ui.upload.less";
@import "infragistics.ui.videoplayer.less";

View File

@ -0,0 +1,332 @@
@import "../variables";
// STYLES NOT RELATED TO THE STYLE GUIDE
body {
padding: 0;
margin: 0;
}
.paragraph-styles p {
margin: 0;
}
.paragraph-styles,
.brand-color {
display: flex;
}
.container {
max-width: 960px;
margin: 100px auto;
}
.style-guide-header {
margin-bottom: 40px;
}
.g-row {
margin-left: -20px;
margin-right: -20px;
}
.brand-color {
color: #fff;
}
.g-title-small {
padding-top: 15px;
border-top: 1px solid #ddd;
}
.container :first-of-type .g-title-small {border: none}
.container .flex-group .g-title-small {border-top: 1px solid #ddd}
.g-box-color {
flex: 1;
margin: 10px 20px;
padding: 20px;
text-align: center;
}
.g-box-text {
flex: 1;
margin: 10px 20px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.inherit {
color: #555;
}
.section {
margin-bottom: 50px;
}
.flex-group {
display: flex;
>* {
flex:1;
margin: 10px 20px;
}
}
.serif-font {
font-family: @font-family-serif;
}
.section-column {
display: flex;
flex-direction: column;
align-items: flex-start;
.g-input-field {
width: 100%;
}
}
.g-input-field {
margin-bottom: 15px;
padding: 0 10px;
&:last-of-type {
margin-bottom: 0;
}
}
.g-label {
margin-bottom: 5px;
margin-top: 15px;
}
.g-flex-row-start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.checkbox-wrap {
margin-bottom: 10px;
&:last-of-type{
margin-bottom: 0;
}
}
input[type="radio"],
input[type="checkbox"]
{
margin: 0 5px 2px 0;
}
// STYLES NOT RELATED TO THE STYLE GUIDE END!!!
/*
STYLE GUIDE STYLES
=======================
*/
body {
font-family: @font-family-sans-serif;
background: @body-bg;
color: @text-color;
line-height: @line-height-base;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 10px;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
}
// Title styles
h1 {
font-size: @font-size-h1;
}
h2 {
font-size: @font-size-h2;
}
h3 {
font-size: @font-size-h3;
}
h4 {
font-size: @font-size-h4;
}
h5 {
font-size: @font-size-h5;
}
h6 {
font-size: @font-size-h6;
}
// Links Styles
a {
color: @link-color;
&:hover {
color: @link-hover-color;
}
}
// Brand colors
.bg-primary {
background: @brand-primary;
}
.bg-success {
background: @brand-success;
}
.bg-info {
background: @brand-info;
}
.bg-warning {
background: @brand-warning;
}
.bg-danger {
background: @brand-danger;
}
// Gray colors
.bg-gray-darker {
background: @gray-darker;
}
.bg-gray-dark {
background: @gray-dark;
}
.bg-gray {
background: @gray;
}
.bg-gray-light {
background: @gray-light;
}
.bg-gray-lighter {
background: @gray-lighter;
}
// Text color
.text-color {
color: @text-color;
}
.text-muted {
color: @text-muted;
}
// Alert text styles
.alert-box {
padding: 5px;
}
.text-success {
color: @state-success-text;
background: @state-success-bg;
border: 1px solid @state-success-border;
}
.text-info {
color: @state-info-text;
background: @state-info-bg;
border: 1px solid @state-info-border;
}
.text-warning {
color: @state-warning-text;
background: @state-warning-bg;
border: 1px solid @state-warning-border;
}
.text-danger {
color: @state-danger-text;
background: @state-danger-bg;
border: 1px solid @state-danger-border;
}
/* Forms, inputs...*/
.g-input-field {
height: @input-height-base;
background: @input-bg;
color:@input-color;
border: 1px solid @input-border;
border-radius: @input-border-radius;
&:focus {
border-color: @input-border-focus;
}
}
.input--large {
height: @input-height-large;
}
.input--small {
height:@input-height-small;
}
.g-input-field[disabled] {
background: @input-bg-disabled;
}
.has-error {
.g-label {
color: @label-danger-bg;
}
.g-input-field {
border-color: @brand-danger;
}
}
.has-warning {
.g-label {
color: @label-warning-bg;
}
.g-input-field {
border-color: @brand-warning;
}
}
.has-success {
.g-label {
color: @label-success-bg;
}
.g-input-field {
border-color: @brand-success;
}
}
// Placeholder styles
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: @input-color-placeholder;
}
::-moz-placeholder { /* Firefox 19+ */
color: @input-color-placeholder;
}
:-ms-input-placeholder { /* IE 10+ */
color: @input-color-placeholder;
}
:-moz-placeholder { /* Firefox 18- */
color: @input-color-placeholder;
}

View File

@ -0,0 +1 @@
.paragraph-styles p,body{margin:0}.g-box-color,.text-center{text-align:center}.brand-color,.flex-group,.paragraph-styles,.section-column{display:flex}body{padding:0}.container{max-width:960px;margin:100px auto}.style-guide-header{margin-bottom:40px}.g-row{margin-left:-20px;margin-right:-20px}.g-box-color,.g-box-text{flex:1;margin:10px 20px}.brand-color{color:#fff}.g-title-small{padding-top:15px;border-top:1px solid #ddd}.container :first-of-type .g-title-small{border:none}.container .flex-group .g-title-small{border-top:1px solid #ddd}.g-box-color{padding:20px}.text-right{text-align:right}.text-left{text-align:left}.inherit{color:#555}.section{margin-bottom:50px}.flex-group>*{flex:1;margin:10px 20px}.serif-font{font-family:Georgia,"Times New Roman",Times,serif}.section-column{flex-direction:column;align-items:flex-start}.section-column .g-input-field{width:100%}.g-input-field{margin-bottom:15px;padding:0 10px}.g-input-field:last-of-type{margin-bottom:0}.g-label{margin-bottom:5px;margin-top:15px}.g-flex-row-start{display:flex;align-items:center;justify-content:flex-start}.checkbox-wrap{margin-bottom:10px}.checkbox-wrap:last-of-type{margin-bottom:0}input[type=radio],input[type=checkbox]{margin:0 5px 2px 0}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;color:#333;line-height:1.42857143}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}a{color:#428bca}a:hover{color:#2a6496}.bg-primary{background:#428bca}.bg-success{background:#5cb85c}.bg-info{background:#5bc0de}.bg-warning{background:#f0ad4e}.bg-danger{background:#d9534f}.bg-gray-darker{background:#222}.bg-gray-dark{background:#333}.bg-gray{background:#555}.bg-gray-light{background:#999}.bg-gray-lighter{background:#eee}.text-color{color:#333}.text-muted{color:#999}.alert-box{padding:5px}.text-success{color:#3c763d;background:#dff0d8;border:1px solid #d6e9c6}.text-info{color:#31708f;background:#d9edf7;border:1px solid #bce8f1}.text-warning{color:#8a6d3b;background:#fcf8e3;border:1px solid #faebcc}.text-danger{color:#a94442;background:#f2dede;border:1px solid #ebccd1}.g-input-field{height:34px;background:#fff;color:#555;border:1px solid #ccc;border-radius:4px}.g-input-field:focus{border-color:#66afe9}.input--large{height:46px}.input--small{height:30px}.g-input-field[disabled]{background:#eee}.has-error .g-label{color:#d9534f}.has-error .g-input-field{border-color:#d9534f}.has-warning .g-label{color:#f0ad4e}.has-warning .g-input-field{border-color:#f0ad4e}.has-success .g-label{color:#5cb85c}.has-success .g-input-field{border-color:#5cb85c}::-webkit-input-placeholder{color:#999}::-moz-placeholder{color:#999}:-ms-input-placeholder{color:#999}:-moz-placeholder{color:#999}

View File

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style guide</title>
<link rel="stylesheet" href="style-guide.css">
</head>
<body>
<div class="container">
<header class="style-guide-header">
<h1 class="g-title-big">
Style guide - Bootstrap default
</h1>
</header>
<section class="section">
<h3 class="g-title-small">Brand Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-primary">#428bca</div>
<div class="g-box-color bg-success">#5cb85c</div>
<div class="g-box-color bg-info">#5bc0de</div>
<div class="g-box-color bg-warning">#f0ad4e</div>
<div class="g-box-color bg-danger">#d9534f</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Gray Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-gray-darker">#222222</div>
<div class="g-box-color bg-gray-dark">#333333</div>
<div class="g-box-color bg-gray">#555555</div>
<div class="g-box-color bg-gray-light">#999999</div>
<div class="g-box-color bg-gray-lighter inherit">#eeeeee</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Paragraph styles</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section serif-font">
<h3 class="g-title-small">Serif font</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Links Styles</h3>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">Link in paragraph</a> elit. </p>
<a href="#">This is a link</a>
</section>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Titles Styles</h3>
<br>
<h1>This is h1 title</h1>
<h2>This is h2 title</h2>
<h3>This is h3 title</h3>
<h4>This is h4 title</h4>
<h5>This is h5 title</h5>
<h6>This is h6 title</h6>
</section>
<section class="section">
<h3 class="g-title-small">Text color</h3>
<p class="text-color">Default text color example</p>
<p class="text-muted">Muted text color example</p>
<h3 class="g-title-small">Alerts Styles</h3>
<p class="alert-box text-success"> Success alert box example</p>
<p class="alert-box text-info"> Info alert box example</p>
<p class="alert-box text-warning"> Warning alert box example</p>
<p class="alert-box text-danger"> Danger alert box example</p>
</section>
</div>
</div>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Form fields</h3>
<form>
<div class="section-column">
<label class="g-label" for="g-larg-input">Large input</label>
<input id="g-larg-input" class="g-input-field input--large" placeholder="Placeholder" type="text">
</div>
<div class="section-column">
<label class="g-label" for="g-disabled-input">Disabled input</label>
<input id="g-disabled-input" class="g-input-field" disabled placeholder="Placeholder" type="text">
</div>
<div class="section-column has-error">
<label class="g-label" for="g-error-input">Input Error</label>
<input id="g-error-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-warning">
<label class="g-label" for="g-warning-input">Input Warning</label>
<input id="g-warning-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-success">
<label class="g-label" for="g-success-input">Input Success</label>
<input id="g-success-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
</form>
</section>
<section class="section">
<h3 class="g-title-small">Checkboxs</h3>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<h3 class="g-title-small">Radio buttons</h3>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked="">
Option one is this
</label>
</section>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,831 @@
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
//== Scaffolding
//
// ## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #fff;
//** Global text color on `<body>`.
@text-color: @gray-dark;
@text-muted: fade(@text-color, 70%);
//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
//-- Iconography
//
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
//** Default background color used for all tables.
@table-bg: @body-bg;
//** Background color used for `.table-striped`.
@table-bg-accent: #e3efff;
//** Background color used for `.table-hover`.
@table-bg-hover: #f5ff3b;
@table-bg-active: #8DC6EC;
//** Border color for table and cell borders.
@table-border-color: #ddd;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-link-disabled-color: @gray-light;
//== Forms
//
//##
//** `<input>` background color
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: @gray-lighter;
//** Text color for `<input>`s
@input-color: @gray;
//** `<input>` border color
@input-border: #ccc;
//** `<input>` border radius
@input-border-radius: @border-radius-base;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
//** Placeholder text color
@input-color-placeholder: @gray-light;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
//** Small `.form-control` height
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
//** Background color for textual input addons
@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15);
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #ccc;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: @gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color: darken(@gray-dark, 5%);
//** Hover background for dropdown links.
@dropdown-link-hover-bg: #f5f5f5;
//** Active dropdown menu item text color.
@dropdown-link-active-color: @component-active-color;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @gray-light;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light;
// Note: Deprecated @dropdown-caret-color as of v3.1.0
@dropdown-caret-color: #000;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
//== Navbar
//
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Navs
//
//##
//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
//== Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
@pagination-color: @link-color;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gray-lighter;
@pagination-hover-border: #ddd;
@pagination-active-color: #fff;
@pagination-active-bg: @brand-primary;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: @gray-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
//== Pager
//
//##
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
//== Jumbotron
//
//##
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: .9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: #fff;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//##
//** Default label background color
@label-default-bg: @gray-light;
//** Primary label background color
@label-primary-bg: @brand-primary;
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 20px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
//** Modal title line-height
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
@list-group-bg: #fff;
//** `.list-group-item` border color
@list-group-border: #ddd;
//** List group border radius
@list-group-border-radius: @border-radius-base;
//** Background color of single list elements on hover
@list-group-hover-bg: #f5f5f5;
//** Text color of active list elements
@list-group-active-color: @component-active-color;
//** Background color of active list elements
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
//== Panels
//
//##
@panel-bg: #fff;
@panel-body-padding: 15px;
@panel-border-radius: @border-radius-base;
//** Border color for elements within panels
@panel-inner-border: #ddd;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: 4px;
//** Thumbnail background color
@thumbnail-bg: @body-bg;
//** Thumbnail border color
@thumbnail-border: #ddd;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
//== Wells
//
//##
@well-bg: #f5f5f5;
@well-border: darken(@well-bg, 7%);
//== Badges
//
//##
@badge-color: #fff;
//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
//** Badge text color in active nav link
@badge-active-color: @link-color;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
//** Breadcrumb background color
@breadcrumb-bg: #f5f5f5;
//** Breadcrumb text color
@breadcrumb-color: #ccc;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: @gray-light;
//** Textual separator for between breadcrumb elements
@breadcrumb-separator: "/";
//== Carousel
//
//##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
//== Close
//
//##
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
//== Code
//
//##
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-lighter;
//** Page header border color
@page-header-border-color: @gray-lighter;
//== Miscellaneous
//
//##
//** Horizontal line color.
@hr-border: @gray-lighter;
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,157 @@
// Icons
@ui-icons-darker: #222222;
@ui-icons-dark: #888888;
@ui-icons-light: #ffffff;
@ui-icons-accent: @brand-primary;
//dialog
@dialog-header: @brand-primary;
// Gray palette
@igGray1: #f0f0f0;
@igGray2: #eee;
@igGray3: #e8e8e8;
@igGray4: #dadada;
@igGray5: #bcbcbc;
@igGray6: #ccc;
@igGray7: #999;
@igGray8: #888;
@igGray9: #777;
@igGray10: #444;
@igGray11: rgba(0, 0, 0, 0.12);
// Gradual palette, used mainly for bulletGraph and linearGauge
@chartGradualPalette1: @brand-primary;
@chartGradualPalette2: lighten(@brand-primary, 5%);
@chartGradualPalette3: lighten(@brand-primary, 10%);
@chartGradualPalette4: lighten(@brand-primary, 15%);
@chartGradualPalette5: lighten(@brand-primary, 20%);
@chartGradualPalette6: lighten(@brand-primary, 24%);
@chartGradualPalette7: lighten(@brand-primary, 28%);
@chartGradualPalette8: lighten(@brand-primary, 32%);
@chartGradualPalette9: lighten(@brand-primary, 36%);
@chartGradualPalette10: lighten(@brand-primary, 40%);
@chartGradualPalette11: lighten(@brand-primary, 44%);
@chartGradualPalette12: lighten(@brand-primary, 48%);
// Sparkline palette
@sparkpath: #43ABD5;
@negativesparkpath: #43ABD5;
@trendline: #7F7F7F;
@markers: #43ABD5;
@firstmarker: #237FA7;
@lastmarker: #FBC139;
@highmarker: #A3B929;
@lowmarker: #AF39FF;
@negativemarkers: #E5516F;
// Spreadsheet
@accent1: @brand-primary;
@bar-background: @gray-dark;
@row-col-bar-border: @gray-dark;
@tab-bar-border: @gray-dark;
@spreadsheet-accent: @brand-primary;
@spreadsheet-icon: @brand-primary;
@spreadsheet-cell-selection: @brand-primary;
@spreadsheet-cell-selection-rgba: rgba(44, 62, 80, .22); /* needs to be improved with mixin*/
@spreadsheet-text-color: #111;
@spreadsheet-wight-text: #fff;
@spreadsheet-empty-bg: #fff;
@spreadsheet-disabled: #c4c4c4;
@spreadsheet-danger: @brand-danger;
@spreadsheet-menu-item-bg-hover: @spreadsheet-cell-selection-rgba;
@spreadsheet-formula-btn-bg: @gray;
@spreadsheet-header-selected-cell-bg: lighten(@brand-primary, 30%);
@spreadsheet-tab-text-color: #666;
@spreadsheet-formula-btn-color: #fff;
// Scheduler
@scheduler-bg:@body-bg;
@scheduler-text-color:@text-color;
@scheduler-border-color: @table-border-color;
@scheduler-shadow-color: @body-bg;
@scheduler-header-bg:darken(@body-bg, 5%);
@scheduler-month-view-day-selected:@gray-dark;
@scheduler-start-time-color: @brand-primary;
@scheduler-end-time-color: @brand-warning;
@scheduler-selected-subject-color: @brand-primary;
@scheduler-selected-location-color: @brand-primary;
@scheduler-month-view-bg: transparent;
@scheduler-activity-indicator-bg: @igGray6;
@scheduler-day-week-view-bg: transparent;
@scheduler-day-week-timeslot-selected: @gray-light;
@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:@gray-light;
@scheduler-tabs-color:@gray-dark;
@scheduler-tabs-selected-text-color:@brand-primary;
@scheduler-tabs-selected-icons-color:@brand-primary;
@scheduler-tabs-selected-hover:lighten(@brand-primary, 5%);
@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: @brand-primary;
@scheduler-month-view-month-header-bg:@brand-primary;
@scheduler-month-view-day-leading-bg:transparent;
@scheduler-month-view-day-leading-color:@gray-light;
@scheduler-month-view-day-trailing-bg:transparent;
@scheduler-month-view-day-trailing-color:@gray-light;
@scheduler-selectall-bg:@brand-primary;
@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:@brand-primary;
@scheduler-tabs-hover-bg:transparent;
@scheduler-tabs-hover-color:@brand-primary;
@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:@gray-light;
// 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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 743 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,32 @@
/******************************************/
/* Infragistics Ignite UI Bootstrap theme */
/******************************************/
// Icon sprites
@ui-icons-darker: url(images/ui-icons_222222_256x240.png);
@ui-icons-dark: url(images/ui-icons_888888_256x240.png);
@ui-icons-light: url(images/ui-icons_ffffff_256x240.png);
@iggrid-icons-dark: url(images/igGrid/filter-icons-333333.png);
@iggrid-icons-light: url(images/igGrid/filter-icons-FFFFFF.png);
// Bootstrap Theme variables
@import "variables.less";
// Ignite UI Theme variables
@import "ignite-ui-variables";
// Ignite UI Mixins
@import "mixins.less";
// Font styles
@import (css)"icons-styles.css";
//JQuery UI
@import "framework.less";
//Ignite UI styles
@import "modules/modules.less";

View File

@ -0,0 +1,168 @@
/* states */
.stateNormal {
border: 1px solid @btn-default-border;
background-color: @btn-default-bg;
color: @btn-default-color;
}
.stateHover {
border-color: darken(@btn-default-bg, 8%);
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;
}
// 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);
}

View File

@ -0,0 +1,50 @@
/**************/
/* igCheckbox */
/**************/
.ui-igcheckbox-small.ui-state-default,
.ui-igcheckbox-normal.ui-state-default,
.ui-igcombo-checkbox.ui-state-default {
background-image: none;
background-color: @input-bg;
border: 1px solid @input-border;
}
.ui-igcheckbox-small.ui-state-hover,
.ui-igcheckbox-normal.ui-state-hover,
.ui-igcombo-checkbox.ui-state-hover {
border-color: darken(@input-border, 12%);
}
.ui-igcheckbox-small.ui-state-focus,
.ui-igcheckbox-normal.ui-state-focus,
.ui-igcombo-checkbox.ui-state-focus {
border-color: @input-border-focus;
}
.ui-igcombo-checkbox.ui-state-default,
.ui-igcombo-checkbox.ui-state-hover,
.ui-igcombo-checkbox.ui-state-focus {
background-image: none;
}
.ui-igcheckbox-small .ui-icon,
.ui-igcheckbox-normal .ui-icon,
.ui-igcheckbox-small.ui-state-hover .ui-icon,
.ui-igcheckbox-normal.ui-state-hover .ui-icon,
.ui-iggrid th .ui-igcheckbox-normal.ui-state-default .ui-icon,
.ui-igcombo-checkbox .ui-icon,
.ui-state-hover .ui-igcombo-checkbox .ui-icon {
color: @ui-icons-darker;
}
.ui-icon-check-f {
background-position: -64px -144px;
}
.ui-icon-check-p {
background-color: @gray-dark;
background-image: none !important;
border: 2px solid @body-bg;
box-sizing: border-box;
}

View File

@ -0,0 +1,469 @@
/***********/
/* igChart */
/***********/
.ui-chart-palette-1 {
.chartPalette1;
}
.ui-chart-palette-2 {
.chartPalette2;
}
.ui-chart-palette-3 {
.chartPalette3;
}
.ui-chart-palette-4 {
.chartPalette4;
}
.ui-chart-palette-5 {
.chartPalette5;
}
.ui-chart-palette-6 {
.chartPalette6;
}
.ui-chart-palette-7 {
.chartPalette7;
}
.ui-chart-palette-8 {
.chartPalette8;
}
.ui-chart-palette-9 {
.chartPalette9;
}
.ui-chart-palette-10 {
.chartPalette10;
}
.ui-chart-palette-11 {
.chartPalette11;
}
.ui-chart-palette-12 {
.chartPalette12;
}
.ui-chart-piechart-container,
.ui-chart-legend-item-text {
font-size: 12px;
font-family: @font-family-base;
}
.ui-chart-toolbar .ui-slider-handle {
width: 18px;
height: 18px;
margin-left: -9px!important;
top: -5px!important;
}
.touch .ui-chart-toolbar .ui-slider-handle,
.touchevents .ui-chart-toolbar .ui-slider-handle,
.pointerevents .ui-chart-toolbar .ui-slider-handle
{
border: 1px solid @gray-dark;
background: @gray;
margin-left: -15px;
top: -15px;
}
.ui-chart-title {
margin-bottom: 5px;
text-align: center;
}
.ui-chart-subtitle {
margin-bottom: 5px;
text-align: center;
}
.ui-widget-content.ui-chart-tooltip {
background-color: rgba(255, 255, 255, 0.85);
}
/*******************/
/* Sparkline chart */
/*******************/
.ui-sparkline {
font-family: @font-family-base;
font-size: 13px;
padding: 10px 5px 10px 5px;
border: 0;
}
.ui-sparkline-tooltip {
.boxShadow;
padding: 3px;
}
.ui-sparkline-sparkpath {
background: #43ABD5;
border: 1px solid;
}
.ui-sparkline-negativesparkpath {
background: #B9242E;
border: 1px solid;
}
.ui-sparkline-trendline {
background: #7F7F7F;
border: 2px solid;
}
.ui-sparkline-markers {
background: #43ABD5;
border: 3px solid;
}
.ui-sparkline-firstmarker {
background: #237FA7;
border: 5px solid;
}
.ui-sparkline-lastmarker {
background: #FBC139;
border: 5px solid;
}
.ui-sparkline-highmarker {
background: #A3B929;
border: 4px solid;
}
.ui-sparkline-lowmarker {
background: #AF39FF;
border: 3px solid;
}
.ui-sparkline-negativemarkers {
background: #E5516F;
border: 3px solid;
}
.ui-sparkline-range {
background: gray;
opacity: 0.2;
}
.ui-sparkline-axis-x {
font-family: @font-family-base;
border: 2px solid #989EA3;
color: #406090;
}
.ui-sparkline-axis-y {
font-family: @font-family-base;
border: 2px solid #989EA3;
color: #406090;
text-align: right;
}
/****************/
/* Funnel chart */
/****************/
.ui-funnel {
font-family: @font-family-base;
font-size: 14px;
color: #555555;
border: 0;
}
.ui-funnel-tooltip {
.boxShadow;
padding: 3px;
}
.ui-funnel-slice {
color: #FFFFFF;
border: 0;
}
.ui-funnel-slice-selected {
opacity: 1.0;
}
.ui-funnel-slice-unselected {
opacity: 0.49;
border-color: transparent;
}
/********************/
/* igDoughnut Chart */
/********************/
.ui-doughnut {
border: 0;
font-size: 12px;
font-family: @font-family-base;
}
.ui-doughnut-tooltip {
/*add styles*/
}
/***********************/
/* igRadialGauge Chart */
/***********************/
.ui-radialgauge-needle {
background-color: @gray-dark;
}
.ui-radialgauge-needleCap {
background-color: @gray-dark;
border-color: @gray-dark;
}
.ui-radialgauge-backing {
background-color: @body-bg;
border: @gray;
}
.ui-radialgauge-scale {
background-color: @brand-primary;
border: none;
}
.ui-radialgauge-tick {
background-color: @gray-darker;
border-top-color: none;
}
.ui-radialgauge-minorTick {
background-color: @gray-darker;
border: none;
}
.ui-radialgauge-label {
background-color: @gray-dark;
border: none;
}
.ui-radialgauge-range-palette-1 {
background-color: @chartGradualPalette7;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-2 {
background-color: @chartGradualPalette5;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-3 {
background-color: @chartGradualPalette4;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-4 {
background-color: @chartGradualPalette3;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-5 {
background-color: @chartGradualPalette2;
border-top-color: transparent;
}
.ui-radialgauge-range-palette-6 {
background-color: @chartGradualPalette1;
border-top-color: transparent;
}
.ui-radialgauge {
font-family: @font-family-base;
font-size: 16px;
}
/***********************/
/* igBulletGraph Chart */
/***********************/
.ui-bulletgraph-backing {
background-color: @body-bg;
border-color: @body-bg;
}
.ui-bulletgraph-targetvalue {
background-color: @body-bg;
border-color: @body-bg;
}
/* TICKS AND LABELS */
.ui-bulletgraph-tick {
background-color: @gray-darker;
border: transparent;
}
.ui-bulletgraph-minortick {
background-color: @gray-darker;
border: transparent;
}
.ui-bulletgraph-label {
background-color: @gray-dark;
border: transparent;
}
/* RANGE VALUES */
.ui-bulletgraph-range-palette-1 {
background-color: @chartGradualPalette1;
border: transparent;
}
.ui-bulletgraph-range-palette-2 {
background-color: @chartGradualPalette3;
border: transparent;
}
.ui-bulletgraph-range-palette-3 {
background-color: @chartGradualPalette5;
border: transparent;
}
.ui-bulletgraph-range-palette-4 {
background-color: @chartGradualPalette7;
border: transparent;
}
.ui-bulletgraph-range-palette-5 {
background-color: @chartGradualPalette9;
border: transparent;
}
/* ACTUAL VALUES */
.ui-bulletgraph-value {
background-color: @body-bg;
border: transparent;
}
/* TOOLTIPS */
.ui-bulletgraph-tooltip {
border-style: none;
white-space: nowrap;
background-color: transparent;
}
.ui-bulletgraph-range-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-bulletgraph-value-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-bulletgraph-targetvalue-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-bulletgraph {
font-family: @font-family-base;
font-size: 12px;
color: @text-color;
}
/***********************/
/* igLinearGauge Chart */
/***********************/
.ui-lineargauge-backing {
background-color: @body-bg;
border-color: @body-bg;
}
.ui-lineargauge-needle {
background-color: @gray-light;
border-color: @gray-light;
}
.ui-lineargauge-scale {
background-color: @gray-light;
border-color: @gray-light;
}
/* TICKS AND LABELS */
.ui-lineargauge-tick {
background-color: @gray-darker;
border: transparent;
}
.ui-lineargauge-minortick {
background-color: @gray-darker;
border: transparent;
}
.ui-lineargauge-label {
background-color: @gray-dark;
border: transparent;
}
/* RANGE VALUES */
.ui-lineargauge-range-palette-1 {
background-color: @chartGradualPalette1;
border: transparent;
}
.ui-lineargauge-range-palette-2 {
background-color: @chartGradualPalette3;
border: transparent;
}
.ui-lineargauge-range-palette-3 {
background-color: @chartGradualPalette5;
border: transparent;
}
.ui-lineargauge-range-palette-4 {
background-color: @chartGradualPalette7;
border: transparent;
}
.ui-lineargauge-range-palette-5 {
background-color: @chartGradualPalette9;
border: transparent;
}
/* TOOLTIPS */
.ui-lineargauge-tooltip {
border-style: none;
white-space: nowrap;
background-color: transparent;
}
.ui-lineargauge-range-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-lineargauge-needle-tooltip {
border-style: solid;
border-width: 2px;
background-color: rgba(230, 230, 230, 0.74);
padding: 4px;
font-weight: bold;
}
.ui-lineargauge {
font-family: @font-family-base;
font-size: 12px;
color: @text-color;
}

View File

@ -0,0 +1,103 @@
.financialChartToolbar .financialChartToolbar {
background: @chart-toolbar-background !important;
border-color: @chart-toolbar-border-color !important;
.ui-icon {
color:@text-color!important;
}
.ui-icon-toolbar-dd:before {
content: '';
border-color: @text-color transparent transparent transparent!important;
}
svg {
color: @text-color!important;
}
}
.financialChartIndicatorMenuDropDownButton {
color: @text-color!important;
&:hover {
.ui-icon-toolbar-dd:before {
content: '';
border-color: @brand-primary transparent transparent transparent!important;
}
}
}
.financialChartIndicatorMenu {
color: @text-color!important;
border-right-color:@chart-toolbar-border-color !important;
&:hover {
.financialChartIndicatorMenuDropDownButton,
.financialChartIndicatorMenuDropDownButton:after {
color: @brand-primary!important;
}
}
}
.financialChartTypePicker {
border-left-color: @chart-toolbar-border-color !important;
}
// Range selector section
.financialChartRangeSelectorLabel {
&:hover {
.financialChartRangeSelectorLabelSpan {
color: @brand-primary!important;
}
}
}
.financialChartRangeSelectorLabel input:checked + span {
color: @range-selector-active-color!important;
background-color: @range-selector-active-background!important;
}
.financialChartListItem {
&:hover {
color: @brand-primary!important;
.ui-icon {
color: @brand-primary!important;
}
}
}
.financialChartIndicatorMenuDropDownMenu,
.financialChartTypePickerDropDownMenu {
background: @body-bg!important;
}
.financialChartIndicatorMenuDropDownMenu li.checked,
.financialChartTypePickerDropDownMenu li.checked {
color: @brand-primary!important;
&:before {
color: @brand-primary!important;
}
&:hover,
&:hover {
color: darken(@brand-primary, 10%) !important;
}
}
.financialChartTypePickerDropDownButton {
&:hover {
.ui-icon {
color: @brand-primary!important;
}
.ui-icon-toolbar-dd:before {
content: '';
border-color: @brand-primary transparent transparent transparent!important;
}
}
}
.financialChartListItem[data-value='Auto'] {
border-bottom: 1px solid @chart-toolbar-border-color!important;
}

View File

@ -0,0 +1,86 @@
/***********/
/* igCombo */
/***********/
.ui-igedit.ui-state-hover,
.ui-igcombo.ui-state-hover {
border-color: @input-border-focus;
}
.ui-igedit-button-common.ui-state-highlight,
.ui-igedit-button-common.ui-state-hover,
.ui-igedit-button.ui-state-highlight,
.ui-igedit-button.ui-state-hover,
.ui-igcombo-button.ui-state-highlight,
.ui-igcombo-button.ui-state-hover {
border: inherit;
}
.ui-igedit.ui-state-focus,
.ui-igcombo.ui-state-focus,
.ui-igedit.ui-state-focus.ui-state-hover,
.ui-igcombo.ui-state-focus.ui-state-hover {
border-color: @input-border-focus;
}
.ui-igedit.ui-state-focus .ui-igedit-button-common,
.ui-igedit.ui-state-active .ui-igedit-button-common,
.ui-igcombo.ui-state-focus .ui-igcombo-button,
.ui-igcombo.ui-state-active .ui-igcombo-button {
background-color: @component-active-bg;
border-color: @btn-default-border;
}
.ui-igcombo.ui-state-hover,
.ui-igcombo.ui-state-default {
background-color: transparent;
}
.ui-igedit-input,
.ui-igcombo-fieldholder,
.ui-igcombo.ui-widget .ui-igcombo-clear.ui-unselectable,
.ui-igedit-cleararea,
.ui-igedit-cleararea.ui-state-hover,
.ui-igedit.ui-state-hover .ui-igedit-cleararea,
.ui-igedit.ui-state-focus .ui-igedit-cleararea
{
background: none @input-bg;
border: 0 none;
}
.ui-igcombo-clear .ui-icon,
.ui-igedit-buttonclear .ui-icon,
.ui-igedit-cleararea .ui-icon,
.ui-igedit.ui-state-focus .ui-igedit-cleararea .ui-icon,
.ui-igedit.ui-state-active .ui-igedit-cleararea .ui-icon,
.ui-igcombo.ui-state-active.ui-state-hover .ui-igcombo-clear .ui-icon {
color: @ui-icons-dark;
}
.ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit-cleararea.ui-state-default.ui-state-hover .ui-icon,
.ui-igedit.ui-state-hover .ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit.ui-state-focus .ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit.ui-state-active .ui-igedit-cleararea.ui-state-hover .ui-icon,
.ui-igedit-buttonclear.ui-state-default.ui-state-hover .ui-icon,
.ui-igcombo-clear.ui-igcombo-clear-hover.ui-state-hover .ui-icon,
.ui-igcombo.ui-state-active .ui-igcombo-clear.ui-state-hover .ui-icon {
color: @ui-icons-darker;
}
.ui-igcombo-listitem-match {
font-weight: bold
}
.ui-igcombo-field {
color: #333;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-active,
.ui-igedit-list .ui-igedit-listitem.ui-state-active,
.ui-igcombo-listitem.ui-state-hover.ui-igcombo-item-in-focus,
.ui-igcombo-listitem.ui-state-active.ui-igcombo-item-in-focus,
.ui-igcombo-listitem.ui-state-default.ui-igcombo-item-in-focus {
background: @component-active-bg;
color: #FFF;
opacity: 0.8;
}

View File

@ -0,0 +1,310 @@
/***************/
/* HTML Editor */
/***************/
.ui-igbutton .ui-igbutton-table {
.stateActive;
}
.ui-ightmleditor {
background-color: @body-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar {
background-color: @navbar-default-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-igbutton,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton {
border-radius: 0;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-default,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-default {
background-color: transparent;
background-image: none;
border-color: transparent;
}
.ui-splitbutton.ui-state-default {
border-color: @btn-default-border;
}
.ui-splitbutton.ui-splitbutton-hover {
border-color: darken(@btn-default-border, 12%);
}
.ui-splitbutton.ui-state-active {
border-color: darken(@btn-primary-bg, 5%);
}
.ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button,
.ui-ightmleditor .ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button {
background-color: @brand-primary;
}
.ui-splitbutton-arrow .ui-icon {
color: @ui-icons-darker;
}
.ui-splitbutton-arrow.ui-state-hover .ui-icon,
.ui-splitbutton-arrow.ui-state-active .ui-icon,
.ui-splitbutton-arrow.ui-state-focus .ui-icon {
color: @ui-icons-light;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-hover,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-focus,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-focus {
.stateFocused;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-active,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-active {
.stateActive;
}
.ui-ightmleditor .ui-igcombo-fieldholder {
border-color: @input-border;
}
/* html editor icons*/
.ui-igbutton-viewsource.ui-state-default .ui-igbutton-viewsource-icon {
background-position: 0 -160px;
}
.ui-igbutton-viewsource.ui-state-hover .ui-igbutton-viewsource-icon {
background-position: -32px -160px;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover.ui-state-active {
.stateHover;
}
.ui-igbutton.ui-state-active .ui-igbutton-collapse,
.ui-igbutton.ui-state-focus .ui-igbutton-collapse {
background-position: -16px 0;
}
.ui-igbutton.ui-state-active .ui-igbutton-expand,
.ui-igbutton.ui-state-focus .ui-igbutton-expand {
background-position: -16px -16px;
}
.ui-igbutton.ui-state-active .ui-igbutton-redo,
.ui-igbutton.ui-state-focus .ui-igbutton-redo {
background-position: -16px -32px;
}
.ui-igbutton.ui-state-active .ui-igbutton-undo,
.ui-igbutton.ui-state-focus .ui-igbutton-undo {
background-position: -16px -48px;
}
.ui-igbutton.ui-state-active .ui-igbutton-increasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-increasefontsize {
background-position: -16px -80px;
}
.ui-igbutton.ui-state-active .ui-igbutton-decreasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-decreasefontsize {
background-position: -16px -96px;
}
.ui-igbutton.ui-state-active .ui-igbutton-viewsource,
.ui-igbutton.ui-state-focus .ui-igbutton-viewsource {
background-position: -16px -160px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html,
.ui-igbutton.ui-state-focus .ui-igbutton-html {
background-position: -16px -112px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-add,
.ui-igbutton.ui-state-focus .ui-igbutton-html-add {
background-position: -16px -128px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-delete,
.ui-igbutton.ui-state-focus .ui-igbutton-html-delete {
background-position: -16px -144px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-valid,
.ui-igbutton.ui-state-focus .ui-igbutton-html-valid {
background-position: -16px -176px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addimage,
.ui-igbutton.ui-state-focus .ui-igbutton-addimage {
background-position: -16px -192px;
}
.ui-igbutton.ui-state-active .ui-igbutton-link,
.ui-igbutton.ui-state-focus .ui-igbutton-link {
background-position: -16px -208px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addlink,
.ui-igbutton.ui-state-focus .ui-igbutton-addlink {
background-position: -16px -224px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unlink,
.ui-igbutton.ui-state-focus .ui-igbutton-unlink {
background-position: -16px -240px;
}
.ui-igbutton.ui-state-active .ui-igbutton-copy,
.ui-igbutton.ui-state-focus .ui-igbutton-copy {
background-position: -16px -256px;
}
.ui-igbutton.ui-state-active .ui-igbutton-cut,
.ui-igbutton.ui-state-focus .ui-igbutton-cut {
background-position: -16px -272px;
}
.ui-igbutton.ui-state-active .ui-igbutton-paste,
.ui-igbutton.ui-state-focus .ui-igbutton-paste {
background-position: -16px -288px;
}
.ui-igbutton.ui-state-active .ui-igbutton-table,
.ui-igbutton.ui-state-focus .ui-igbutton-table {
background-position: -16px -304px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addrow,
.ui-igbutton.ui-state-focus .ui-igbutton-addrow {
background-position: -16px -320px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addcolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-addcolumn {
background-position: -16px -336px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removerow,
.ui-igbutton.ui-state-focus .ui-igbutton-removerow {
background-position: -16px -352px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removecolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-removecolumn {
background-position: -16px -368px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyleft,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyleft {
background-position: -16px -384px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifycenter,
.ui-igbutton.ui-state-focus .ui-igbutton-justifycenter {
background-position: -16px -400px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyright,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyright {
background-position: -16px -416px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyfull,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyfull {
background-position: -16px -432px;
}
.ui-igbutton.ui-state-active .ui-igbutton-forecolor,
.ui-igbutton.ui-state-focus .ui-igbutton-forecolor {
background-position: -16px -448px;
}
.ui-igbutton.ui-state-active .ui-igbutton-backcolor,
.ui-igbutton.ui-state-focus .ui-igbutton-backcolor {
background-position: -16px -464px;
}
.ui-igbutton.ui-state-active .ui-igbutton-bold,
.ui-igbutton.ui-state-focus .ui-igbutton-bold {
background-position: -16px -480px;
}
.ui-igbutton.ui-state-active .ui-igbutton-italic,
.ui-igbutton.ui-state-focus .ui-igbutton-italic {
background-position: -16px -496px;
}
.ui-igbutton.ui-state-active .ui-igbutton-underline,
.ui-igbutton.ui-state-focus .ui-igbutton-underline {
background-position: -16px -512px;
}
.ui-igbutton.ui-state-active .ui-igbutton-strikethrough,
.ui-igbutton.ui-state-focus .ui-igbutton-strikethrough {
background-position: -16px -528px;
}
.ui-igbutton.ui-state-active .ui-igbutton-horizontalrule,
.ui-igbutton.ui-state-focus .ui-igbutton-horizontalrule {
background-position: -16px -544px;
}
.ui-igbutton.ui-state-active .ui-igbutton-indent,
.ui-igbutton.ui-state-focus .ui-igbutton-indent {
background-position: -16px -560px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removeindent,
.ui-igbutton.ui-state-focus .ui-igbutton-removeindent {
background-position: -16px -576px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unorderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-unorderedlist {
background-position: -16px -592px;
}
.ui-igbutton.ui-state-active .ui-igbutton-orderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-orderedlist {
background-position: -16px -608px;
}
.ui-ightmleditor-content iframe,
.ui-ightmleditor-content textarea {
border: 1px solid @input-border;
-webkit-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
-moz-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
}
/*breadcrumb styling*/
.ui-igPathFinder .ui-button::after {
border-top: 1px solid @btn-default-border;
border-right: 1px solid @btn-default-border;
background: @btn-default-bg;
}
.ui-igPathFinder .ui-button.ui-state-hover::after {
border-top: 1px solid darken(@btn-default-border, 12%);
border-right: 1px solid darken(@btn-default-border, 12%);
background: darken(@btn-default-bg, 8%);
}
.ui-igPathFinder .ui-button.ui-state-active::after {
border-top: 1px solid darken(@component-active-bg, 12%);
border-right: 1px solid darken(@component-active-bg, 12%);
background: @component-active-bg;
color: @component-active-color;
}

View File

@ -0,0 +1,310 @@
/***************/
/* HTML Editor */
/***************/
.ui-igbutton .ui-igbutton-table {
.stateActive;
}
.ui-ightmleditor {
background-color: @body-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar {
background-color: @navbar-default-bg;
border: 1px solid @navbar-default-border;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-igbutton,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton {
border-radius: 0;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-default,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-default {
background-color: transparent;
background-image: none;
border-color: transparent;
}
.ui-splitbutton.ui-state-default {
border-color: @btn-default-border;
}
.ui-splitbutton.ui-splitbutton-hover {
border-color: darken(@btn-default-border, 12%);
}
.ui-splitbutton.ui-state-active {
border-color: darken(@btn-primary-bg, 5%);
}
.ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button,
.ui-ightmleditor .ui-splitbutton.ui-state-active div.ui-igtoolbarbutton.ui-button {
background-color: @brand-primary;
}
.ui-splitbutton-arrow .ui-icon {
color: @ui-icons-darker;
}
.ui-splitbutton-arrow.ui-state-hover .ui-icon,
.ui-splitbutton-arrow.ui-state-active .ui-icon,
.ui-splitbutton-arrow.ui-state-focus .ui-icon {
color: @ui-icons-light;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-hover,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-focus,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-focus {
.stateFocused;
}
.ui-ightmleditor .ui-igtoolbar-wrap .ui-igbutton.ui-state-active,
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-active {
.stateActive;
}
.ui-ightmleditor .ui-igcombo-fieldholder {
border-color: @input-border;
}
/* html editor icons*/
.ui-igbutton-viewsource.ui-state-default .ui-igbutton-viewsource-icon {
background-position: 0 -160px;
}
.ui-igbutton-viewsource.ui-state-hover .ui-igbutton-viewsource-icon {
background-position: -32px -160px;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover {
.stateHover;
}
.ui-ightmleditor .ui-igtoolbar .ui-igbutton.ui-state-hover.ui-state-active {
.stateHover;
}
.ui-igbutton.ui-state-active .ui-igbutton-collapse,
.ui-igbutton.ui-state-focus .ui-igbutton-collapse {
background-position: -16px 0;
}
.ui-igbutton.ui-state-active .ui-igbutton-expand,
.ui-igbutton.ui-state-focus .ui-igbutton-expand {
background-position: -16px -16px;
}
.ui-igbutton.ui-state-active .ui-igbutton-redo,
.ui-igbutton.ui-state-focus .ui-igbutton-redo {
background-position: -16px -32px;
}
.ui-igbutton.ui-state-active .ui-igbutton-undo,
.ui-igbutton.ui-state-focus .ui-igbutton-undo {
background-position: -16px -48px;
}
.ui-igbutton.ui-state-active .ui-igbutton-increasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-increasefontsize {
background-position: -16px -80px;
}
.ui-igbutton.ui-state-active .ui-igbutton-decreasefontsize,
.ui-igbutton.ui-state-focus .ui-igbutton-decreasefontsize {
background-position: -16px -96px;
}
.ui-igbutton.ui-state-active .ui-igbutton-viewsource,
.ui-igbutton.ui-state-focus .ui-igbutton-viewsource {
background-position: -16px -160px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html,
.ui-igbutton.ui-state-focus .ui-igbutton-html {
background-position: -16px -112px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-add,
.ui-igbutton.ui-state-focus .ui-igbutton-html-add {
background-position: -16px -128px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-delete,
.ui-igbutton.ui-state-focus .ui-igbutton-html-delete {
background-position: -16px -144px;
}
.ui-igbutton.ui-state-active .ui-igbutton-html-valid,
.ui-igbutton.ui-state-focus .ui-igbutton-html-valid {
background-position: -16px -176px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addimage,
.ui-igbutton.ui-state-focus .ui-igbutton-addimage {
background-position: -16px -192px;
}
.ui-igbutton.ui-state-active .ui-igbutton-link,
.ui-igbutton.ui-state-focus .ui-igbutton-link {
background-position: -16px -208px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addlink,
.ui-igbutton.ui-state-focus .ui-igbutton-addlink {
background-position: -16px -224px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unlink,
.ui-igbutton.ui-state-focus .ui-igbutton-unlink {
background-position: -16px -240px;
}
.ui-igbutton.ui-state-active .ui-igbutton-copy,
.ui-igbutton.ui-state-focus .ui-igbutton-copy {
background-position: -16px -256px;
}
.ui-igbutton.ui-state-active .ui-igbutton-cut,
.ui-igbutton.ui-state-focus .ui-igbutton-cut {
background-position: -16px -272px;
}
.ui-igbutton.ui-state-active .ui-igbutton-paste,
.ui-igbutton.ui-state-focus .ui-igbutton-paste {
background-position: -16px -288px;
}
.ui-igbutton.ui-state-active .ui-igbutton-table,
.ui-igbutton.ui-state-focus .ui-igbutton-table {
background-position: -16px -304px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addrow,
.ui-igbutton.ui-state-focus .ui-igbutton-addrow {
background-position: -16px -320px;
}
.ui-igbutton.ui-state-active .ui-igbutton-addcolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-addcolumn {
background-position: -16px -336px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removerow,
.ui-igbutton.ui-state-focus .ui-igbutton-removerow {
background-position: -16px -352px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removecolumn,
.ui-igbutton.ui-state-focus .ui-igbutton-removecolumn {
background-position: -16px -368px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyleft,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyleft {
background-position: -16px -384px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifycenter,
.ui-igbutton.ui-state-focus .ui-igbutton-justifycenter {
background-position: -16px -400px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyright,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyright {
background-position: -16px -416px;
}
.ui-igbutton.ui-state-active .ui-igbutton-justifyfull,
.ui-igbutton.ui-state-focus .ui-igbutton-justifyfull {
background-position: -16px -432px;
}
.ui-igbutton.ui-state-active .ui-igbutton-forecolor,
.ui-igbutton.ui-state-focus .ui-igbutton-forecolor {
background-position: -16px -448px;
}
.ui-igbutton.ui-state-active .ui-igbutton-backcolor,
.ui-igbutton.ui-state-focus .ui-igbutton-backcolor {
background-position: -16px -464px;
}
.ui-igbutton.ui-state-active .ui-igbutton-bold,
.ui-igbutton.ui-state-focus .ui-igbutton-bold {
background-position: -16px -480px;
}
.ui-igbutton.ui-state-active .ui-igbutton-italic,
.ui-igbutton.ui-state-focus .ui-igbutton-italic {
background-position: -16px -496px;
}
.ui-igbutton.ui-state-active .ui-igbutton-underline,
.ui-igbutton.ui-state-focus .ui-igbutton-underline {
background-position: -16px -512px;
}
.ui-igbutton.ui-state-active .ui-igbutton-strikethrough,
.ui-igbutton.ui-state-focus .ui-igbutton-strikethrough {
background-position: -16px -528px;
}
.ui-igbutton.ui-state-active .ui-igbutton-horizontalrule,
.ui-igbutton.ui-state-focus .ui-igbutton-horizontalrule {
background-position: -16px -544px;
}
.ui-igbutton.ui-state-active .ui-igbutton-indent,
.ui-igbutton.ui-state-focus .ui-igbutton-indent {
background-position: -16px -560px;
}
.ui-igbutton.ui-state-active .ui-igbutton-removeindent,
.ui-igbutton.ui-state-focus .ui-igbutton-removeindent {
background-position: -16px -576px;
}
.ui-igbutton.ui-state-active .ui-igbutton-unorderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-unorderedlist {
background-position: -16px -592px;
}
.ui-igbutton.ui-state-active .ui-igbutton-orderedlist,
.ui-igbutton.ui-state-focus .ui-igbutton-orderedlist {
background-position: -16px -608px;
}
.ui-ightmleditor-content iframe,
.ui-ightmleditor-content textarea {
border: 1px solid @input-border;
-webkit-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
-moz-box-shadow: inset 2px 2px 3px rgba rgba(50, 50, 50, 0.1);
box-shadow: inset 2px 2px 3px rgba(50, 50, 50, 0.1);
}
/*breadcrumb styling*/
.ui-igPathFinder .ui-button::after {
border-top: 1px solid @btn-default-border;
border-right: 1px solid @btn-default-border;
background: @btn-default-bg;
}
.ui-igPathFinder .ui-button.ui-state-hover::after {
border-top: 1px solid darken(@btn-default-border, 12%);
border-right: 1px solid darken(@btn-default-border, 12%);
background: darken(@btn-default-bg, 8%);
}
.ui-igPathFinder .ui-button.ui-state-active::after {
border-top: 1px solid darken(@component-active-bg, 12%);
border-right: 1px solid darken(@component-active-bg, 12%);
background: @component-active-bg;
color: @component-active-color;
}

View File

@ -0,0 +1,731 @@
/**********/
/* igGrid */
/**********/
.ui-iggrid table tbody td,
.ui-iggrid .ui-iggrid-header,
.ui-iggrid table th {
/*padding: 10px;*/
}
.ui-iggrid th,
.ui-iggrid th.ui-widget-header.ui-state-default {
border-top: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-groupbyarea {
background-color: @body-bg;
border-color: @table-border-color;
color: @text-color;
}
.ui-iggrid-groupedcolumnlabel {
box-shadow: 0 0 2em 0 fade(@table-border-color, 15%) inset;
//in case the body-bg is the same as the default button bg
}
.ui-iggrid-groupbylabelrightedgeend {
border-color: @body-bg @body-bg @body-bg transparent!important;
}
/*grid paging*/
.ui-iggrid-pagelist li {
padding: 0.2em 0.5em !important;
}
.ui-iggrid .ui-iggrid-paging .ui-iggrid-firstpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-prevpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-nextpage,
.ui-iggrid .ui-iggrid-paging .ui-iggrid-lastpage,
.ui-iggrid-pagedropdownlabels {
padding-top: 0.2em!important;
padding-bottom: 0.2em!important;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item.ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging-item .ui-iggrid-page.ui-state-default {
.stateNormal;
}
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging .ui-iggrid-page.ui-state-hover,
.ui-iggrid .ui-iggrid-footer .ui-iggrid-paging .ui-iggrid-paging-item.ui-state-hover {
.stateHover;
}
.ui-iggrid-paging .ui-iggrid-pagelist {
background: none!important;
border: none!important;
}
/*row selectors*/
.ui-iggrid tbody>tr>th.ui-iggrid-rowselector-class {
border-right: 0 none!important;
background-color: transparent;
}
.ui-iggrid th.ui-iggrid-rowselector-class > .ui-icon {
margin-right: 0!important;
margin-top: 0.2em;
}
//.ui-iggrid-rowselector-header,
.ui-iggrid .ui-iggrid-addrow th {
border: 0;
}
.ui-widget-content.ui-iggrid-buttoncontainer {
.boxShadow;
}
.ui-iggrid .ui-iggrid-content {
border-color: @table-border-color;
}
.ui-iggrid tr.ui-ig-altrecord {
background-color: @table-bg-accent;
}
/* adding lateral borders to the table (by design) */
.ui-iggrid .ui-iggrid-tablebody>tr>td:first-child,
.ui-iggrid .ui-iggrid-table>tbody>tr>td:first-child,
.ui-iggrid thead .ui-iggrid-editingcell:first-child,
.ui-iggrid .ui-iggrid-addrow + .ui-iggrid-activerow td:first-child,
.ui-iggrid th.ui-iggrid-rowselector-class:first-child {
border-left: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-tablebody>tr>td:last-child,
.ui-iggrid .ui-iggrid-table>tbody>tr>td:last-child,
.ui-iggrid thead .ui-iggrid-editingcell:last-child {
border-right: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-coldesc,
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-colasc {
border-bottom: 1px solid @table-border-color;
}
.ui-iggrid .ui-iggrid-addrow {
border-bottom: 0;
}
/* Bug 214415 18.02.2016 S.D. Missing borders; new classes for a MRL grid */
.ui-iggrid .ui-iggrid-table-mrl tbody td {
border:1px solid @table-border-color;
}
/* footer summary tables*/
.ui-iggrid tfoot td {
border-color: @table-border-color;
}
.ui-iggrid tfoot tr:first-child td,
.ui-iggrid > table tfoot tr:first-child td {
border-top-width: 0!important;
}
.ui-iggrid .ui-iggrid-footertable tfoot tr:last-child td {
border-bottom-width: 0!important;
}
.ui-iggrid .ui-iggrid-summaries-footer-icon-container.ui-state-hover {
.stateHover;
}
.ui-iggrid .ui-iggrid-summaries-footer-icon-container.ui-state-active {
.stateActive!important;
}
.ui-iggrid .ui-iggrid-summaries-footer-icon-container.ui-state-active .ui-icon {
color: @ui-icons-light!important;
}
.ui-iggrid tfoot,
.ui-iggrid-footer {
border-bottom: 1px solid @table-border-color !important;
}
.ui-iggrid .ui-iggrid-scrolldiv {
background-color: @table-bg-accent;
box-shadow: inset 0 0 0 1px @table-border-color;
border-bottom: 1px solid @table-border-color !important;
/* !important needed because layout css removes borders */
}
.ui-iggrid .ui-iggrid-scrolldiv:first-child,
.ui-iggrid > table tr:first-child td,
/*.ui-iggrid > table > tbody tr:first-child th, removed for hierarchical grid issues */
.ui-iggrid-responsive-vertical,
.ui-iggrid > table tr:first-child th.ui-iggrid-rowselector-class {
border-top: 1px solid @table-border-color!important;
/* border-top for tables without headers */
}
.ui-iggrid.ui-igpivotgrid > table tr:first-child td {
border-bottom: 1px solid @table-border-color!important;
}
.ui-iggrid.ui-igpivotgrid > table > tbody tr:first-child th {
border-top: none!important;
}
.ui-iggrid-layout-helper {
border-bottom: 1px solid @table-border-color;
}
.ui-iggrid-layout-helper > tbody > tr:first-child > td th {
border-top: 0 !important;
}
.ui-iggrid .ui-widget-header,
.ui-iggrid th,
.ui-iggrid th.ui-state-default {
background-color: @body-bg;
color: @text-color;
border-color: @table-border-color;
border-right: 1px solid @table-border-color;
}
//if the theme has dark grid headers change the image to @iggrid-icons-light
.ui-iggrid th .ui-iggrid-indicatorcontainer .ui-iggrid-summaries-header-icon.ui-icon {
background: @iggrid-icons-dark no-repeat scroll -416px 0 transparent;
}
//if the theme has a dark button hover state change the image to @iggrid-icons-light
.ui-iggrid th .ui-iggrid-indicatorcontainer .ui-iggrid-summaries-header-icon.ui-icon {
background: @iggrid-icons-dark no-repeat scroll -416px 0 transparent;
}
.ui-iggrid th:first-child {
border-left: 1px solid @table-border-color;
}
.ui-iggrid > table > tbody tr:first-child th.ui-igpivotgrid-header {
border-top-color: @table-border-color!important;
}
.ui-iggrid th a,
.ui-iggrid th.ui-state-default a,
.ui-iggrid th.ui-state-hover a,
.ui-iggrid th.ui-state-active a {
color: @text-color;
}
.ui-iggrid th.ui-state-hover {
background: @table-bg-hover;
}
.ui-iggrid th.ui-state-active,
.ui-iggrid th.ui-state-focus,
.ui-iggrid-sortableheader:focus{
background: @table-bg-active;
}
.ui-iggrid .ui-iggrid-footer,
.ui-iggrid .ui-iggrid-toolbar {
display: block;
}
.ui-iggrid .ui-iggrid-footer,
.ui-iggrid .ui-iggrid-toolbar,
.ui-iggrid .ui-iggrid-addrow td,
.ui-iggrid .ui-iggrid-addrow th {
background-color: @table-border-color;
font-weight: normal;
text-align: left;
color: @text-color;
border: none;
}
.ui-iggrid .ui-iggrid-footer .ui-state-default,
.ui-iggrid .ui-iggrid-toolbar .ui-state-default,
.ui-iggrid .ui-iggrid-footer .ui-state-hover {
background-color: @table-bg-hover;
color: @text-color;
text-decoration: none;
}
.ui-iggrid .ui-iggrid-footer .ui-state-default a,
.ui-iggrid .ui-iggrid-toolbar .ui-state-default a,
.ui-iggrid .ui-iggrid-addrow td a,
.ui-iggrid .ui-iggrid-footer .ui-state-default a {
color: @btn-default-color;
text-decoration: none;
}
.ui-iggrid tbody .ui-icon,
.ui-iggrid .ui-iggrid-addrow td .ui-icon {
color: @ui-icons-dark;
}
.ui-iggrid .ui-igedit-button .ui-icon,
.ui-igpivot-metadataitem .ui-icon-close {
color: @ui-icons-dark;
}
.ui-igpivot-metadataitem {
outline: red!important
}
.ui-iggrid th .ui-icon,
.ui-iggrid th.ui-state-active.ui-state-hover .ui-icon {
color: @ui-icons-dark;
}
.ui-iggrid th.ui-state-hover .ui-icon,
.ui-iggrid th.ui-state-active.ui-state-hover .ui-icon {
color: @ui-icons-darker;
}
/* BUG 246065 Marin Popov 23.12.2017 Grid's header and body are misaligned when a grid is Multi Row Layout and is continuous virtualization mode.*/
.ui-iggrid tbody td {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.ui-iggrid-headertable-mrl.ui-iggrid-headertable-mrl-scrollable,
.ui-iggrid .ui-iggrid-table-mrl tbody td {
border-right: 1px solid @table-border-color;
}
/* BUG 246065 END */
.ui-iggrid tbody td,
.ui-iggrid thead .ui-iggrid-editingcell,
.ui-iggrid tbody th.ui-iggrid-rowselector-class,
.ui-iggrid tfoot td {
border-top: 1px solid transparent;
border-bottom: 1px solid @table-border-color;
}
/*sorting*/
.ui-iggrid td.ui-state-highlight {
background: none;
background-color: @table-bg-active;
color: @text-color;
font-weight: normal;
border: 0 none;
}
/* hover */
.ui-iggrid td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-default.ui-state-hover,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-default.ui-state-hover,
.ui-iggrid-responsive-vertical tr > td.ui-state-hover:first-child,
.ui-iggrid-responsive-vertical tr.ui-ig-altrecord > td.ui-state-hover:first-child {
color: @text-color;
background: @table-bg-hover;
border-top: 1px solid transparent;
border-bottom: 1px solid @table-border-color;
}
.ui-iggrid td.ui-state-hover a,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover a {
color: @link-color;
text-shadow: none;
}
.ui-iggrid td.ui-state-hover a:hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover a:hover {
color: @link-hover-color;
}
.ui-iggrid tbody td:first-child,
.ui-iggrid tbody .ui-ig-altrecord td:first-child,
.ui-iggrid tbody th.ui-iggrid-rowselector-class:first-child,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-default.ui-state-hover {}
/* active cells */
.ui-iggrid td.ui-state-focus,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-focus {
background-image: none;
}
.ui-ig-altrecord td.ui-state-focus,
.ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-focus {
background: @table-bg-accent none;
}
/* active rows */
.ui-iggrid tr.ui-state-focus {
background: @table-bg none;
}
.ui-iggrid .ui-ig-altrecord.ui-state-focus {
background: @table-bg-accent none;
}
.ui-iggrid tr.ui-state-focus td,
.ui-iggrid tr.ui-state-focus th,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus th {
border-top: 1px solid @brand-primary!important;
border-bottom: 1px solid @brand-primary!important;
}
.ui-iggrid td.ui-state-active.ui-state-focus,
.ui-iggrid td.ui-state-focus {
border: 1px solid @brand-primary!important;
}
/*fix padding to prevent jump when adding borders on focus*/
.ui-iggrid tr.ui-state-focus td,
.ui-iggrid tr.ui-ig-altrecord.ui-state-focus td,
.ui-iggrid td.ui-state-active.ui-state-focus,
.ui-iggrid td.ui-state-focus {
padding-left: 4px;
padding-right: 4px;
}
.ui-iggrid-activerow .ui-iggrid-selectedcell .ui-state-active {
border-color: transparent!important;
}
/* selected rows */
.ui-iggrid td.ui-state-active,
.ui-iggrid .ui-ig-altrecord td.ui-state-active,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-active,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-active,
.ui-iggrid tbody .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid tbody .ui-iggrid-mergedcellstop.ui-state-active,
.ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcellstop.ui-state-active {
background: @table-bg-active;
color: @text-color;
border-color: @table-bg-active;
}
/* Focus state on paging buttons */
.ui-iggrid .ui-iggrid-paging-item.ui-state-focus,
.ui-iggrid .ui-iggrid-paging-item.ui-state-default.ui-state-focus,
.ui-iggrid .ui-iggrid-page.ui-state-focus,
.ui-iggrid .ui-iggrid-pageui-state-default.ui-state-focus {
.stateActive;
}
.ui-iggrid .ui-iggrid-paging-item.ui-state-focus span,
.ui-iggrid .ui-iggrid-paging-item.ui-state-default.ui-state-focus span,
.ui-iggrid .ui-iggrid-page.ui-state-focus a,
.ui-iggrid .ui-iggrid-pageui-state-default.ui-state-focus a {
.stateNormal;
}
.ui-iggrid-page .ui-state-default {
.stateNormal;
}
.ui-iggrid .ui-iggrid-paging-item.ui-state-focus .ui-icon,
.ui-iggrid .ui-iggrid-paging-item.ui-state-default.ui-state-focus .ui-icon {
color: @ui-icons-dark;
}
/* Dropdowns */
.ui-igedit-list .ui-igedit-listitem {
font-size: 1em;
line-height: 1.4em;
}
.ui-iggrid-filterbutton {
border: 1px solid transparent;
}
.ui-state-hover .ui-icon.ui-iggrid-filterbutton.ui-state-hover,
.ui-state-hover .ui-icon.ui-iggrid-filterbutton,
.ui-iggrid-filterbutton.ui-state-active,
.ui-iggrid-filterbutton.ui-state-focus {
color: @brand-primary;
}
.ui-igedit-dropdown,
.ui-iggrid-filterdd,
.ui-iggrid-featurechooser-dropdown-dialog,
.ui-widget.ui-widget-content.ui-igpivot-filterdropdown,
.ui-widget.ui-widget-content.ui-igpivot-metadatadropdown {
background: @body-bg;
border: 1px solid @gray-lighter;
}
/*fix dialogs*/
.ui-iggrid-summaries-dialog {
background-color: @body-bg!important; // needed to override structure css
}
.ui-iggrid-summaries-dialog label {
color: @text-color;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-default,
.ui-igedit-list .ui-igedit-listitem.ui-state-default,
.ui-iggrid-filterddlist li.ui-state-default,
.ui-iggrid-featurechooser-list li.ui-state-default,
.ui-iggrid-hiding-dropdown-list li.ui-state-default,
.ui-iggrid-columnmoving-dropdown-list li.ui-state-default,
.ui-igcombo-listitemholder li.ui-state-default {
color: @text-color;
background-color: @body-bg;
border: 1px solid transparent;
}
// Bug:220147 06.16.2017 Marin Popov
// Fix hover background matches text color
.ui-iggrid-featurechooser-list li.ui-state-default:hover .ui-iggrid-featurechooserddlistitemtext {
color: @gray;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-hover,
.ui-igedit-list .ui-igedit-listitem.ui-state-hover,
.ui-iggrid-filterddlist li.ui-state-hover,
.ui-iggrid-filterddlistitem.ui-state-hover a,
.ui-iggrid-featurechooser-list.ui-state-hover a,
.ui-iggrid-hiding-dropdown-list li.ui-state-hover,
.ui-iggrid-hiding-dropdown-list.ui-state-hover a,
.ui-iggrid-columnmoving-dropdown-list li.ui-state-hover,
.ui-iggrid-columnmoving-dropdown-list.ui-state-hover a,
.ui-igcombo-listitemholder li.ui-state-hover,
.ui-igcombo-listitemholder li.ui-state-hover a,
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-default.ui-igedit-listitemactive {
.stateHover;
}
.ui-iggrid-filterddlist li.ui-state-active,
.ui-iggrid-filterddlistitem.ui-state-active a,
.ui-iggrid-featurechooser-list li.ui-state-active,
.ui-iggrid-featurechooser-list.ui-state-active a,
.ui-iggrid-hiding-dropdown-list li.ui-state-active,
.ui-iggrid-hiding-dropdown-list.ui-state-active a,
.ui-iggrid-columnmoving-dropdown-list li.ui-state-active,
.ui-iggrid-columnmoving-dropdown-list.ui-state-active a,
.ui-igcombo-listitemholder li.ui-state-active,
.ui-igcombo-listitemholder li.ui-state-active a {
.stateActive;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-highlight,
.ui-igedit-list .ui-igedit-listitem.ui-state-highlight,
.ui-igcombo-listitemholder li.ui-state-highlight,
.ui-igcombo-listitemholder li.ui-state-highlight a {
.stateActive;
}
.ui-igedit-dropdown .ui-igedit-listitem.ui-state-hover a,
.ui-igedit-list .ui-igedit-listitem.ui-state-hover a,
.ui-igedit-list .ui-igedit-listitem.ui-state-active a {
color: #FFFFFF;
}
/* Group by */
.ui-iggrid tbody td.ui-iggrid-nongrouprowemptycell,
.ui-iggrid tbody .ui-ig-altrecord td.ui-iggrid-nongrouprowemptycell {
background-color: @body-bg;
box-shadow: none;
}
.ui-iggrid tbody td.ui-iggrid-nongrouprowemptycell.ui-state-hover {
background-image: none;
}
.ui-iggrid .ui-iggrid-tablebody td.ui-iggrid-nongrouprowemptycell.ui-iggrid-last-emptycell {
/*box-shadow: inset 0 -1px 0 #E2E2E2;*/
border-bottom: 1px solid @table-border-color;
}
.ui-draggable-dragging .ui-iggrid-headertext {
font-family: @font-family-base;
}
.ui-iggrid-dragMarkup {
z-index: 10000;
}
/* Hierarchical grid */
.ui-iggrid-expandcolumn-expanded {
border-bottom-width: 0!important;
box-shadow: none!important;
/*tabbed look*/
}
.ui-iggrid-expandcolumn-expanded.ui-state-focus {
border-bottom-width: 1px!important;
/*tabbed look*/
}
.ui-ig-altrecord + tr > td.ui-iggrid-childarea {
background-color: @table-bg-accent;
/* expanded from altrecord should have the same bg colour */
border-color: transparent @table-border-color @table-border-color;
}
/* Feature Chooser */
.ui-iggrid-featurechooser-list .item-selected .ui-iggrid-featurechooserddlistitemtext {
text-shadow: none;
}
.ui-iggrid-featurechooser-list li.ui-state-default,
.ui-iggrid-featurechooser-list li.ui-state-hover {
border-width: 0;
}
/* modal dialog */
.ui-iggrid .ui-widget-content.ui-dialog {
border: 1px solid @panel-default-border;
}
.ui-iggrid-modaldialog-caption-buttoncontainer .ui-button.ui-state-hover {
background: @btn-primary-bg;
border: 1px solid @btn-primary-border;
box-shadow: none;
}
.ui-iggrid-modaldialog-caption-buttoncontainer .ui-button.ui-state-hover .ui-button-text {
color: @btn-primary-color;
}
.ui-iggrid-dialog-groupby-button a,
.ui-iggrid-columnchooser-item a,
.ui-iggrid-sorting-dialog-unsortedcolumns-sortbybutton a {
text-decoration: none;
}
/* Summaries */
.ui-iggrid .ui-widget-footer,
.ui-iggrid .ui-iggrid-footertable {
background: @table-bg;
border-bottom: 1px solid @table-border-color;
border-right: 1px solid @table-border-color;
}
.ui-iggrid tfoot td.ui-widget-content,
.ui-iggrid tfoot td.ui-state-default {
background-color: transparent;
color: @text-color;
border-color: @table-border-color;
border-style: solid;
}
.ui-iggrid tfoot td.ui-state-hover {
background-color: @table-bg-hover;
}
.ui-iggrid tfoot td.ui-state-default .ui-icon {
color: @ui-icons-darker;
}
/* Column Moving custom icons */
.ui-iggrid-columnmoving-dragtop {
background: transparent @ui-icons-darker no-repeat scroll -65px -12px!important;
}
.ui-iggrid-columnmoving-dragbottom {
background: transparent @ui-icons-darker no-repeat scroll 0 -20px!important;
}
.ui-iggrid-indicatorcontainer .ui-iggrid-moving-indicator {
color: @ui-icons-dark;
}
/* Grid Updating */
@-webkit-keyframes addingHighlight {
0% {
background-color: @brand-primary;
}
100% {
background-color: transparent;
}
}
@-moz-keyframes addingHighlight {
0% {
background-color: @brand-primary;
}
100% {
background-color: transparent;
}
}
.ui-iggrid-modifiedrecord > td {
-webkit-animation-name: addingHighlight;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-moz-animation-name: addingHighlight;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-o-animation-name: addingHighlight;
-o-animation-timing-function: ease-in-out;
-o-animation-duration: 1s;
animation-name: addingHighlight;
animation-timing-function: ease-in-out;
animation-duration: 1s;
}
.ui-iggrid-modifiedrecord > td {
background-color: transparent;
color: @gray-light;
}
/* Merged cells */
.ui-iggrid .ui-iggrid-mergedcell,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight {
background-color: @body-bg;
}
.ui-iggrid .ui-iggrid-mergedcell,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-mergedcell.ui-iggrid-coldesc,
.ui-iggrid .ui-iggrid-table > tbody > tr > td.ui-iggrid-mergedcell.ui-iggrid-colasc {
color: @gray-lighter;
border-bottom-color: transparent;
}
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell,
.ui-iggrid .ui-iggrid-mergedcellstop {
border-left-color: transparent;
}
.ui-iggrid .ui-iggrid-mergedcellstop.ui-state-highlight,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-highlight {
border-left-color: transparent;
}
.ui-iggrid .ui-iggrid-mergedcellstop,
.ui-iggrid .ui-iggrid-mergedcellstop.ui-state-highlight,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcellstop,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcellstop.ui-state-highlight,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-highlight {
background-color: @body-bg;
border-bottom-color: transparent;
box-shadow: none;
}
.ui-iggrid .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-active,
.ui-iggrid .ui-iggrid-mergedcell.ui-state-focus,
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-focus {
color: #FFF;
}
.ui-iggrid tbody .ui-iggrid-mergedcell.ui-state-hover,
.ui-iggrid tbody .ui-ig-altrecord .ui-iggrid-mergedcell.ui-state-hover {
background-color: @table-bg-hover;
color: @text-color;
}
.ui-iggrid .ui-ig-altrecord .ui-iggrid-mergedcellsbottom.ui-state-highlight,
.ui-iggrid .ui-iggrid-mergedcellsbottom.ui-state-highlight {
border-bottom-color: @table-border-color;
}
.ui-iggrid tbody .ui-iggrid-mergedcell.ui-iggrid-mergedcellsbottom:not(.ui-state-active) {
border-bottom: 1px solid @table-border-color;
}

View File

@ -0,0 +1,10 @@
/*****************/
/* Notifier */
/****************/
.ui-igpopover.ui-ignotify-error .ui-icon {
color: @ui-icons-light;
}
.ui-igpopover.ui-ignotify-error.ui-ignotify-inline .ui-icon {
color: @ui-icons-dark;
}

View File

@ -0,0 +1,34 @@
/****************/
/* igPivot Grid */
/****************/
.ui-igpivot-metadataitem.ui-state-default {
background: @btn-default-bg;
border: 1px solid @btn-default-border;
color: @btn-default-color;
}
.ui-igpivot-metadataitem .ui-widget .ui-corner-all .ui-state-default .ui-draggable {
color: @text-color;
}
.ui-igpivot-metadataitem .ui-icon.ui-icon-close {
color: @ui-icons-dark;
}
.ui-igpivotgrid .ui-igpivot-metadataitem .ui-icon-pivot-smallfilter,
.ui-igpivot-droparea .ui-igpivot-metadataitem .ui-icon-pivot-smallfilter {
background-position: -64px 0!important;
}
.ui-igpivot-filterdropdown .ui-igtree-node {
line-height: 2em!important;
}
.ui-igpivot-filterdropdown .ui-igtree-expander {
top: 1em!important;
}
.ui-igpivot-filterdropdown span[data-role=checkbox] {
margin-top: 0.65em;
}

View File

@ -0,0 +1,7 @@
/*****************/
/* Popover */
/****************/
.ui-igpopover > .ui-widget-content {
.boxShadow;
}

View File

@ -0,0 +1,48 @@
/************/
/* igRating */
/************/
.ui-igrating,
.ui-igrating.ui-state-default {
background: transparent none;
border: none;
}
.ui-icon.ui-igrating-vote,
.ui-iggrid .ui-icon.ui-igrating-vote {
background-image: url(images/igRating/ig-rating.png);
background-position: -75px 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-voteselected,
.ui-iggrid .ui-icon.ui-igrating-voteselected {
background-image: url(images/igRating/ig-rating.png);
background-position: 0 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-votehover,
.ui-iggrid .ui-icon.ui-igrating-votehover {
background-image: url(images/igRating/ig-rating.png);
background-position: -25px 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-votedisabled,
.ui-iggrid .ui-icon.ui-igrating-votedisabled {
background-image: url(images/igRating/ig-rating.png);
background-position: -100px 0;
width: 20px;
height: 20px;
}
.ui-icon.ui-igrating-votedisabledselected,
.ui-iggrid .ui-icon.ui-igrating-votedisabledselected {
background-image: url(images/igRating/ig-rating.png);
background-position: -50px 0;
width: 20px;
height: 20px;
}

View File

@ -0,0 +1,295 @@
/* ============
Scheduler
============= */
#scheduler {
background: @scheduler-bg;
}
.ui-igscheduler-core .ui-igscheduler-agendaview {
background-color: @scheduler-agenda-view-bg;
}
.ui-igscheduler-core .ui-igscheduler-agendaview-day-header {
background-color: transparent;
color: @scheduler-text-color;
border-color: @scheduler-border-color !important;
}
.ui-igscheduler-core .ui-igscheduler-agendaview-message {
font-size: 1.1em;
}
.ui-igscheduler-header {
background:@scheduler-header-bg;
border-color: @scheduler-header-border-color;
}
.ui-igscheduler-tabs {
color: @scheduler-tabs-color;
}
.ui-igscheduler-tabs.ui-igscheduler-tabs-selected {
color: @scheduler-tabs-selected-text-color;
.ui-icon {
color: @scheduler-tabs-selected-icons-color;
}
}
.ui-igscheduler-tabs.ui-igscheduler-tabs-selected:hover,
.ui-igscheduler-tabs.ui-igscheduler-tabs-selected:active {
color: @scheduler-tabs-selected-hover;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-selected,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-start-time,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-subject {
color: @gray-darker;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-end-time {
color: @gray-darker;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-of-week-header,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-location {
color: @gray-darker;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-selected {
background-color: @scheduler-agenda-appt-selected;
}
// Vertical Separator
.ui-igscheduler-core .ui-igscheduler-dayweek-vertical-separator,
.ui-igscheduler-core .ui-igscheduler-monthview-day-vertical-separator {
background-color: @scheduler-border-color;
}
// Horizontal Separator
.ui-igscheduler-core .ui-igscheduler-dayweek-horizontal-separator,
.ui-igscheduler-core .ui-igscheduler-agenda-appt-horizontal-separator,
.ui-igscheduler-core .ui-igscheduler-monthview-day-horizontal-separator{
background-color: @scheduler-border-color;
}
.ui-igscheduler-agendaview .null {
background-color: @scheduler-border-color !important;
}
.ui-igscheduler-monthview {
box-shadow: 1px 2px 15px darken(@scheduler-shadow-color, 20%);
z-index: 1;
}
.ui-igscheduler-core .ui-igscheduler-monthview-dayday-selected {
background-color: @scheduler-month-view-dayday-selected-bg;
color: @scheduler-month-view-dayday-selected-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-today-indicator {
background: @scheduler-month-view-day-today-indicator-bg;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-today span,
.ui-igscheduler-core .ui-igscheduler-monthview-day-today {
color: @scheduler-month-view-day-today-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-month-header {
background-color: @scheduler-month-view-month-header-bg;
color: white;
}
.ui-igscheduler-core .ui-igscheduler-monthview-week-header {
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-leading,
.ui-igscheduler-core .ui-igscheduler-monthview-day-trailing {
background-color: @scheduler-month-view-day-leading-bg;
color:@scheduler-month-view-day-leading-color;
}
.ui-igscheduler-selectall {
background-color: @scheduler-selectall-bg;
}
.ui-igscheduler-navigator-disabled-date-range-button {
color: @scheduler-text-color;
}
.ui-igscheduler-navigator-next-button:hover {
color: @scheduler-text-color;
}
.ui-igscheduler-navigator-next-button:hover span:after,
.ui-igscheduler-navigator-previous-button:hover span:after {
border-color: @brand-primary;
}
.ui-igscheduler-navigator-date-range-button {
color:@gray-dark;
}
.ui-igscheduler-navigator-back-button:hover,
.ui-igscheduler-navigator-date-range-button:hover,
.ui-igscheduler-navigator-forward-button:hover {
background-color: @scheduler-navigator-back-button-hover-bg;
color:@scheduler-text-color;
}
.ui-igscheduler-today-button {
color:@gray-dark;
}
.ui-igscheduler-today-button:hover {
background-color: @scheduler-today-button-hover-bg;
color: @scheduler-today-button-hover-color;
}
.ui-igscheduler-tabs:hover {
background-color: @scheduler-tabs-hover-bg;
color: @scheduler-tabs-hover-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-start-time-selected {
color: @scheduler-start-time-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-end-time-selected {
color:@scheduler-end-time-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-subject-selected {
color: @scheduler-selected-subject-color;
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-location-selected {
color: lighten(@scheduler-selected-location-color, 15%);
}
.ui-igscheduler-core .ui-igscheduler-agenda-appt-area {
margin: 10px 0;
}
.ui-igscheduler-core .ui-igscheduler-monthview {
background-color: @scheduler-month-view-bg;
}
.ui-igscheduler-core .ui-igscheduler-monthview-activity-indicator {
background-color: @scheduler-activity-indicator-bg;
}
.ui-igscheduler-core .ui-igscheduler-monthview-day-appointment {
font-size: .75em;
padding: 0 0 0 3px!important;
}
.ui-igscheduler-tabs,
.ui-igscheduler-today-button {
.ui-icon {
margin-top: -9px !important;
}
}
#scheduler .ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-selected {
background-color : @scheduler-day-week-timeslot-selected;
}
/* Week & day views */
.ui-igscheduler-core .ui-igscheduler-dayweekview {
background-color: @scheduler-day-week-view-bg;
}
.ui-igscheduler-core .ui-igscheduler-allday-event-area {
background-color: @scheduler-all-day-event-area-bg;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-appt {
background-color: @scheduler-day-week-appt-bg;
}
.ui-igscheduler-core .ui-igscheduler-allday-event-subject {
font-size: .5em;
background-color: @scheduler-all-day-event-subject-bg;
color: @scheduler-all-day-event-subject-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-appt-location {
font-size: 1em;
background-color: @scheduler-day-week-appt-location-bg;
color: @scheduler-day-week-appt-location-color;
}
/*
.ui-igscheduler-core .ui-igscheduler-dayweek-appt-color-bar {}
.ui-igscheduler-core .ui-igscheduler-dayweek-header-area {}
.ui-igscheduler-core .ui-igscheduler-dayweek-topleft-corner {}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-descriptor-area {}
*/
.ui-igscheduler-core .ui-igscheduler-dayweek-appt-subject {
background-color: @scheduler-day-week-appt-subject-bg;
color: @scheduler-day-week-appt-subject-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-day-header {
font-size: .8em;
background-color: @scheduler-day-week-day-header-bg;
color: @scheduler-day-week-day-header-color;
}
.ui-igscheduler-monthview-day-selected {
background: @scheduler-month-view-day-selected;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-navigation-header-date-text {
font-size: 1em;
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-resource-header {
font-size: 1.1em;
background-color: transparent;
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot {
background-color: @scheduler-day-week-timeslot-bg;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-descriptor {
font-size: .8em;
background-color: @scheduler-day-week-timeslot-descripto-bg;
color: @scheduler-text-color;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-working-hour {
background-color: @scheduler-day-week-timeslot-working-hour-bg;
}
.ui-igscheduler-core .ui-igscheduler-dayweek-timeslot-selected {
background-color: @scheduler-day-week-timeslot-selected-bg;
}

View File

@ -0,0 +1,19 @@
/**************/
/* igSplitter */
/**************/
.ui-igsplitter-splitbar-horizontal.ui-state-default,
.ui-igsplitter-splitbar-vertical.ui-state-default {
background: @btn-default-bg;
border-color: transparent;
}
.ui-igsplitter-splitbar-horizontal.ui-state-hover,
.ui-igsplitter-splitbar-vertical.ui-state-hover {
background: @component-active-bg;
border-color: transparent;
}
.ui-igsplitter.ui-widget-content {
border: 0;
}

View File

@ -0,0 +1,406 @@
/*
=========================
Spreadsheet colors
=========================
*/
.ui-igspreadsheet {
background: #fff;
}
.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: @igGray5;
}
/* SelectAll */
.ui-igspreadsheet-selectall {
color: @spreadsheet-accent;
}
.ui-igspreadsheet-selectall.ui-state-active {
color: @spreadsheet-accent;
background-color: @spreadsheet-accent;
}
/* 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;
}
/* TabItem
=========
*/
/* 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: @brand-primary;
}
/* 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: darken(@row-col-bar-border, 10%);
}
.ui-igspreadsheet-rowheader {
border-bottom-color: darken(@row-col-bar-border, 10%);
}
/* 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: @btn-primary-color;
}
.ui-igspreadsheet-columnheader-selected.ui-state-highlight,
.ui-igspreadsheet-rowheader-selected.ui-state-highlight {
color: #fff;
}
/* Selected cel, header col & row background and color */
.ui-igspreadsheet-columnheader-selectedcells,
.ui-igspreadsheet-rowheader-selectedcells {
background-color: @spreadsheet-accent;
color: @btn-primary-color;
}
/* Selected cel, header col & row border color */
.ui-igspreadsheet-columnheader-selectedcells {
border-right-color: darken(@row-col-bar-border, 10%);
}
.ui-igspreadsheet-rowheader-selectedcells {
border-bottom-color: darken(@row-col-bar-border, 10%);
}
/* Selected cel, header hover col & row background & colors */
.ui-igspreadsheet-columnheader-hover,
.ui-igspreadsheet-rowheader-hover {
background-color: lighten(@spreadsheet-accent, 3%);
color: @btn-primary-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 @row-col-bar-border;
box-sizing: border-box;
background-color: @bar-background;
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
.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-cell-selection;
}
.ui-igspreadsheet-cellselectionhandle {
background-color: @spreadsheet-cell-selection;
border-color: @igGray4;
}
.ui-igspreadsheet .ui-menu {
.boxShadow-1;
}
/* Styles for jQuery 1.12.1*/
.ui-igspreadsheet .ui-menu .ui-menu-item-wrapper.ui-state-active {
background: @brand-primary;
color: #fff;
.ui-icon {
color: #fff;
}
}
/* 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: @brand-primary;
.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: @brand-primary;
color: #fff;
}
.ui-menu-item.ui-state-active > div,
.ui-menu-item.ui-state-active {
background: @brand-primary;
}
.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: @brand-primary;
color: #fff;
.ui-icon {
color: #fff;
}
}

View File

@ -0,0 +1,7 @@
/***********************/
/* Tile manager */
/***********************/
.ui-state-hover .ui-igtile-inner-container {
color: @text-color;
}

View File

@ -0,0 +1,36 @@
/**********/
/* igTree */
/**********/
.ui-widget-content.ui-igtree-root {
background: none;
border: none;
}
.ui-igtree a {
color: @text-color;
padding: 5px!important;
}
.ui-igtree a.ui-state-hover {
.stateHover;
border: 1px solid @btn-default-border;
}
.ui-igtree a.ui-state-hover,
.ui-igtree a.ui-state-active,
.ui-igtree a.ui-state-focus {
padding: 4px!important;
}
.ui-igtree a.ui-state-focus {
.stateFocused
}
.ui-igtree-dropindicator.ui-state-highlight .ui-icon {
color: @ui-icons-darker;
}
.ui-igtree-insertline.ui-state-default {
-webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(0.8, #535353), color-stop(1, transparent)) 100 0 stretch stretch;
}

View File

@ -0,0 +1,25 @@
/***********************/
/* TreeGrid */
/***********************/
/*TreeGrid Paging Context Row*/
.ui-igtreegrid-contextrow {
background-color: @table-bg;
color: fade(@text-color, 70%);
}
.ui-igtreegrid-contextrow td {
border-bottom: solid 1px @table-border-color;
}
.ui-igtreegrid-contextrow td:first-child {
border-left: solid 1px @table-border-color;
}
.ui-igtreegrid-contextrow td:last-child {
border-right: solid 1px @table-border-color;
}
.ui-igtreegrid-contextrow-icon.ui-icon.ui-icon-bookmark {
background-image: @ui-icons-dark;
}

View File

@ -0,0 +1,60 @@
/************/
/* igUpload */
/************/
.ui-igupload-progressbar-icon-default,
.ui-igupload-progressbar-icon-default {
background: url(images/icon_sprite.png) 0 -128px no-repeat !important;
}
.ui-igupload-progressbar-icon-exe {
background: url(images/icon_sprite.png) 0 -144px no-repeat !important;
}
.ui-igupload-progressbar-icon-images {
background: url(images/icon_sprite.png) 0 -160px no-repeat !important;
}
.ui-igupload-progressbar-icon-music {
background: url(images/icon_sprite.png) 0 -176px no-repeat !important;
}
.ui-igupload-progressbar-icon-video {
background: url(images/icon_sprite.png) 0 -192px no-repeat !important;
}
.ui-igupload-cancel-button .ui-button-icon-primary {
color: @ui-icons-dark;
}
.ui-state-hover.ui-igupload-cancel-button {
background-color: transparent !important;
}
.ui-widget-content .ui-igupload-progress-container {
border: 0;
}
.ui-igupload-cancel-button.ui-state-hover .ui-icon-closethick,
.ui-igupload-cancel-button.ui-state-focus .ui-icon-closethick {
color: @ui-icons-darker;
}
.ui-igupload .ui-igprogressbar {
background-color: @progress-bg;
height: 11px!important;
border: 0!important;
}
.ui-igupload-progressbar-filesize {
color: gray;
}
.ui-igupload-summaryprogress-label {
color: gray;
top: 10px;
}
.ui-igupload-summaryprogress-secondary-label {
color: white;
}

View File

@ -0,0 +1,156 @@
/***********************
IG video player
Fixed colours since it works with fixed images
************************/
.ui-igplayer .ui-igplayer-controls,
.ui-igplayer-tooltip .ui-widget-content {
background: #e5e5e5;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2) !important;
}
.ui-igplayer .ui-igplayer-controls {
background-color: rgba(255, 255, 255, 0.9);
}
.ui-igplayer-tooltip .ui-widget-content,
.ui-igtooltip > .ui-widget-content {
background-color: #e5e5e5!important; //left this because of the arrow bg colour
background-image: none!important;
border: 1px solid #c6c6c6!important;
color: @text-color!important;
}
.ui-igtooltip > .ui-widget-content {
padding: 5px;
}
.ui-igtooltip-arrow-bottom,
.ui-igtooltip-arrow-top,
.ui-igtooltip-arrow-left,
.ui-igtooltip-arrow-right {
background-image: url(../../structure/images/igPopover/igPopoverArrows.png) !important;
}
.ui-igtooltip .ui-icon.ui-icon-close {
color: @ui-icons-darker !important;
}
.ui-igplayer .ui-state-active,
.ui-igplayer .ui-state-focus {
border-width: 1px!important;
outline: none;
}
.ui-igplayer .ui-state-hover .ui-icon {
color: @ui-icons-dark;
}
.ui-igplayer .ui-state-focus .ui-icon,
.ui-igplayer .ui-state-active .ui-icon {
color: @ui-icons-dark;
}
.ui-igplayer .ui-igplayer-bookmark-item-title:hover {
text-decoration: none;
}
.ui-igplayer .ui-igbutton.ui-state-default,
.ui-igplayer .ui-button.ui-state-default {
border-color: transparent;
background-color: transparent;
}
.ui-igplayer .ui-igbutton.ui-state-hover,
.ui-igplayer .ui-button.ui-state-hover {
.stateHover;
}
.ui-igplayer .ui-igbutton.ui-state-active,
.ui-igplayer .ui-button.ui-state-active {
.stateActive;
}
.ui-igplayer .ui-igbutton.ui-state-active .ui-icon,
.ui-igplayer .ui-button.ui-state-active .ui-icon {
color: @ui-icons-light;
}
.ui-igplayer .ui-igbutton.ui-state-focus,
.ui-igplayer .ui-button.ui-state-focus {
border-color: darken(@component-active-bg, 6.5%);
}
.ui-igplayer .ui-igprogressbar.ui-widget-content {
background-color: @progress-bg;
}
.ui-widget-header.ui-igplayer-controls {
color: @text-color;
border-bottom: 0;
}
.ui-igplayer-related-list .ui-igplayer-related-video-hover img {
.stateNormal;
border-width: 3px;
}
.ui-igplayer-bookmark-item-time {
background: url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 1px rgba(0, 0, 0, 0)!important;
}
.ui-igslider .ui-igslider-bookmark.ui-state-default {
background: url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 -1px rgba(0, 0, 0, 0)!important;
}
.ui-igplayer-bookmark-item-time:hover,
.ui-igplayer-bookmark-active-item .ui-igplayer-bookmark-item-time,
.ui-igplayer-bookmark-list li:hover .ui-igplayer-bookmark-item-time {
background: transparent url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 -17px!important;
}
.ui-igslider .ui-igslider-bookmark.ui-state-hover {
background: transparent url("images/igVideoPlayer/igVPBookmarkSprite.png") no-repeat 0 -19px!important;
}
/* igProgressBar */
.ui-igprogressbar {}
.ui-igprogressbar.ui-widget-content {
border: 0;
}
.ui-igplayer .ui-widget-header a {
color: @text-color;
}
.ui-igprogressbar-range {
background-color: @progress-bar-bg!important;
}
.ui-igplayer-bookmark-list > li.ui-igplayer-bookmark-active-item {
background-color: @component-active-bg;
}
.ui-igplayer-related-video-container a.ui-button.ui-igbutton,
.ui-igplayer-related-video-bar .ui-button.ui-igbutton {
.stateNormal;
}
.ui-igplayer-related-video-container a.ui-button.ui-igbutton.ui-state-hover,
.ui-igplayer-related-video-bar .ui-button.ui-igbutton.ui-state-hover {
.stateActive;
}
.ui-igplayer-related-video-container a.ui-button.ui-igbutton.ui-state-hover .ui-icon,
.ui-igplayer-related-video-bar .ui-button.ui-igbutton.ui-state-hover .ui-icon {
color: @ui-icons-light;
}
.ui-igplayer-bookmark-list li:hover {
background-color: @gray-lighter;
}
.ui-progressbar.ui-widget-content {
border: 0;
}

View File

@ -0,0 +1,20 @@
@import "base/infragistics.ui.checkbox.less";
@import "infragistics.ui.chart.less";
@import "infragistics.ui.chart.toolbar.less";
@import "infragistics.ui.combo.less";
@import "infragistics.ui.dialog.less";
@import "infragistics.ui.editors.less";
@import "infragistics.ui.grid.less";
@import "infragistics.ui.notifier.less";
@import "infragistics.ui.pivot.less";
@import "infragistics.ui.popover.less";
@import "infragistics.ui.rating.less";
@import "infragistics.ui.scheduler.less";
@import "infragistics.ui.splitter.less";
@import "infragistics.ui.spreadsheet.less";
@import "infragistics.ui.tilemanager.less";
@import "infragistics.ui.tree.less";
@import "infragistics.ui.treegrid.less";
@import "infragistics.ui.upload.less";
@import "infragistics.ui.videoplayer.less";

View File

@ -0,0 +1,332 @@
@import "../variables";
// STYLES NOT RELATED TO THE STYLE GUIDE
body {
padding: 0;
margin: 0;
}
.paragraph-styles p {
margin: 0;
}
.paragraph-styles,
.brand-color {
display: flex;
}
.container {
max-width: 960px;
margin: 100px auto;
}
.style-guide-header {
margin-bottom: 40px;
}
.g-row {
margin-left: -20px;
margin-right: -20px;
}
.brand-color {
color: #fff;
}
.g-title-small {
padding-top: 15px;
border-top: 1px solid #ddd;
}
.container :first-of-type .g-title-small {border: none}
.container .flex-group .g-title-small {border-top: 1px solid #ddd}
.g-box-color {
flex: 1;
margin: 10px 20px;
padding: 20px;
text-align: center;
}
.g-box-text {
flex: 1;
margin: 10px 20px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.inherit {
color: #555;
}
.section {
margin-bottom: 50px;
}
.flex-group {
display: flex;
>* {
flex:1;
margin: 10px 20px;
}
}
.serif-font {
font-family: @font-family-serif;
}
.section-column {
display: flex;
flex-direction: column;
align-items: flex-start;
.g-input-field {
width: 100%;
}
}
.g-input-field {
margin-bottom: 15px;
padding: 0 10px;
&:last-of-type {
margin-bottom: 0;
}
}
.g-label {
margin-bottom: 5px;
margin-top: 15px;
}
.g-flex-row-start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.checkbox-wrap {
margin-bottom: 10px;
&:last-of-type{
margin-bottom: 0;
}
}
input[type="radio"],
input[type="checkbox"]
{
margin: 0 5px 2px 0;
}
// STYLES NOT RELATED TO THE STYLE GUIDE END!!!
/*
STYLE GUIDE STYLES
=======================
*/
body {
font-family: @font-family-sans-serif;
background: @body-bg;
color: @text-color;
line-height: @line-height-base;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 10px;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
}
// Title styles
h1 {
font-size: @font-size-h1;
}
h2 {
font-size: @font-size-h2;
}
h3 {
font-size: @font-size-h3;
}
h4 {
font-size: @font-size-h4;
}
h5 {
font-size: @font-size-h5;
}
h6 {
font-size: @font-size-h6;
}
// Links Styles
a {
color: @link-color;
&:hover {
color: @link-hover-color;
}
}
// Brand colors
.bg-primary {
background: @brand-primary;
}
.bg-success {
background: @brand-success;
}
.bg-info {
background: @brand-info;
}
.bg-warning {
background: @brand-warning;
}
.bg-danger {
background: @brand-danger;
}
// Gray colors
.bg-gray-darker {
background: @gray-darker;
}
.bg-gray-dark {
background: @gray-dark;
}
.bg-gray {
background: @gray;
}
.bg-gray-light {
background: @gray-light;
}
.bg-gray-lighter {
background: @gray-lighter;
}
// Text color
.text-color {
color: @text-color;
}
.text-muted {
color: @text-muted;
}
// Alert text styles
.alert-box {
padding: 5px;
}
.text-success {
color: @state-success-text;
background: @state-success-bg;
border: 1px solid @state-success-border;
}
.text-info {
color: @state-info-text;
background: @state-info-bg;
border: 1px solid @state-info-border;
}
.text-warning {
color: @state-warning-text;
background: @state-warning-bg;
border: 1px solid @state-warning-border;
}
.text-danger {
color: @state-danger-text;
background: @state-danger-bg;
border: 1px solid @state-danger-border;
}
/* Forms, inputs...*/
.g-input-field {
height: @input-height-base;
background: @input-bg;
color:@input-color;
border: 1px solid @input-border;
border-radius: @input-border-radius;
&:focus {
border-color: @input-border-focus;
}
}
.input--large {
height: @input-height-large;
}
.input--small {
height:@input-height-small;
}
.g-input-field[disabled] {
background: @input-bg-disabled;
}
.has-error {
.g-label {
color: @label-danger-bg;
}
.g-input-field {
border-color: @brand-danger;
}
}
.has-warning {
.g-label {
color: @label-warning-bg;
}
.g-input-field {
border-color: @brand-warning;
}
}
.has-success {
.g-label {
color: @label-success-bg;
}
.g-input-field {
border-color: @brand-success;
}
}
// Placeholder styles
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: @input-color-placeholder;
}
::-moz-placeholder { /* Firefox 19+ */
color: @input-color-placeholder;
}
:-ms-input-placeholder { /* IE 10+ */
color: @input-color-placeholder;
}
:-moz-placeholder { /* Firefox 18- */
color: @input-color-placeholder;
}

View File

@ -0,0 +1 @@
.paragraph-styles p,body{margin:0}.g-box-color,.text-center{text-align:center}.brand-color,.flex-group,.paragraph-styles,.section-column{display:flex}body{padding:0}.container{max-width:960px;margin:100px auto}.style-guide-header{margin-bottom:40px}.g-row{margin-left:-20px;margin-right:-20px}.g-box-color,.g-box-text{flex:1;margin:10px 20px}.brand-color{color:#fff}.g-title-small{padding-top:15px;border-top:1px solid #ddd}.container :first-of-type .g-title-small{border:none}.container .flex-group .g-title-small{border-top:1px solid #ddd}.g-box-color{padding:20px}.text-right{text-align:right}.text-left{text-align:left}.inherit{color:#555}.section{margin-bottom:50px}.flex-group>*{flex:1;margin:10px 20px}.serif-font{font-family:Georgia,"Times New Roman",Times,serif}body,h1,h2,h3,h4,h5,h6{font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif}.section-column{flex-direction:column;align-items:flex-start}.section-column .g-input-field{width:100%}.g-input-field{margin-bottom:15px;padding:0 10px}.g-input-field:last-of-type{margin-bottom:0}.g-label{margin-bottom:5px;margin-top:15px}.g-flex-row-start{display:flex;align-items:center;justify-content:flex-start}.checkbox-wrap{margin-bottom:10px}.checkbox-wrap:last-of-type{margin-bottom:0}input[type=radio],input[type=checkbox]{margin:0 5px 2px 0}body{background:#fff;color:#2C3E50;line-height:1.42857143}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:10px;font-weight:400;line-height:1.1;color:inherit}h1{font-size:39px}h2{font-size:32px}h3{font-size:26px}h4{font-size:19px}h5{font-size:15px}h6{font-size:13px}a,a:hover{color:#18BC9C}.bg-primary{background:#2C3E50}.bg-success{background:#18BC9C}.bg-info{background:#3498DB}.bg-warning{background:#F39C12}.bg-danger{background:#E74C3C}.bg-gray-base{background:#000}.bg-gray-darker{background:#222}.bg-gray-dark{background:#7b8a8b}.bg-gray{background:#95a5a6}.bg-gray-light{background:#b4bcc2}.bg-gray-lighter{background:#ecf0f1}.text-color{color:#2C3E50}.text-muted{color:#b4bcc2}.alert-box{padding:5px}.text-success{color:#fff;background:#18BC9C;border:1px solid #18BC9C}.text-info{color:#fff;background:#3498DB;border:1px solid #3498DB}.text-warning{color:#fff;background:#F39C12;border:1px solid #F39C12}.text-danger{color:#fff;background:#E74C3C;border:1px solid #E74C3C}.g-input-field{height:45px;background:#fff;color:#2C3E50;border:1px solid #dce4ec;border-radius:4px}.g-input-field:focus{border-color:#2C3E50}.input--large{height:66px}.input--small{height:35px}.g-input-field[disabled]{background:#ecf0f1}.has-error .g-label{color:#E74C3C}.has-error .g-input-field{border-color:#E74C3C}.has-warning .g-label{color:#F39C12}.has-warning .g-input-field{border-color:#F39C12}.has-success .g-label{color:#18BC9C}.has-success .g-input-field{border-color:#18BC9C}::-webkit-input-placeholder{color:#acb6c0}::-moz-placeholder{color:#acb6c0}:-ms-input-placeholder{color:#acb6c0}:-moz-placeholder{color:#acb6c0}

View File

@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style guide</title>
<link rel="stylesheet" href="style-guide.css">
</head>
<body>
<div class="container">
<header class="style-guide-header">
<h1 class="g-title-big">
Style guide - flatly
</h1>
</header>
<section class="section">
<h3 class="g-title-small">Brand Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-primary">#2C3E50</div>
<div class="g-box-color bg-success">#18BC9C</div>
<div class="g-box-color bg-info">#3498DB</div>
<div class="g-box-color bg-warning">#F39C12</div>
<div class="g-box-color bg-danger">#E74C3C</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Gray Colors</h3>
<div class="g-row brand-color">
<div class="g-box-color bg-gray-base">#000000</div>
<div class="g-box-color bg-gray-darker">#222222</div>
<div class="g-box-color bg-gray-dark">#7b8a8b</div>
<div class="g-box-color bg-gray">#95a5a6</div>
<div class="g-box-color bg-gray-light">#b4bcc2</div>
<div class="g-box-color bg-gray-lighter inherit">#ecf0f1</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Paragraph styles</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section serif-font">
<h3 class="g-title-small">Serif font</h3>
<div class="g-row paragraph-styles">
<div class="g-box-text text-left">
<h4>Text Left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-center">
<h4>Text Center</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
<div class="g-box-text text-right">
<h4>Text Right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto cum molestias necessitatibus nihil pariatur placeat veniam voluptates. Accusamus alias beatae ea est illo quibusdam quidem quod velit veniam vitae!</p>
</div>
</div>
</section>
<section class="section">
<h3 class="g-title-small">Links Styles</h3>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#">Link in paragraph</a> elit. </p>
<a href="#">This is a link</a>
</section>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Titles Styles</h3>
<br>
<h1>This is h1 title</h1>
<h2>This is h2 title</h2>
<h3>This is h3 title</h3>
<h4>This is h4 title</h4>
<h5>This is h5 title</h5>
<h6>This is h6 title</h6>
</section>
<section class="section">
<h3 class="g-title-small">Text color</h3>
<p class="text-color">Default text color example</p>
<p class="text-muted">Muted text color example</p>
<h3 class="g-title-small">Alerts Styles</h3>
<p class="alert-box text-success"> Success alert box example</p>
<p class="alert-box text-info"> Info alert box example</p>
<p class="alert-box text-warning"> Warning alert box example</p>
<p class="alert-box text-danger"> Danger alert box example</p>
</section>
</div>
</div>
<div class="g-row">
<div class="flex-group">
<section class="section">
<h3 class="g-title-small">Form fields</h3>
<form>
<div class="section-column">
<label class="g-label" for="g-larg-input">Large input</label>
<input id="g-larg-input" class="g-input-field input--large" placeholder="Placeholder" type="text">
</div>
<div class="section-column">
<label class="g-label" for="g-disabled-input">Disabled input</label>
<input id="g-disabled-input" class="g-input-field" disabled placeholder="Placeholder" type="text">
</div>
<div class="section-column has-error">
<label class="g-label" for="g-error-input">Input Error</label>
<input id="g-error-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-warning">
<label class="g-label" for="g-warning-input">Input Warning</label>
<input id="g-warning-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
<div class="section-column has-success">
<label class="g-label" for="g-success-input">Input Success</label>
<input id="g-success-input" class="g-input-field input--small" placeholder="Placeholder" type="text">
</div>
</form>
</section>
<section class="section">
<h3 class="g-title-small">Checkboxs</h3>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<label class="checkbox-wrap g-flex-row-start">
<input type="checkbox"> <span>Checkbox</span>
</label>
<h3 class="g-title-small">Radio buttons</h3>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="">
Option one is this
</label>
<label class="g-flex-row-start">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked="">
Option one is this
</label>
</section>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,869 @@
// Flatly 3.3.7
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: #7b8a8b; // #333
@gray: #95a5a6; // #555
@gray-light: #b4bcc2; // #999
@gray-lighter: #ecf0f1; // #eee
@brand-primary: #2C3E50;
@brand-success: #18BC9C;
@brand-info: #3498DB;
@brand-warning: #F39C12;
@brand-danger: #E74C3C;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #fff;
//** Global text color on `<body>`.
@text-color: @brand-primary;
//** Global textual link color.
@link-color: @brand-success;
//** Link hover color set via `darken()` function.
@link-hover-color: @link-color;
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 15px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: @font-family-base;
@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-color: inherit;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular";
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 10px;
@padding-base-horizontal: 15px;
@padding-large-vertical: 18px;
@padding-large-horizontal: 27px;
@padding-small-vertical: 6px;
@padding-small-horizontal: 9px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicate dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
//** Default background color used for all tables.
@table-bg: transparent;
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
@table-bg-hover: @gray-lighter;
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@table-border-color: @gray-lighter;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-default-color: #fff;
@btn-default-bg: @gray;
@btn-default-border: @btn-default-bg;
@btn-primary-color: @btn-default-color;
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-success-color: @btn-default-color;
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
@btn-info-color: @btn-default-color;
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;
@btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@btn-danger-color: @btn-default-color;
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
@btn-link-disabled-color: @gray-light;
// Allows for customizing button radius independently from global border radius
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-small: @border-radius-small;
//== Forms
//
//##
//** `<input>` background color
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: @gray-lighter;
//** Text color for `<input>`s
@input-color: @text-color;
//** `<input>` border color
@input-border: #dce4ec;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus
@input-border-focus: @brand-primary;
//** Placeholder text color
@input-color-placeholder: #acb6c0;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 4);
//** Large `.form-control` height
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 4);
//** Small `.form-control` height
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 4);
//** `.form-group` margin
@form-group-margin-bottom: 15px;
@legend-color: @text-color;
@legend-border-color: transparent;
//** Background color for textual input addons
@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15);
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #ccc;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: @gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color: #fff;
//** Hover background for dropdown links.
@dropdown-link-hover-bg: @component-active-bg;
//** Active dropdown menu item text color.
@dropdown-link-active-color: #fff;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @gray-light;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light;
//** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
//== Navbar
//
//##
// Basics of a navbar
@navbar-height: 60px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #fff;
@navbar-default-bg: @brand-primary;
@navbar-default-border: transparent;
// Navbar links
@navbar-default-link-color: #fff;
@navbar-default-link-hover-color: @brand-success;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);
@navbar-default-toggle-icon-bar-bg: #fff;
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: #fff;
@navbar-inverse-bg: @brand-success;
@navbar-inverse-border: transparent;
// Inverted navbar links
@navbar-inverse-link-color: #fff;
@navbar-inverse-link-hover-color: @brand-primary;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: #fff;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
@navbar-inverse-link-disabled-color: #ccc;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
//== Navs
//
//##
//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
//== Tabs
@nav-tabs-border-color: @gray-lighter;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @brand-primary;
@nav-tabs-active-link-hover-border-color: @gray-lighter;
@nav-tabs-justified-link-border-color: @gray-lighter;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
@pagination-color: #fff;
@pagination-bg: @brand-success;
@pagination-border: transparent;
@pagination-hover-color: #fff;
@pagination-hover-bg: darken(@brand-success, 15%);
@pagination-hover-border: transparent;
@pagination-active-color: #fff;
@pagination-active-bg: darken(@brand-success, 15%);
@pagination-active-border: transparent;
@pagination-disabled-color: @gray-lighter;
@pagination-disabled-bg: lighten(@brand-success, 15%);
@pagination-disabled-border: transparent;
//== Pager
//
//##
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: #fff;
//== Jumbotron
//
//##
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #fff;
@state-success-bg: @brand-success;
@state-success-border: @brand-success;
@state-info-text: #fff;
@state-info-bg: @brand-info;
@state-info-border: @brand-info;
@state-warning-text: #fff;
@state-warning-bg: @brand-warning;
@state-warning-border: @brand-warning;
@state-danger-text: #fff;
@state-danger-bg: @brand-danger;
@state-danger-border: @brand-danger;
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: .9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//##
//** Default label background color
@label-default-bg: @btn-default-bg;
//** Primary label background color
@label-primary-bg: @brand-primary;
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 20px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
//** Modal title line-height
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: @gray-lighter;
//** Progress bar text color
@progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
@list-group-bg: #fff;
//** `.list-group-item` border color
@list-group-border: @gray-lighter;
//** List group border radius
@list-group-border-radius: @border-radius-base;
//** Background color of single list items on hover
@list-group-hover-bg: @gray-lighter;
//** Text color of active list items
@list-group-active-color: @component-active-color;
//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333;
//== Panels
//
//##
@panel-bg: #fff;
@panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base;
//** Border color for elements within panels
@panel-inner-border: @gray-lighter;
@panel-footer-bg: @gray-lighter;
@panel-default-text: @text-color;
@panel-default-border: @gray-lighter;
@panel-default-heading-bg: @gray-lighter;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: 4px;
//** Thumbnail background color
@thumbnail-bg: @body-bg;
//** Thumbnail border color
@thumbnail-border: @gray-lighter;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
//== Wells
//
//##
@well-bg: @gray-lighter;
@well-border: transparent;
//== Badges
//
//##
@badge-color: #fff;
//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @brand-primary;
//** Badge text color in active nav link
@badge-active-color: @brand-primary;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
//** Breadcrumb background color
@breadcrumb-bg: @gray-lighter;
//** Breadcrumb text color
@breadcrumb-color: #ccc;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: @gray;
//** Textual separator for between breadcrumb elements
@breadcrumb-separator: "/";
//== Carousel
//
//##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
//== Close
//
//##
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: none;
//== Code
//
//##
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: @gray-lighter;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-lighter;
//** Page header border color
@page-header-border-color: transparent;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Point at which .dl-horizontal becomes horizontal
@dl-horizontal-breakpoint: @grid-float-breakpoint;
//** Horizontal line color.
@hr-border: @gray-lighter;

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,157 @@
// Icons
@ui-icons-darker: #222222;
@ui-icons-dark: #888888;
@ui-icons-light: #ffffff;
@ui-icons-accent: @brand-primary;
//dialog
@dialog-header: @brand-primary;
@igGray1: #f0f0f0;
@igGray2: #eee;
@igGray3: #e8e8e8;
@igGray4: #dadada;
@igGray5: #bcbcbc;
@igGray6: #ccc;
@igGray7: #999;
@igGray8: #888;
@igGray9: #777;
@igGray10: #444;
@igGray11: rgba(0, 0, 0, 0.12);
// Gradual palette, used mainly for bulletGraph and linearGauge
@chartGradualPalette1: @brand-primary;
@chartGradualPalette2: lighten(@brand-primary, 5%);
@chartGradualPalette3: lighten(@brand-primary, 10%);
@chartGradualPalette4: lighten(@brand-primary, 15%);
@chartGradualPalette5: lighten(@brand-primary, 20%);
@chartGradualPalette6: lighten(@brand-primary, 24%);
@chartGradualPalette7: lighten(@brand-primary, 28%);
@chartGradualPalette8: lighten(@brand-primary, 32%);
@chartGradualPalette9: lighten(@brand-primary, 36%);
@chartGradualPalette10: lighten(@brand-primary, 40%);
@chartGradualPalette11: lighten(@brand-primary, 44%);
@chartGradualPalette12: lighten(@brand-primary, 48%);
// Sparkline palette
@sparkpath: #43ABD5;
@negativesparkpath: #43ABD5;
@trendline: #7F7F7F;
@markers: #43ABD5;
@firstmarker: #237FA7;
@lastmarker: #FBC139;
@highmarker: #A3B929;
@lowmarker: #AF39FF;
@negativemarkers: #E5516F;
// Spreadsheet
@accent1: @brand-primary;
@bar-background: #e4e4e4;
@row-col-bar-border: #cccccc;
@tab-bar-border: #999;
@spreadsheet-accent: @brand-primary;
@spreadsheet-icon: @brand-primary;
@spreadsheet-cell-selection: @brand-primary;
@spreadsheet-cell-selection-rgba: rgba(0, 140, 186, .22); /* needs to be improved with mixin*/
@spreadsheet-text-color: #111;
@spreadsheet-wight-text: #fff;
@spreadsheet-empty-bg: #fff;
@spreadsheet-disabled: #c4c4c4;
@spreadsheet-danger: @brand-danger;
@spreadsheet-menu-item-bg-hover: @spreadsheet-cell-selection-rgba;
@spreadsheet-formula-btn-bg: @body-bg;
@spreadsheet-header-selected-cell-bg: lighten(@brand-primary, 20%);
@spreadsheet-tab-text-color: #666;
@spreadsheet-formula-btn-color: #666;
// 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:@igGray4;
@scheduler-start-time-color: @brand-primary;
@scheduler-end-time-color: @brand-warning;
@scheduler-selected-subject-color: @brand-primary;
@scheduler-selected-location-color: @brand-primary;
@scheduler-month-view-bg: transparent;
@scheduler-activity-indicator-bg: @igGray6;
@scheduler-day-week-view-bg: transparent;
@scheduler-day-week-timeslot-selected: @gray-light;
@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:@gray-light;
@scheduler-tabs-color:@text-color;
@scheduler-tabs-selected-text-color:@brand-primary;
@scheduler-tabs-selected-icons-color:@brand-primary;
@scheduler-tabs-selected-hover:darken(@brand-primary, 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: @brand-primary;
@scheduler-month-view-month-header-bg:@brand-primary;
@scheduler-month-view-day-leading-bg:transparent;
@scheduler-month-view-day-leading-color:@gray-light;
@scheduler-month-view-day-trailing-bg:transparent;
@scheduler-month-view-day-trailing-color:@gray-light;
@scheduler-selectall-bg:@brand-primary;
@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:@brand-primary;
@scheduler-tabs-hover-bg:transparent;
@scheduler-tabs-hover-color:@brand-primary;
@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:@gray-light;
// 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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 743 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Some files were not shown because too many files have changed in this diff Show More