/*
{
"translate": true,
"groups":[
{
"name": "UTR.LESS.GLOBAL_COLORS",
"common": true,
"sequence": 1
},
{
"name": "UTR.LESS.CONTAINERS",
"common": true,
"sequence": 2
},
{
"name": "UTR.LESS.REGIONS",
"common": true,
"sequence": 3
},
{
"name": "UTR.LESS.BUTTONS",
"common": false,
"sequence": 4
},
{
"name": "UTR.LESS.FORMS",
"common": false,
"sequence": 5
},
{
"name": "UTR.LESS.STATES",
"common": false,
"sequence": 6
},
{
"name": "UTR.LESS.PALETTE",
"common": false,
"sequence": 7
},
{
"name": "UTR.LESS.NAVIGATION",
"common": false,
"sequence": 8
},
{
"name": "UTR.LESS.INTERACTIVE_REPORTS",
"common": false,
"sequence": 9
},
{
"name": "UTR.LESS.LAYOUT",
"common": false,
"sequence": 10
}
]
}
*/
/*
{
"var" : "@g_Accent-BG",
"name" : "UTR.LESS.HEADER_ACCENT",
"type" : "color",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
@g_Accent-BG: #2578cf;
/*
{
"var" : "@g_Accent-OG",
"name" : "UTR.LESS.BODY_ACCENT",
"type" : "color",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
@g_Accent-OG: #F8F8F8;
@g_Accent-FG: contrast(@g_Accent-BG, darken(@g_Accent-BG, 75%), lighten(@g_Accent-BG, 75%), 43%);
/*
{
"var" : "@g_Body-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.BODY"
}
*/
@g_Body-BG: @g_Accent-OG;
/*
{
"var" : "@g_Body-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.BODY"
}
*/
@g_Body-Text: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 75%), 100%), desaturate(lighten(@g_Body-BG, 75%), 50%)), 100%);
/*
{
"var" : "@g_Actions-Col-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.ACTIONS_COLUMN"
}
*/
@g_Actions-Col-BG: contrast(@g_Accent-OG, darken(@g_Accent-OG, 5%), lighten(@g_Accent-OG, 5%), 43%);
/*
{
"var" : "@g_Actions-Col-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.ACTIONS_COLUMN"
}
*/
@g_Actions-Col-Text: fade(contrast(@g_Actions-Col-BG, desaturate(darken(@g_Actions-Col-BG, 75%), 100%), desaturate(lighten(@g_Actions-Col-BG, 75%), 50%)), 100%);
/*
{
"var" : "@g_Body-Title-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.TITLE_BAR"
}
*/
@g_Body-Title-BG: lighten(@g_Accent-BG, 50%);
/*
{
"var" : "@g_Body-Title-FG",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.TITLE_BAR"
}
*/
@g_Body-Title-FG: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG, 75%), 100%), desaturate(lighten(@g_Body-Title-BG, 75%), 50%)), 100%);
/*
{
"var" : "@g_Container-BorderRadius",
"name" : "UTR.LESS.CONTAINER_BORDER_RADIUS",
"type" : "number",
"units": "px",
"range": {
"min": 0,
"max": 30,
"increment": 2
},
"group": "UTR.LESS.CONTAINERS"
}
*/
@g_Container-BorderRadius: 2px;
/*
{
"var" : "@g_Color-Palette-1",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_1"
}
*/
@g_Color-Palette-1: #ff2d55;
/*
{
"var" : "@g_Color-Palette-1-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_1"
}
*/
@g_Color-Palette-1-FG: fade(contrast(@g_Color-Palette-1, darken(@g_Color-Palette-1, 50%), lighten(@g_Color-Palette-1, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-2",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_2"
}
*/
@g_Color-Palette-2: #007aff;
/*
{
"var" : "@g_Color-Palette-2-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_2"
}
*/
@g_Color-Palette-2-FG: fade(contrast(@g_Color-Palette-2, darken(@g_Color-Palette-2, 50%), lighten(@g_Color-Palette-2, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-3",
"name" : "UTR.LESS.COLOR_3",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_3"
}
*/
@g_Color-Palette-3: #ff9500;
/*
{
"var" : "@g_Color-Palette-3-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_3"
}
*/
@g_Color-Palette-3-FG: fade(contrast(@g_Color-Palette-3, darken(@g_Color-Palette-3, 50%), lighten(@g_Color-Palette-3, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-4",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_4"
}
*/
@g_Color-Palette-4: #4cd964;
/*
{
"var" : "@g_Color-Palette-4-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_4"
}
*/
@g_Color-Palette-4-FG: fade(contrast(@g_Color-Palette-4, darken(@g_Color-Palette-4, 50%), lighten(@g_Color-Palette-4, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-5",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_5"
}
*/
@g_Color-Palette-5: #8e8e93;
/*
{
"var" : "@g_Color-Palette-5-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_5"
}
*/
@g_Color-Palette-5-FG: fade(contrast(@g_Color-Palette-5, darken(@g_Color-Palette-5, 50%), lighten(@g_Color-Palette-5, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-6",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_6"
}
*/
@g_Color-Palette-6: #34aadc;
/*
{
"var" : "@g_Color-Palette-6-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_6"
}
*/
@g_Color-Palette-6-FG: fade(contrast(@g_Color-Palette-6, darken(@g_Color-Palette-6, 50%), lighten(@g_Color-Palette-6, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-7",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_7"
}
*/
@g_Color-Palette-7: #ffcc00;
/*
{
"var" : "@g_Color-Palette-7-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_7"
}
*/
@g_Color-Palette-7-FG: fade(contrast(@g_Color-Palette-7, darken(@g_Color-Palette-7, 50%), lighten(@g_Color-Palette-7, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-8",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_8"
}
*/
@g_Color-Palette-8: #5ac8fa;
/*
{
"var" : "@g_Color-Palette-8-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_8"
}
*/
@g_Color-Palette-8-FG: fade(contrast(@g_Color-Palette-8, darken(@g_Color-Palette-8, 50%), lighten(@g_Color-Palette-8, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-9",
"name" : "UTR.LESS.COLOR_9",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_9"
}
*/
@g_Color-Palette-9: #ff3b30;
/*
{
"var" : "@g_Color-Palette-9-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_9"
}
*/
@g_Color-Palette-9-FG: fade(contrast(@g_Color-Palette-9, darken(@g_Color-Palette-9, 50%), lighten(@g_Color-Palette-9, 50%)), 100%);
/*
{
"var" : "@g_Color-Palette-10",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_10"
}
*/
@g_Color-Palette-10: #5856D6;
/*
{
"var" : "@g_Color-Palette-10-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_10"
}
*/
@g_Color-Palette-10-FG: fade(contrast(@g_Color-Palette-10, darken(@g_Color-Palette-10, 50%), lighten(@g_Color-Palette-10, 50%)), 100%);
// 10 Color colors. UTR.LESS.GLOBAL_COLORS.
@_colors: @g_Color-Palette-1, @g_Color-Palette-2,
@g_Color-Palette-3, @g_Color-Palette-4,
@g_Color-Palette-5, @g_Color-Palette-6,
@g_Color-Palette-7, @g_Color-Palette-8,
@g_Color-Palette-9, @g_Color-Palette-10,
mix(#FFF,@g_Color-Palette-1,20%), mix(#FFF,@g_Color-Palette-2,20%),
mix(#FFF,@g_Color-Palette-3,20%), mix(#FFF,@g_Color-Palette-4,20%),
mix(#FFF,@g_Color-Palette-5,20%), mix(#FFF,@g_Color-Palette-6,20%),
mix(#FFF,@g_Color-Palette-7,20%), mix(#FFF,@g_Color-Palette-8,20%),
mix(#FFF,@g_Color-Palette-9,20%), mix(#FFF,@g_Color-Palette-10,20%),
mix(#000,@g_Color-Palette-1,10%), mix(#000,@g_Color-Palette-2,10%),
mix(#000,@g_Color-Palette-3,10%), mix(#000,@g_Color-Palette-4,10%),
mix(#000,@g_Color-Palette-5,10%), mix(#000,@g_Color-Palette-6,10%),
mix(#000,@g_Color-Palette-7,10%), mix(#000,@g_Color-Palette-8,10%),
mix(#000,@g_Color-Palette-9,10%), mix(#000,@g_Color-Palette-10,10%);
@_colors_FG: @g_Color-Palette-1-FG, @g_Color-Palette-2-FG,
@g_Color-Palette-3-FG, @g_Color-Palette-4-FG,
@g_Color-Palette-5-FG, @g_Color-Palette-6-FG,
@g_Color-Palette-7-FG, @g_Color-Palette-8-FG,
@g_Color-Palette-9-FG, @g_Color-Palette-10-FG,
mix(#FFF,@g_Color-Palette-1-FG,20%),
mix(#FFF,@g_Color-Palette-2-FG,20%),
mix(#FFF,@g_Color-Palette-3-FG,20%), mix(#FFF,@g_Color-Palette-4-FG,20%),
mix(#FFF,@g_Color-Palette-5-FG,20%), mix(#FFF,@g_Color-Palette-6-FG,20%),
mix(#FFF,@g_Color-Palette-7-FG,20%), mix(#FFF,@g_Color-Palette-8-FG,20%),
mix(#FFF,@g_Color-Palette-9-FG,20%), mix(#FFF,@g_Color-Palette-10-FG,20%),
mix(#000,@g_Color-Palette-1-FG,10%), mix(#000,@g_Color-Palette-2-FG,10%),
mix(#000,@g_Color-Palette-3-FG,10%), mix(#000,@g_Color-Palette-4-FG,10%),
mix(#000,@g_Color-Palette-5-FG,10%), mix(#000,@g_Color-Palette-6-FG,10%),
mix(#000,@g_Color-Palette-7-FG,10%), mix(#000,@g_Color-Palette-8-FG,10%),
mix(#000,@g_Color-Palette-9-FG,10%), mix(#000,@g_Color-Palette-10-FG,10%);
/* State Colors
========================================================================== */
/*
{
"var" : "@g_Disabled-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.DISABLED"
}
*/
@g_Disabled-BG: #707070;
/*
{
"var" : "@g_Disabled-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.DISABLED"
}
*/
@g_Disabled-FG: #FFFFFF;
/*
{
"var" : "@g_Primary-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.PRIMARY"
}
*/
@g_Primary-BG: contrast(@g_Accent-BG, darken(@g_Accent-BG, 35%), lighten(@g_Accent-BG, 35%), 43%);
/*
{
"var" : "@g_Primary-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.PRIMARY"
}
*/
@g_Primary-FG: contrast(@g_Primary-BG, darken(@g_Primary-BG, 75%), lighten(@g_Primary-BG, 75%), 43%);
/*
{
"var" : "@g_Success-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.SUCCESS"
}
*/
@g_Success-BG: #4cd964;
/*
{
"var" : "@g_Success-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.SUCCESS"
}
*/
@g_Success-FG: contrast(@g_Success-BG, darken(@g_Success-BG, 50%), lighten(@g_Success-BG, 50%), 43%);
/*
{
"var" : "@g_Info-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.INFO"
}
*/
@g_Info-BG: #2578cf;
/*
{
"var" : "@g_Info-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.INFO"
}
*/
@g_Info-FG: contrast(@g_Info-BG, darken(@g_Info-BG, 75%), lighten(@g_Info-BG, 75%), 43%);
/*
{
"var" : "@g_Warning-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.WARNING"
}
*/
@g_Warning-BG: #ffcc00;
/*
{
"var" : "@g_Warning-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.WARNING"
}
*/
@g_Warning-FG: contrast(@g_Warning-BG, darken(@g_Warning-BG, 50%), lighten(@g_Warning-BG, 50%), 43%);
/*
{
"var" : "@g_Danger-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.DANGER"
}
*/
@g_Danger-BG: #e90c00;
/*
{
"var" : "@g_Danger-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.DANGER"
}
*/
@g_Danger-FG: contrast(@g_Danger-BG, darken(@g_Danger-BG, 50%), lighten(@g_Danger-BG, 50%), 43%);
/*
{
"var" : "@g_Header-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.HEADER"
}
*/
@g_Header-BG: @g_Accent-BG;
/*
{
"var" : "@g_Header-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.HEADER"
}
*/
@g_Header-FG: @g_Accent-FG;
// BEGIN REGION COLORS HERE
/*
{
"var" : "@g_Region-Header-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.REGIONS",
"subgroup": "UTR.LESS.REGION_HEADER"
}
*/
@g_Region-Header-BG: lighten(@g_Accent-OG, 1.5%);
/*
{
"var" : "@g_Region-Header-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.REGIONS",
"subgroup": "UTR.LESS.REGION_HEADER"
}
*/
@g_Region-Header-FG: fade(contrast(@g_Region-Header-BG, desaturate(darken(@g_Region-Header-BG, 75%), 100%), desaturate(lighten(@g_Region-Header-BG, 75%), 50%)), 100%);
/*
{
"var" : "@g_Region-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.REGIONS",
"subgroup": "UTR.LESS.BODY"
}
*/
@g_Region-BG: lighten(@g_Region-Header-BG, 20%);
/*
{
"var" : "@g_Region-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.REGIONS",
"subgroup": "UTR.LESS.BODY"
}
*/
@g_Region-FG: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
@g_Region-FG-Light: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
@g_Region-FG-Extra-Light: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 25%), 100%), desaturate(lighten(@g_Region-BG, 25%), 50%)), 100%);
/*
{
"var" : "@g_Form-Item-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.FORMS",
"subgroup": "UTR.LESS.ITEM"
}
*/
@g_Form-Item-BG: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
/*
{
"var" : "@g_Form-Item-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.FORMS",
"subgroup": "UTR.LESS.ITEM"
}
*/
@g_Form-Item-FG: fade(contrast(@g_Form-Item-BG, desaturate(darken(@g_Form-Item-BG, 75%), 100%), desaturate(lighten(@g_Form-Item-BG, 75%), 50%)), 100%);
/*
{
"var" : "@g_Form-Label",
"name" : "UTR.LESS.LABEL",
"type" : "color",
"group": "UTR.LESS.FORMS"
}
*/
@g_Form-Label: contrast(@g_Region-FG, darken(@g_Region-FG, 5%), lighten(@g_Region-FG, 5%), 43%);
/*
{
"var" : "@g_Form-BorderRadius",
"name" : "UTR.LESS.BORDER_RADIUS",
"type" : "number",
"units": "px",
"range": {
"min": 0,
"max": 30,
"increment": 2
},
"group": "UTR.LESS.FORMS"
}
*/
@g_Form-BorderRadius: @g_Container-BorderRadius;
// BEGIN NAVIGATION
/*
{
"var" : "@g_Nav-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.BODY"
}
*/
@g_Nav-BG: darken(@g_Accent-BG,15%);
/*
{
"var" : "@g_Nav-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.BODY"
}
*/
@g_Nav-FG: contrast(@g_Nav-BG, darken(@g_Nav-BG, 75%), lighten(@g_Nav-BG, 75%), 20%);
/*
{
"var" : "@g_Nav-Icon",
"name" : "UTR.LESS.NORMAL",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.ICON",
"checkContrast": false
}
*/
@g_Nav-Icon: @g_Nav-FG;
/*
{
"var" : "@g_Nav-Active-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.SELECTED_STATE"
}
*/
@g_Nav-Active-BG: darken(@g_Accent-BG,5%);
/*
{
"var" : "@g_Nav-Active-FG",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.SELECTED_STATE"
}
*/
@g_Nav-Active-FG: contrast(@g_Nav-Active-BG, darken(@g_Nav-Active-BG, 75%), lighten(@g_Nav-Active-BG, 75%), 43%);
/*
{
"var" : "@g_Nav-Icon-Active",
"name" : "UTR.LESS.ACTIVE_STATE",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.ICON",
"checkContrast": false
}
*/
@g_Nav-Icon-Active: @g_Nav-Active-FG;
/*
{
"var" : "@g_Link-Base",
"name" : "UTR.LESS.LINK_COLOR",
"type" : "color",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
@g_Link-Base: darken(@g_Accent-BG,3%);
/*
{
"var" : "@g_Focus",
"name" : "UTR.LESS.FOCUS_OUTLINE",
"type" : "color",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
@g_Focus: @g_Accent-BG;
/*
{
"var" : "@g_Button-BorderRadius",
"name" : "UTR.LESS.BORDER_RADIUS",
"type" : "number",
"units": "px",
"range": {
"min": 0,
"max": 24,
"increment": 2
},
"group": "UTR.LESS.BUTTONS"
}
*/
@g_Button-BorderRadius: 2px;
/*
{
"var" : "@g_Button-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.NORMAL"
}
*/
@g_Button-BG: mix(#F0F0F0, @g_Region-BG);
/*
{
"var" : "@g_Button-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.NORMAL"
}
*/
@g_Button-Text-tmp: contrast(@g_Button-BG, darken(@g_Button-BG, 75%), lighten(@g_Button-BG, 75%), 43%);
@g_Button-Text: fade(@g_Button-Text-tmp,100%);
/*
* BEGIN MIXINS
*/
.region-hover() {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
}
.text-combo(@percent) {
.t-Body & {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, @percent), 100%), desaturate(lighten(@g_Body-BG, @percent), 50%)), 100%);
}
.t-Body-title & {
color: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG, @percent), 100%), desaturate(lighten(@g_Body-Title-BG, @percent), 50%)), 100%);
}
.t-Body-info & {
color: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG, @percent), 100%), desaturate(lighten(@g_Body-Title-BG, @percent), 50%)), 100%);
}
.t-Region &,
.t-ButtonRegion & {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, @percent), 100%), desaturate(lighten(@g_Region-BG, @percent), 50%)), 100%);
}
}
.text-black-white() {
.text-combo(100%);
}
//#404040
.text-dark() {
.text-combo(75%);
}
//#707070
.text-normal() {
.text-combo(50%);
}
.text-light() {
.text-combo(25%);
}
.transform-less(@string) {
-webkit-transform: @string;
-ms-transform: @string;
transform: @string;
}
.translate3d-less(@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z);
-ms-transform: translate(@x);
transform: translate3d(@x, @y, @z);
}
/*
{
"palette": {
"enabled": true,
"defaults": {
"hue": 250,
"separation": 50,
"mode": "dual"
},
"availableModes": [
"monochrome",
"dual"
],
"autoFillOutputs": true,
"userDefinedShades": true,
"outputMapping": {
"0" : "@utr_Palette1-lighter",
"1" : "@utr_Palette1-light",
"2" : "@utr_Palette1",
"3" : "@g_Accent-OG",
"4" : "@utr_Palette1-darker",
"5" : "@g_Accent-BG",
"6" : "@utr_Palette2-light",
"7" : "@utr_Palette3-normal",
"8" : "@utr_Palette3-dark",
"9" : "@utr_Palette2-darker",
"10" : "@utr_Palette3-lighter",
"11" : "@utr_Palette3-light",
"12" : "@utr_Palette3",
"13" : "@utr_Palette3-dark",
"14" : "@utr_Palette3-darker",
"15" : "@utr_Palette4-lighter",
"16" : "@utr_Palette4-light",
"17" : "@utr_Palette4",
"18" : "@utr_Palette4-dark",
"19" : "@utr_Palette4-darker"
}
}
}
*/
.t-AVPList-value {
color: contrast(@g_Body-Text, darken(@g_Body-Text, 15%), lighten(@g_Body-Text, 15%), 43%);
.t-Body-info & {
@value-tmp: @g_Body-Title-FG;
color: contrast(@value-tmp, darken(@value-tmp, 15%), lighten(@value-tmp, 15%), 43%);
}
.t-Region & {
color: contrast(@g_Region-FG, darken(@g_Region-FG, 15%), lighten(@g_Region-FG, 15%), 43%);
}
}
.t-AVPList-label {
color: contrast(@g_Body-Text, darken(@g_Body-Text, 5%), lighten(@g_Body-Text, 5%), 43%);
.t-Body-info & {
@value-tmp2: @g_Body-Title-FG;
color: contrast(@value-tmp2, darken(@value-tmp2, 5%), lighten(@value-tmp2, 5%), 43%);
}
.t-Region & {
color: contrast(@g_Region-FG, darken(@g_Region-FG, 5%), lighten(@g_Region-FG, 5%), 43%);
}
}
/**
* Colorized Background
*/
.t-Alert--wizard {
border-radius: @g_Container-BorderRadius
}
.t-Alert--colorBG {
&.t-Alert--warning,
&.t-Alert--yellow {
@bg: lighten(@g_Warning-BG,45%);
background-color: @bg;
// background-color: lighten(#FFCB3D,32%);
h2, h3 {
color: fade(contrast( @bg, desaturate(darken( @bg, 75%), 100%), desaturate(lighten( @bg, 75%), 50%)), 100%);
}
.t-Alert-body {
color: fade(contrast( @bg, desaturate(darken( @bg, 50%), 100%), desaturate(lighten( @bg, 50%), 50%)), 100%);
}
}
&.t-Alert--success {
@bg: lighten(@g_Success-BG,38%);
background-color: @bg;
h2, h3 {
color: fade(contrast( @bg, desaturate(darken( @bg, 75%), 100%), desaturate(lighten( @bg, 75%), 50%)), 100%);
}
.t-Alert-body {
color: fade(contrast( @bg, desaturate(darken( @bg, 50%), 100%), desaturate(lighten( @bg, 50%), 50%)), 100%);
}
}
&.t-Alert--danger,
&.t-Alert--red {
@bg: lighten(@g_Danger-BG,50%);
background-color: @bg;
h2, h3 {
color: fade(contrast( @bg, desaturate(darken( @bg, 75%), 100%), desaturate(lighten( @bg, 75%), 50%)), 100%);
}
.t-Alert-body {
color: fade(contrast(@bg, desaturate(darken(@bg, 50%), 100%), desaturate(lighten(@bg, 50%), 50%)), 100%);
}
}
&.t-Alert--info {
@bg: lighten(@g_Info-BG,42%);
background-color: @bg;
h2, h3 {
color: fade(contrast( @bg, desaturate(darken( @bg, 75%), 100%), desaturate(lighten( @bg, 75%), 50%)), 100%);
}
.t-Alert-body {
color: fade(contrast( @bg, desaturate(darken( @bg, 50%), 100%), desaturate(lighten( @bg, 50%), 50%)), 100%);
}
}
}
/**
* Modifier: Warning
*/
.t-Alert--warning,
.t-Alert--yellow {
.t-Alert-icon {
color: @g_Warning-BG;
}
}
/**
* Modifier: Success
*/
.t-Alert--success {
.t-Alert-icon {
color: @g_Success-BG;
}
}
/**
* Modifier: Information
*/
.t-Alert--info {
.t-Alert-icon {
color: @g_Info-BG;
}
}
/**
* Modifier: Success
*/
.t-Alert--danger,
.t-Alert--red {
.t-Alert-icon {
color: @g_Danger-BG;
}
}
.t-Alert--wizard {
.t-Alert-inset {
border-radius: 2px;
}
}
.t-Alert--horizontal, .t-Alert--wizard {
border-radius: 2px;
background-color: @g_Region-BG;
color: @g_Region-FG;
}
.t-Alert--page {
.t-Body-alert & {box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) inset;}
&.t-Alert--success {
background-color: rgba(74, 170, 44, 0.9);
.t-Icon,
.t-Alert-title {
color: #FFF;
}
.respond-to(xs-small-screens-in) {
border-radius: 0;
}
}
.t-Button--closeAlert {
color: rgba(0,0,0,.5);
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Badge List
========================================================================== */
.t-BadgeList {
}
.t-BadgeList--dash a.t-BadgeList-wrap:hover {
box-shadow: 0 -8px 0 0 contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%) inset;
}
.t-BadgeList a {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
}
.t-BadgeList--circular {
.t-BadgeList-item {
&:hover .t-BadgeList-value {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 4%), lighten(@g_Region-BG, 4%), 43%);
}
}
.t-BadgeList-value {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
box-shadow: 0 0 0 1px fadeout(@g_Region-FG,90%) inset;
background-color: @g_Region-BG;
a {
box-shadow: 0 0 0 1px @g_Accent-BG inset;
color: @g_Link-Base;
}
a:hover {
box-shadow: 0 0 0 4px @g_Accent-BG inset;
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
a:focus {
box-shadow:0 0 0 2px fadeout(@g_Focus,75%), 0 0 0 1px @g_Focus inset;
}
}
.t-BadgeList-label {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
}
a.t-BadgeList-wrap .t-BadgeList-value {
// box-shadow: 0 0 0 1px #2578cf inset;
border-color: @g_Accent-BG;
// color: @g_Accent-BG;
// color: contrast(@g_Accent-BG, darken(@g_Accent-BG, 50%), lighten(@g_Accent-BG, 50%), 43%);
transition: box-shadow .1s, color .1s, background-color .3s;
}
a.t-BadgeList-wrap:hover .t-BadgeList-value {
box-shadow: 0 0 0 4px @g_Accent-BG inset;
background-color: @g_Accent-BG;
color: #FFF;
}
&.t-BadgeList--coloredBG a.t-BadgeList-wrap .t-BadgeList-value {
// box-shadow: 0 0 0 1px #2578cf inset;
// border-color: #2578cf;
// color: #2578cf;
// transition: box-shadow .1s, color .1s, background-color .3s;
}
&.t-BadgeList--coloredBG a.t-BadgeList-wrap:hover .t-BadgeList-value {
box-shadow: 0 0 0 8px rgba(0,0,0,.1) inset;
// background-color: #2578cf;
// color: #FFF;
}
}
/* ==========================================================================
Layout Modifiers
========================================================================== */
.t-BadgeList--float,
.t-BadgeList--flex,
.t-BadgeList--cols,
.t-BadgeList--fixed,
.t-BadgeList--stacked {
.t-BadgeList-item:after {
background: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.t-BadgeList-item:before {
background: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
}
.t-BadgeList--bottomBorder {
border-bottom-color: @g_Accent-OG;
}
/* ==========================================================================
Stacked
========================================================================== */
//.t-BadgeList--stacked {
// .t-BadgeList-item:after {
// background: @g_Accent-OG;
// }
//}
//@g-Colors: #3498DB,#F1C42C,#2ECC71,#E74C3C,#7F7DDD;
.a-BarChart {
.a-BarChart-item {
&:hover {
.region-hover();
}
.a-BarChart-value {
.text-normal();
// .slight-text-contrast(@g_Region-BG);
}
}
.a-BarChart-item img {
border-radius: 2px;
}
.a-BarChart-bar {
background-color: rgba(0,0,0,.025);
}
}
.a-BarChart--classic {
.a-BarChart-bar, .a-BarChart-filled {
border-radius: 1px;
}
.a-BarChart-item:hover .a-BarChart-bar {
background-color: rgba(0,0,0,.05);
}
}
.a-BarChart--modern {
.a-BarChart-bar, .a-BarChart-filled {
border-radius: 1px;
}
.a-BarChart-item:hover .a-BarChart-bar {
background-color: rgba(0,0,0,.05);
}
}
.a-BarChart-filled {
background-color: @g_Accent-BG;
}
// h1, h2, h3 {
// }
// h4, h5, h6 {
// }
// .nodatafound {
// }
/**
* Import Compass and Theme Variables
*/
/*
{
"var" : "@l_Left-Col-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.LEFT_COLUMN"
}
*/
@l_Left-Col-BG: lighten(@g_Accent-OG, 5%);
/*
{
"var" : "@l_Left-Col-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.CONTAINERS",
"subgroup": "UTR.LESS.LEFT_COLUMN"
}
*/
@l_Left-Col-Text: @g_Body-Text;
/* ==========================================================================
Body
========================================================================== */
body, .t-Body {
background: @g_Body-BG;
color: @g_Body-Text;
}
a {
color: @g_Link-Base;
}
// .t-Body a {
// // @l_Body_bg: contrast(@g_Body-BG, darken(@g_Body-BG, 75%), lighten(@g_Body-BG, 75%), 43%);
// // color: mix(@l_Body_bg, @g_Accent-BG);
// // color: red;
// //color: contrast(@1, contrast(darken(@1, @2), lighten(@1, @2), 50%), 50%)
// color: contrast(@g_Body-BG, contrast(@g_Body-BG, darken( @g_Link-Base, 5%), @g_Link-Base), contrast(@g_Body-BG, @g_Link-Base, lighten( @g_Link-Base, 5%)));
// // &:hover {
// // text-decoration:underline;
// // }
// }
.t-Body-title a,
.t-Body-info a {
color: contrast(@g_Body-Title-BG, contrast(@g_Body-Title-BG, darken( @g_Link-Base, 5%), @g_Link-Base), contrast(@g_Body-Title-BG, @g_Link-Base, lighten( @g_Link-Base, 5%)));
}
// .t-Region a {
// color: contrast(@g_Region-BG, contrast(@g_Region-BG, darken( @g_Link-Base, 5%), @g_Link-Base), contrast(@g_Region-BG, @g_Link-Base, lighten( @g_Link-Base, 5%)));
// }
.t-BreadcrumbRegion--useBreadcrumbTitle
.t-Breadcrumb-item:last-child
.t-Breadcrumb-label:after,
.t-BreadcrumbRegion--useRegionTitle
.t-BreadcrumbRegion-titleText:after {
// background-image: linear-gradient(to right, fadeout(@g_Body-Title-BG, 1), @g_Body-Title-BG 65%);
}
.t-Body-actions {
background-color: @g_Actions-Col-BG;
}
.t-Body-title {
background-color: @g_Body-Title-BG;
color: @g_Body-Title-FG;
}
.ui-widget-content {
background-color: @g_Region-BG;
.text-dark();
}
.t-Body-side {
background-color: @l_Left-Col-BG;
color: @l_Left-Col-Text;
}
.apex-rds-container {
background-color: transparent;
.t-Body-info & {
background-color: @g_Body-Title-BG;
}
}
.t-Body-info {
background-color: @g_Body-Title-BG;
}
.t-Body-title {
&.js-hideBreadcrumbs {
background-color: rgba(0,0,0,.95);
}
}
.t-Body-topButton {
border-radius: 100%;
// @subtle: contrast(@g_Body-BG, darken(@g_Body-BG, 20%), lighten(@g_Body-BG, 20%), 43%);
// @bg: contrast(@g_Body-BG, white, black);
background-color: lighten(@g_Body-BG, 10%);
&:active {
// background-color: #F0F0F0;
background-color: lighten(@g_Body-BG, 15%);
.a-Icon {
color: contrast(lighten(@g_Body-BG, 15%), darken(lighten(@g_Body-BG, 15%), 10%), lighten(lighten(@g_Body-BG, 15%), 10%), 43%);
}
}
.a-Icon {
color: contrast(lighten(@g_Body-BG, 10%), darken(lighten(@g_Body-BG, 10%), 10%), lighten(lighten(@g_Body-BG, 10%), 10%), 43%);
}
}
// /*
// {
// "var" : "@Head-Height",
// "name" : "Head Height",
// "type" : "number",
// "units": "px",
// "range": {
// "min": 40,
// "max": 60,
// "increment": 1
// },
// "group": "UTR.LESS.LAYOUT"
// }
// */
@Head-Height: 40px;
// /*
// {
// "var" : "@Head-Menu-Height",
// "name" : "Head Menu Height",
// "type" : "number",
// "units": "px",
// "range": {
// "min": 80,
// "max": 100,
// "increment": 1
// },
// "group": "UTR.LESS.LAYOUT"
// }
// */
@Head-Menu-Height: 80px;
/*
{
"var" : "@Nav-Exp",
"name" : "UTR.LESS.NAVIGATION_TREE",
"type" : "number",
"units": "px",
"range": {
"min": 140,
"max": 220,
"increment": 10
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Nav-Exp: 200px;
/*
{
"var" : "@Actions-Exp",
"name" : "UTR.LESS.ACTIONS_COLUMN",
"type" : "number",
"units": "px",
"range": {
"min": 160,
"max": 240,
"increment": 10
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Actions-Exp: 200px;
/*
{
"var" : "@Side-Exp",
"name" : "UTR.LESS.LEFT_COLUMN",
"type" : "number",
"units": "px",
"range": {
"min": 200,
"max": 280,
"increment": 10
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Side-Exp: 240px;
@Nav-Col: 40px;
@Actions-Col: 0px;
@Side-Col: 0px;
/* ==========================================================================
Tree Based Navigation
========================================================================== */
/**
* Hide Top Menu Bar Navigation
*/
.apex-side-nav {
.t-Body-nav,
.t-Body-actions,
.t-Body-title {
top: @Head-Height;
}
.t-Body-title {
@media only screen and (min-width: 641px) {
left: @Nav-Exp;
}
}
.t-Body-content {
@media only screen and (min-width: 641px) {
margin-left: @Nav-Exp;
}
}
.t-Body-main {
margin-left: 0;
}
}
/* ==========================================================================
Menu Based Navigation
========================================================================== */
.apex-top-nav {
.t-Body-actions {
top: @Head-Menu-Height;
}
.t-Body-title {
top: @Head-Menu-Height;
}
.respond-to(xss-screens) {
&.js-menuNavCollapsed {
// .t-Body {
// margin-top: @Head-Height;
// }
.t-Header-nav {
.transform-less(translateY(-100%));
}
}
}
}
/**
* Base styles for Tree Nav container
*/
.t-Body-nav {
width: @Nav-Exp;
}
/**
* Base styles for Actions
*/
.t-Body-actions {
width: @Actions-Exp;
.t-Button--header {
.translate3d-less(-@Nav-Col, 0, 0);
}
}
/**
* Base styles for Side Bar
*/
.t-Body-side {
@media only screen and (min-width: 641px) {
width: @Side-Exp;
left: @Nav-Col;
}
}
/* ==========================================================================
Tree Nav Expanded
========================================================================== */
.apex-side-nav.js-navExpanded {
.t-Body-main {
margin-left: @Nav-Col;
.translate3d-less(@Nav-Exp - @Nav-Col, 0, 0);
}
@media only screen and (max-width: 480px) {
//
// Compensate for completely collapsed left column
//
.t-Body-title,
.t-Body-side,
.t-Body-content {
margin-left: 0;
}
.t-Body-main {
margin-left: 0;
.translate3d-less(@Nav-Exp, 0, 0);
}
}
@media only screen and (min-width: 641px) {
&.t-PageBody--hideLeft {
.t-Body-title,
.t-Body-content,
.t-Body-main {
.transform-less(none);
}
.t-Body-title {
left: @Nav-Exp;
}
.t-Body-content {
margin-left: @Nav-Exp;
}
.t-Body-main {
margin-left: 0px;
}
}
.t-Body-title,
.t-Body-side,
.t-Body-content {
.translate3d-less(@Nav-Exp, 0, 0);
}
&.t-PageBody--showLeft {
.t-Body-main {
margin-left: 0;
.transform-less(none);
}
// .t-Body-title,
.t-Body-side {
left: 0;
}
.t-Body-content {
margin-left: @Side-Exp + @Nav-Col;
.translate3d-less(@Nav-Exp - @Nav-Col, 0, 0);
}
}
}
@media only screen and (min-width: 993px) {
&.t-PageBody--showLeft {
.t-Body-main {
margin-left: 0;
.transform-less(none);
}
.t-Body-title {
.transform-less(none);
margin-left: @Nav-Exp;
}
.t-Body-content {
margin-left: @Side-Exp + @Nav-Exp;
.transform-less(none);
}
}
}
}
/* ==========================================================================
Tree Nav Collapsed
========================================================================== */
.apex-side-nav.js-navCollapsed {
.t-Body-nav,
.t-Body-nav .t-TreeNav {
width: @Nav-Col;
// .a-TreeView-toggle {
// .visuallyHidden;
// }
}
.t-Body-content,
.t-Body-title,
.t-Body-side {
margin-left: @Nav-Col;
}
@media only screen and (max-width: 480px) {
//
// Completely hide left column when on very small screens
//
.t-Body-nav {
.transform-less(translateX(-40px));
}
.t-Body-title,
.t-Body-side,
.t-Body-content {
margin-left: 0;
}
}
.respond-to(xss-screens) {
&.t-PageBody.js-rightExpanded {
.t-Body-main {
margin-left: 0;
}
}
}
@media only screen and (min-width: 641px) {
.t-Body-title {
margin-left: 0;
left: @Nav-Col;
}
&.t-PageBody--showLeft {
.t-Body-side {
margin-left: 0;
}
.t-Body-content {
margin-left: @Side-Exp + @Nav-Col;
}
}
}
@media only screen and (min-width: 993px) {
.t-Body-side {
left: @Nav-Col;
}
}
}
/* ==========================================================================
Actions Expanded
========================================================================== */
.t-PageBody.js-rightExpanded {
.t-Body-main {
margin-right: 0;
}
.t-Body-main,
.t-Body-nav {
.translate3d-less(-@Actions-Exp, 0, 0);
}
@media only screen and (min-width: 641px) {
&.t-PageBody--hideLeft {
.t-Body-main,
.t-Body-nav {
.transform-less(none);
}
.t-Body-main {
margin-right: @Actions-Exp;
}
.t-Body-title {
right: @Actions-Exp;
}
}
&.t-PageBody--showLeft {
.t-Body-title {
right: 0;
}
}
&.js-navCollapsed.t-PageBody--showLeft {
.t-Body-side {
margin-left: 0;
left: 0;
}
}
}
@media only screen and (min-width: 993px) {
&.t-PageBody--showLeft {
.t-Body-main {
margin-right: @Actions-Exp;
}
.t-Body-main,
.t-Body-nav {
.transform-less(none);
}
.t-Body-title {
right: @Actions-Exp;
}
}
&.js-navCollapsed.t-PageBody--showLeft {
.t-Body-side {
left: @Nav-Col;
}
}
}
@media only screen and (max-width: 992px) {
&.t-PageBody--showLeft {
.t-Body-main {
.transform-less(none);
}
.t-Body-title,
.t-Body-side,
.t-Body-content {
.translate3d-less(-@Actions-Exp, 0, 0);
}
.t-Body-side {
margin-left: @Nav-Col !important;
}
}
}
}
/* ==========================================================================
Actions Collapsed
========================================================================== */
.t-PageBody.js-rightCollapsed {
.t-Body-main {
margin-right: @Actions-Col;
}
.t-Body-title {
right: @Actions-Col;
}
.t-Body-actions {
.translate3d-less(@Actions-Exp, 0, 0);
}
}
/* ==========================================================================
Show Left Side Bar
========================================================================== */
.t-PageBody--showLeft {
@media only screen and (min-width: 641px) {
.t-Body-content {
margin-left: @Side-Exp + @Nav-Col - 40;
}
}
}
/*
{
"var": "@g_Body-Content-Max-Width",
"name": "UTR.LESS.BODY_CONTENT_MAX_WIDTH",
"type": "select",
"options": [
{
"d": "Auto",
"r": "auto"
},
{
"d": "768 pixels",
"r": "768px"
},
{
"d": "1024 pixels",
"r": "1024px"
},
{
"d": "1280 pixels",
"r": "1280px"
},
{
"d": "1440 pixels",
"r": "1440px"
},
{
"d": "1920 pixels",
"r": "1920px"
}
],
"group": "UTR.LESS.LAYOUT"
}
*/
@g_Body-Content-Max-Width: auto;
.t-Body-contentInner {
margin: auto;
max-width: @g_Body-Content-Max-Width;
}
/**
* Import Compass
*/
/* ==========================================================================
Breadcrumb
========================================================================== */
.t-Breadcrumb-item {
&:after {
color: fadeout(@g_Body-Title-FG, .65);
}
}
.t-Breadcrumb-item .t-Icon {
&:hover {
color: @g_Accent-BG;
}
}
//.has-shadow {
// .t-BreadcrumbRegion-body {
// padding-bottom: 8px;
// padding-top: 8px;
// }
//}
.t-BreadcrumbRegion--useBreadcrumbTitle {
.t-Breadcrumb-item:last-child {
.t-Breadcrumb-label {
color: @g_Body-Title-FG;
}
}
}
.t-BreadcrumbRegion-titleText {
color: @g_Body-Title-FG;
}
/**
* Import Compass and Theme Variables
*/
/*
{
"var" : "@l_Button-Hot-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.HOT"
}
*/
@l_Button-Hot-BG: @g_Accent-BG;
/*
{
"var" : "@l_Button-Hot-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.HOT"
}
*/
@l_Button-Hot-Text-tmp: contrast(@l_Button-Hot-BG, darken(@l_Button-Hot-BG, 85%), lighten(@l_Button-Hot-BG, 85%), 43%);
@l_Button-Hot-Text: fade(@l_Button-Hot-Text-tmp,100%);
/*
{
"var" : "@l_Button-Primary-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.PRIMARY"
}
*/
@l_Button-Primary-BG: @g_Primary-BG;
/*
{
"var" : "@l_Button-Primary-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.PRIMARY"
}
*/
@l_Button-Primary-Text: fade(@g_Primary-FG, 100%);
/*
{
"var" : "@l_Button-Danger-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.DANGER"
}
*/
@l_Button-Danger-BG: @g_Danger-BG;
/*
{
"var" : "@l_Button-Danger-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.DANGER"
}
*/
@l_Button-Danger-Text: fade(@g_Danger-FG, 100%);
/*
{
"var" : "@l_Button-Warning-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": UTR.LESS.WARNING"
}
*/
@l_Button-Warning-BG: @g_Warning-BG;
/*
{
"var" : "@l_Button-Warning-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.WARNING"
}
*/
@l_Button-Warning-Text: fade(@g_Warning-FG, 100%);
/*
{
"var" : "@l_Button-Success-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.SUCCESS"
}
*/
@l_Button-Success-BG: @g_Success-BG;
/*
{
"var" : "@l_Button-Success-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.SUCCESS"
}
*/
@l_Button-Success-Text: fade(@g_Success-FG, 100%);
/*
{
"var" : "@l_Button-Simple-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.SIMPLE"
}
*/
@l_Button-Simple-BG: #FFFFFF;
/*
{
"var" : "@l_Button-Simple-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.BUTTONS",
"subgroup": "UTR.LESS.SIMPLE"
}
*/
@l_Button-Simple-Text: fade(contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG, 75%), lighten(@l_Button-Simple-BG, 75%)), 100%);
/******************************************************************************
Button for Theme
******************************************************************************/
/* Basic Button
========================================================================== */
.t-Button,
.a-Button {
border: none;
color: @g_Button-Text;
background-clip: padding-box;
background-color: @g_Button-BG;
box-shadow: 0 0 0 1px rgba(0,0,0,.125) inset;
border-radius: @g_Button-BorderRadius;
text-shadow: none;
&:hover {
box-shadow: 0 2px 1px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,.125) inset;
}
&.t-Button--simple {
background-color: @l_Button-Simple-BG;
color: @l_Button-Simple-Text;
box-shadow: 0 0 0 1px rgba(0,0,0,0.125) inset;
text-shadow: none;
&:hover,
&:focus,
&:active {
background-color: contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG, 10%), lighten(@l_Button-Simple-BG, 10%), 43%);
box-shadow: 0 0 0 1px contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG, 10%), lighten(@l_Button-Simple-BG, 10%), 43%) inset;
}
}
}
// Adding Border for Buttons when using High Contrast Mode
@media screen and (-ms-high-contrast: active) {
.t-Button,
.a-Button {
border: 1px solid;
}
}
/* Button States
========================================================================== */
.t-Button--primary,
.t-Button--hot,
.t-Button--danger,
.t-Button--warning,
.t-Button--success {
box-shadow: 0 0 2px rgba(0,0,0,.05) inset;
&.t-Button--simple {
box-shadow: 0 0 0 1px inset;
}
}
.t-Button--primary,
.t-Button--warning {
&:hover {
box-shadow: 0 2px 1px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,.075) inset;
}
}
.t-Button--hot,
.t-Button--danger,
.t-Button--success {
&:hover {
box-shadow: 0 2px 1px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,.075) inset;
}
}
.t-Button:hover,
.a-Button:hover {
background-color: lighten(@g_Button-BG, 10%);
z-index: 100;
}
.t-Button:focus,
.a-Button:focus {
// background-color: lighten(@g_Button-BG, 10%);
outline: none;
z-index: 110;
}
.t-Button:focus,
.a-Button:focus,
.t-Button:active:focus,
.a-Button:active:focus {
box-shadow:
0 0 0 1px @g_Focus inset,
0 0 1px 2px fade(@g_Focus, 25%) !important;
}
.t-Button:active {
background-color: darken(@g_Button-BG, 10%);
box-shadow: 0 0 0 1px rgba(0,0,0,0.20) inset, 0 1px 2px rgba(0,0,0,0.25) inset;
z-index: 100;
}
.t-Button:active:focus {
box-shadow: 0 0 0 1px rgba(0,0,0,0.20) inset, 0 1px 2px rgba(0,0,0,0.25) inset !important;
}
.t-Button.is-active,
.t-Button.is-active:active,
.t-MenuButton.is-active {
background-color: darken(@g_Button-BG, 10%);
color: @g_Button-Text;
font-weight: normal; // Remove Later
text-shadow: none; // Remove Later
z-index: 100;
box-shadow: 0 0 0 1px rgba(0,0,0,0.20) inset, 0 1px 2px rgba(0,0,0,0.25) inset;
}
.t-Button.is-disabled,
.t-Button.is-disabled:active,
.t-Button:disabled {
opacity: .5;
pointer-events: none;
}
/* Hot Button
========================================================================== */
.t-Button--hot,
body .ui-state-default.ui-button.ui-button--hot,
body button.ui-state-default.ui-priority-primary {
background-color: @l_Button-Hot-BG;
color: @l_Button-Hot-Text;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
&:hover {
background-color: lighten(@l_Button-Hot-BG,10%);
}
&:active,
&.is-active,
&.t-MenuButton.is-active {
background-color: darken(@l_Button-Hot-BG,10%);
}
&.t-Button--simple {
@hotContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 75%), @l_Button-Hot-BG), mix(lighten(@l_Button-Simple-BG, 75%), @l_Button-Hot-BG), 50%);
.t-Icon { color: @hotContrast; }
box-shadow: 0 0 0 1px @l_Button-Hot-BG inset;
background-color: @l_Button-Simple-BG;
// color: @l_Button-Hot-BG;
color: @hotContrast;
&:hover,
&:focus,
&:active {
background-color: @l_Button-Hot-BG;
color: @l_Button-Hot-Text;
box-shadow: 0 0 0 1px @l_Button-Hot-BG inset;
.t-Icon { color: @l_Button-Hot-Text; }
}
}
}
/* Primary Button
========================================================================== */
.t-Button--primary {
background-color: @l_Button-Primary-BG;
color: @l_Button-Primary-Text;
&:hover {
background-color: lighten(@l_Button-Primary-BG,10%);
}
&:active,
&.is-active {
background-color: darken(@l_Button-Primary-BG,10%);
}
&.t-Button--simple {
@primaryContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Primary-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Primary-BG), 50%);
.t-Icon { color: @primaryContrast; }
box-shadow: 0 0 0 1px @l_Button-Primary-BG inset;
background-color: @l_Button-Simple-BG;
// color: @l_Button-Primary-BG;
color: @primaryContrast;
&:hover,
&:focus,
&:active {
background-color: @l_Button-Primary-BG;
color: @l_Button-Primary-Text;
box-shadow: 0 0 0 1px @l_Button-Primary-BG inset;
.t-Icon { color: @l_Button-Primary-Text; }
}
}
}
/* Danger Button
========================================================================== */
.t-Button--danger {
background-color: @l_Button-Danger-BG;
color: @l_Button-Danger-Text;
&:hover {
background-color: lighten(@l_Button-Danger-BG,10%);
}
&:active,
&.is-active {
background-color: darken(@l_Button-Danger-BG,10%);
}
&.t-Button--simple {
@dangerContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 75%), @l_Button-Danger-BG), mix(lighten(@l_Button-Simple-BG, 75%), @l_Button-Danger-BG), 50%);
.t-Icon { color: @dangerContrast; }
box-shadow: 0 0 0 1px @l_Button-Danger-BG inset;
background-color: @l_Button-Simple-BG;
color: @dangerContrast;
&:hover,
&:focus,
&:active {
background-color: @l_Button-Danger-BG;
color: @l_Button-Danger-Text;
box-shadow: 0 0 0 1px @l_Button-Danger-BG inset;
.t-Icon { color: @l_Button-Danger-Text; }
}
}
}
/* Warning Button
========================================================================== */
.t-Button--warning {
background-color: @l_Button-Warning-BG;
color: @l_Button-Warning-Text;
&:hover {
background-color: lighten(@l_Button-Warning-BG,10%);
}
&:active,
&.is-active {
background-color: darken(@l_Button-Warning-BG,10%);
}
&.t-Button--simple {
@warningContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Warning-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Warning-BG), 50%);
.t-Icon { color: @warningContrast; }
box-shadow: 0 0 0 1px @l_Button-Warning-BG inset;
background-color: @l_Button-Simple-BG;
color: @warningContrast;
&:hover,
&:focus,
&:active {
background-color: @l_Button-Warning-BG;
color: @l_Button-Warning-Text;
box-shadow: 0 0 0 1px @l_Button-Warning-BG inset;
.t-Icon { color: @l_Button-Warning-Text; }
}
}
}
/* Success Button
========================================================================== */
.t-Button--success {
background-color: @l_Button-Success-BG;
color: @l_Button-Success-Text;
&:hover {
background-color: lighten(@l_Button-Success-BG,10%);
}
&:active,
&.is-active {
background-color: darken(@l_Button-Success-BG,10%);
}
&.t-Button--simple {
@successContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Success-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Success-BG), 50%);
.t-Icon { color: @successContrast; }
box-shadow: 0 0 0 1px @l_Button-Success-BG inset;
background-color: @l_Button-Simple-BG;
color: @successContrast;
&:hover,
&:focus,
&:active {
background-color: @l_Button-Success-BG;
color: @l_Button-Success-Text;
box-shadow: 0 0 0 1px @l_Button-Success-BG inset;
.t-Icon { color: @l_Button-Success-Text; }
}
}
}
.t-Button--pillStart {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.t-Button--pillEnd {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.t-Button--pill {
border-radius: 0 !important;
}
.t-Button--hideShow {
&.t-Button {border-radius: 100%;}
}
.t-Header-branding .t-Button {
// Removing !important to fix bugs where the menu button would not show active state
background-color: transparent;
}
.t-Button.t-Button--header {
transition: none;
border-radius: 0;
&:focus,
&:active:focus {
box-shadow:
0 0 0 1px lighten(@g_Focus,15%) inset,
0 0 1px 2px fade(lighten(@g_Focus,15%), 25%) !important;
}
&:hover, &:focus, &:active, {
background-color: transparent;
}
&:hover {
background-color: rgba(0,0,0,.1);
}
&:active, &:focus:active {
background-color: rgba(0,0,0,.4);
}
&.is-active {
background-color: rgba(0,0,0,.25);
box-shadow: none;
}
&.t-Button--headerTree {
&:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
background-color: rgba(0,0,0,.1);
}
&.is-active {
background-color: transparent;
}
&:hover,
&:focus:hover {
background-color: rgba(0,0,0,.3);
}
}
&.t-Button--headerRight {
background-color: @g_Actions-Col-BG;
&:hover {
background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG, 10%), lighten(@g_Actions-Col-BG, 10%), 43%);
}
&:active,
&.is-active {
color: fade(contrast(@g_Actions-Col-BG, desaturate(darken(@g_Actions-Col-BG, 75%), 100%), desaturate(lighten(@g_Actions-Col-BG, 75%), 50%)), 100%);
}
}
}
.t-Button--navBar {
.t-Button-badge {
border-radius: @g_Button-BorderRadius;
background-color: rgba(0,0,0,.35);
}
}
//.a-IRR-button {
// @bg: lighten(@g_Region-BG, 20%);
// background-color: @bg;
// color: @bg;
// &:hover,
// &:focus,
// &:active {
// background-color: contrast(@g_Button-BG, darken(@g_Button-BG, 10%), lighten(@g_Button-BG, 10%), 43%);
// box-shadow: 0 0 0 1px contrast(@g_Button-BG, darken(@g_Button-BG, 10%), lighten(@g_Button-BG, 10%), 43%) inset;
// }
//}
.t-Button--helpButton .a-Icon {
opacity: .5;
}
.a-Calendar-button {
border-radius: @g_Button-BorderRadius;
color: #707070;
}
/* Button with No UI Decoration
========================================================================== */
.t-Button--noUI {
color: @g_Button-Text;
&.t-Button--primary {
@primcolor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Primary-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Primary-BG), 50%);
color: @primcolor !important;
.t-Icon { color: @l_Button-Primary-BG !important; }
}
&.t-Button--warning {
@warncolor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Warning-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Warning-BG), 50%);
color: @warncolor !important;
.t-Icon { color: @l_Button-Warning-BG !important; }
}
&.t-Button--danger {
@dangercolor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Danger-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Danger-BG), 50%);
color: @dangercolor !important;
.t-Icon { color: @l_Button-Danger-BG !important; }
}
&.t-Button--success {
@successcolor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Success-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Success-BG), 50%);
color: @successcolor !important;
.t-Icon { color: @l_Button-Success-BG !important; }
}
&.t-Button--hot {
@hotcolor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 90%), @l_Button-Hot-BG), mix(lighten(@l_Button-Simple-BG, 90%), @l_Button-Hot-BG), 50%);
color: @hotcolor !important;
.t-Icon { color: @l_Button-Hot-BG !important; }
}
&.t-Button--primary,
&.t-Button--warning,
&.t-Button--danger,
&.t-Button--success,
&.t-Button--hot {
box-shadow: none;
}
}
/**
* Import Compass
*/
/* ==========================================================================
Button Region
========================================================================== */
.t-ButtonRegion {
background-color: @g_Region-BG;
color: @g_Region-FG;
border-radius: @g_Container-BorderRadius;
}
.t-ButtonRegion--noUI {
background-color: transparent;
}
.t-ButtonRegion--wizard,.t-ButtonRegion--dialogRegion {
border-radius: 0 0 2px 2px;
}
.t-ButtonRegion--dialogRegion {
background-color: transparent;
}
.t-ButtonRegion--showTitle {
.t-ButtonRegion-title {
.text-dark();
}
}
.t-Body-actions .t-ButtonRegion {
background-color: transparent;
border-radius: 0;
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Classic Calendar
========================================================================== */
@fc-Border: contrast(@g_Region-BG, darken(@g_Region-BG, 8%), lighten(@g_Region-BG, 8%), 43%);
@fc-Body-BG: @g_Region-BG;
@fc-Body-FG: @g_Region-FG;
@fc-CalHeader-BG: @g_Region-Header-BG;
@fc-CalHeader-FG: @g_Region-Header-FG;
@fc-BorderRadius: @g_Container-BorderRadius;
/* Calendar Header
========================================================================== */
.fc-toolbar {
border-color: @fc-Border;
background-color: @fc-Body-BG;
border-radius: @fc-BorderRadius @fc-BorderRadius 0 0;
}
.fc-toolbar h2,
.fc .fc-basic-view td.fc-day-number,
.fc .fc-day-number {
color: @fc-Body-FG;
}
.fc-day-header.ui-widget-header,
.fc-view .ui-widget-header {
background-color: contrast(@fc-CalHeader-BG, darken(@fc-CalHeader-BG, 5%), lighten(@fc-CalHeader-BG, 5%), 43%);
color: @fc-CalHeader-FG;
border-color: contrast(@fc-CalHeader-BG, darken(@fc-CalHeader-BG, 10%), lighten(@fc-CalHeader-BG, 10%), 43%);
}
div.fc-agendaList {
background-color: @fc-Body-BG;
border-color: @fc-Border;
color: @fc-Body-FG;
}
.fc .fc-agendaList-dayHeader {
background-color: contrast(@fc-CalHeader-BG, darken(@fc-CalHeader-BG, 15%), lighten(@fc-CalHeader-BG, 15%), 43%);
color: @fc-CalHeader-FG;
border-color: contrast(@fc-Body-BG, darken(@fc-Body-BG, 2%), lighten(@fc-Body-BG, 2%), 43%);
}
.fc .fc-agendaList-day {
color: @fc-CalHeader-FG;
}
.fc .fc-agendaList-date {
color: contrast(@fc-CalHeader-FG, darken(@fc-CalHeader-FG, 15%), lighten(@fc-CalHeader-FG, 15%), 43%);
}
.fc .fc-agendaList .fc-event-start-time,
.fc .fc-agendaList .fc-event-all-day {
color: contrast(@fc-Body-FG, darken(@fc-Body-FG, 15%), lighten(@fc-Body-FG, 15%), 43%);
}
body .fc td.fc-today,
body .fc .ui-widget-content {
border-color: contrast(@fc-Body-BG, darken(@fc-Body-BG, 10%), lighten(@fc-Body-BG, 10%), 43%);
color: @fc-Body-FG;
}
body .ui-widget-content.fc-today.ui-state-highlight {
background-color: contrast(@fc-Body-BG, darken(@fc-Body-BG, 5%), lighten(@fc-Body-BG, 5%), 43%);
}
.fc .fc-agendaList-item {
border-color: contrast(@fc-Body-BG, darken(@fc-Body-BG, 2%), lighten(@fc-Body-BG, 2%), 43%);
}
/*
* Import Compass
*/
/* ==========================================================================
Cards Container
========================================================================== */
.t-Card-wrap {
border-radius: 2px;
&:focus {
border-color: @g_Focus;
}
}
.t-Card-icon .t-Icon {
color: #FFF;
}
// .t-Card-icon .t-Icon,
// .t-Card-initials {
// color: #FFF;
// }
@l_Card-BG: contrast(@g_Region-BG, darken(@g_Region-BG, 1.25%), lighten(@g_Region-BG, 1.25%), 43%);
.t-Card-desc {
color: fade(contrast(@l_Card-BG, desaturate(darken(@l_Card-BG, 75%), 100%), desaturate(lighten(@l_Card-BG, 75%), 50%)), 100%);
}
.t-Cards--compact .t-Card-wrap {
background-color: @l_Card-BG;
}
.t-Cards--compact .t-Card-desc {
color: fade(contrast(@l_Card-BG, desaturate(darken(@l_Card-BG, 60%), 100%), desaturate(lighten(@l_Card-BG, 60%), 50%)), 100%);
}
.t-Card-info {
color: fade(contrast(@l_Card-BG, desaturate(darken(@l_Card-BG, 60%), 100%), desaturate(lighten(@l_Card-BG, 60%), 50%)), 100%);
}
.t-Card-title {
color: fade(contrast(@l_Card-BG, darken(@l_Card-BG, 75%), lighten(@l_Card-BG, 75%)), 100%);
}
.t-Cards--basic .t-Card,.t-Card--basic {
.t-Card-wrap {
background-color: @l_Card-BG;
}
.t-Card-icon {
.t-Icon {
border-radius: 2px;
background-color: #A0A0A0;
}
}
.t-Card-titleWrap {
background-color: @g_Region-Header-BG;
}
}
.t-Cards--featured .t-Card,.t-Card--featured {
.t-Card-wrap {
background-color: @l_Card-BG;
}
.t-Card-icon {
.t-Icon {
border-radius: 100px;
color: #FFF;
background-color: #A0A0A0;
}
}
.t-Card-body {
background-color: transparent;
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Classic Calendar
========================================================================== */
.t-ClassicCalendar {
}
.t-ClassicCalendar-monthTitle {
color: @g_Region-FG;
}
.t-ClassicCalendar-dayColumn {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 2%), lighten(@g_Region-BG, 2%), 43%);
vertical-align: top;
border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
color: contrast(@g_Region-FG, darken(@g_Region-FG, 15%), lighten(@g_Region-FG, 15%), 43%);
}
.t-ClassicCalendar-day {
border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
&.is-inactive .t-ClassicCalendar-date{
opacity: .5;
}
&.is-weekend,
&.is-inactive {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 1%), lighten(@g_Region-BG, 1%), 43%);
}
&.is-today {
.t-ClassicCalendar-date {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
}
}
.t-ClassicCalendar-date {
color: contrast(@g_Region-FG, darken(@g_Region-FG, 25%), lighten(@g_Region-FG, 25%), 43%);
}
.t-ClassicCalendar-event {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%)
}
.t-ClassicCalendar-event {
color: @g_Region-FG;
a {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
}
//
// Weekly Calendar
//
.t-ClassicCalendar--weekly,
.t-ClassicCalendar--daily {
.t-ClassicCalendar-timeCol {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 2%), lighten(@g_Region-BG, 2%), 43%);
}
.t-ClassicCalendar-dayEvents {
color: @g_Region-FG;
}
.t-ClassicCalendar-dayEvents a {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-ClassicCalendar-day {
&.is-today {
background-color: contrast(@g_Accent-BG, darken(@g_Accent-BG, 50%), lighten(@g_Accent-BG, 50%), 43%);
}
}
}
//
// List Calendar
//
.t-ClassicCalendar-list {
border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
}
.t-ClassicCalendar-listTitle,
.t-ClassicCalendar-listEvent {
border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
}
.t-ClassicCalendar-listTitle {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 2%), lighten(@g_Region-BG, 2%), 43%);
color: contrast(@g_Region-FG, darken(@g_Region-FG, 15%), lighten(@g_Region-FG, 15%), 43%);
}
.t-ClassicCalendar-listEvent {
color: @g_Region-FG;
}
.t-Comments-userIcon,.t-Comments-userImg {
border-radius: 100%;
}
@comment_BG: lighten(@g_Region-BG, 2.5%);
.t-Comments-userIcon {
background-color: @comment_BG;
}
.t-Comments-info {
color: fade(contrast(@comment_BG, desaturate(darken(@comment_BG, 60%), 100%), desaturate(lighten(@comment_BG, 60%), 50%)), 100%);
// .text-normal();
}
.t-Comments-comment {
color: fade(contrast(@comment_BG, desaturate(darken(@comment_BG, 75%), 100%), desaturate(lighten(@comment_BG, 75%), 50%)), 100%);
// .text-dark();
}
.t-Comments--chat {
.t-Comments-info {
background-color: @comment_BG;
border-radius: 2px 2px 0 0;
border-color: contrast(@comment_BG, darken(@comment_BG, 10%), lighten(@comment_BG, 10%), 43%);
&:after {
border-color: rgba(248, 248, 248, 0);
border-right-color: @comment_BG;
}
&:before {
border-color: rgba(232,232,232, 0);
border-right-color: contrast(@comment_BG, darken(@comment_BG, 10%), lighten(@comment_BG, 10%), 43%);
}
}
.t-Comments-comment {
background-color: @comment_BG;
border-radius: 0 0 2px 2px;
border-color: contrast(@comment_BG, darken(@comment_BG, 10%), lighten(@comment_BG, 10%), 43%);
}
}
.t-ConfigPanel-about {
background-color: lighten(#FFCB3D,32%);
color: #565656;
}
.t-ConfigPanel-icon {
border-radius: 100%;
background-color: #A0A0A0;
color: #FFF;
&.is-enabled {
background-color: @g_Success-BG;
}
&.is-disabled {
background-color: @g_Danger-BG;
}
}
.t-ConfigPanel-setting,.t-ConfigPanel-status {
color: @g_Region-FG-Light;
}
.t-ConfigPanel-status {
color: @g_Region-FG;
}
.t-ConfigPanel-attrLink {
color: @g_Region-FG-Light;
&:hover {
background-color: rgba(0,0,0,.05);
}
}
.t-ConfigPanel-attrLabel {
// color: @g_Region-FG;
}
.t-ConfigPanel-attrValue {
color: @g_Link-Base;
}
// /* ======.less/compiled/core_removed/ContentFrame.less====== */
// .t-ContentFrame-main {
// background-color: #fff;
// }
// .t-ContentFrame-side {
// background-color: #F2F2F2;
// }
// .t-Dialog-body {
// background:
// linear-gradient(fade(@g_Region-BG,100%) 40%, fade(@g_Region-BG,0%)),
// linear-gradient(fade(@g_Region-BG,0%), fade(@g_Region-BG,100%) 60%) 0 100%,
// linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0)),
// linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.1)) 0 100%;
// background-color: @g_Region-BG;
// }
/* ======.less/compiled/core_removed/DialogRegion.less====== */
.t-DialogRegion-body {
background: -webkit-linear-gradient(@g_Region-BG 30%, fadeout(@g_Region-BG,0%)),
-webkit-linear-gradient(fadeout(@g_Region-BG,0%), @g_Region-BG 70%) 0 100%,
-webkit-linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,0)),
-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.05));
background: -o-linear-gradient(@g_Region-BG 30%, fadeout(@g_Region-BG,0%)),
-o-linear-gradient(fadeout(@g_Region-BG,0%), @g_Region-BG 70%) 0 100%,
-o-linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,0)),
-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.05));
background: linear-gradient(@g_Region-BG 30%, fadeout(@g_Region-BG,0%)),
linear-gradient(fadeout(@g_Region-BG,0%), @g_Region-BG 70%) 0 100%,
linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,0)),
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.05)) 0 100%;
background-color: @g_Region-BG;
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Header
========================================================================== */
.t-Footer,
.t-Footer a {
color: contrast(@g_Body-BG, contrast(@g_Body-BG, darken( @g_Body-Text, 50%), @g_Body-Text), contrast(@g_Body-BG, @g_Body-Text, lighten( @g_Body-Text, 50%)));
}
@focusBg: lighten(@g_Form-Item-BG, 10%);
@hoverBg: lighten(@g_Form-Item-BG, 5%);
.t-Form-inputContainer:before {
color: @g_Form-Item-FG;
}
.t-Form-field,
.t-Form-select,
.t-Form-inputContainer input[type="text"],
.t-Form-inputContainer select.selectlist,
.t-Form-inputContainer select.yes_no,
.t-Form-inputContainer input.text_field,
.t-Form-inputContainer input.password,
.t-Form-inputContainer textarea.textarea,
.t-Form-inputContainer input.datepicker,
.t-Form-inputContainer span.display_only,
.t-Form-inputContainer input.popup_lov,
.t-Form-inputContainer select[multiple],
.t-Form-textarea,
.u-TF-item--text,
.u-TF-item--textarea,
.u-TF-item--datepicker,
.u-TF-item--select {
border-radius: @g_Form-BorderRadius;
color: @g_Form-Item-FG;
background-color: @g_Form-Item-BG;
border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
&:focus {
background-color: @focusBg !important;
border-color: @g_Focus !important;
&::-ms-value {
color: @g_Form-Item-FG; /* the -ms-value defaults in a select list focus defaults to white, so we need to override the value for the text to be visible */
}
}
&:hover {
background-color: @hoverBg;
}
}
.t-Form-inputContainer input::-webkit-input-placeholder{
color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 100%), lighten(@g_Form-Item-BG, 100%), 43%);
opacity: .55;
}
.t-Form-inputContainer input::-moz-placeholder{
color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 100%), lighten(@g_Form-Item-BG, 100%), 43%);
opacity: .55;
}
.t-Form-inputContainer input:-ms-input-placeholder{
color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 100%), lighten(@g_Form-Item-BG, 100%), 43%);
opacity: .55;
}
.t-Form input.file {
color: @g_Form-Item-FG;
}
.t-Form-inputContainer span.display_only {
border-color: transparent;
background-color: transparent;
}
.t-Form-select,
.t-Form-inputContainer select.selectlist,
.t-Form-inputContainer select.yes_no {
color: @g_Form-Item-FG;
}
.t-Form-field--readOnly {
background-color: transparent;
}
.t-Form-radioLabel,
.t-Form-inputContainer .radio_group label,
.t-Form-checkboxLabel,
.t-Form-inputContainer .checkbox_group label,
.t-Form-label {
color: @g_Form-Label;
// .text-dark();
}
.t-Form-error {
color: #E92020;
}
.t-Form-postText {
color: fade(contrast(@g_Form-Label, desaturate(darken(@g_Form-Label, 50%), 100%), desaturate(lighten(@g_Form-Label, 50%), 50%)), 100%);
// .text-normal();
}
.t-Form--search {
input.t-Form-searchField {
background-color: @g_Form-Item-BG;
color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 75%), lighten(@g_Form-Item-BG, 75%), 43%);
}
}
.t-HeroRegion-form input[type=text].t-Form-searchField {
background-color: lighten(@g_Body-Title-BG, 10%);
border-color: contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 10%), lighten(@g_Body-Title-BG, 10%), 43%);
&:focus {
background-color: @focusBg !important;
border-color: @g_Focus !important;
}
&::-webkit-input-placeholder{
color: contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 100%), lighten(@g_Body-Title-BG, 100%), 43%);
opacity: .55;
}
&::-moz-placeholder{
color: contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 100%), lighten(@g_Body-Title-BG, 100%), 43%);
opacity: .55;
}
&:-ms-input-placeholder{
color: contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 100%), lighten(@g_Body-Title-BG, 100%), 43%);
opacity: .55;
}
}
// Date Picker
.t-Form-inputContainer input.hasDatepicker,
.t-Form-inputContainer input.popup_lov {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.a-Button.a-Button--calendar,
.a-Button.a-Button--popupLOV {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: @g_Form-BorderRadius;
border-bottom-right-radius: @g_Form-BorderRadius;
}
// .t-FormField-label {
// .text-dark();
// }
// .t-FormField-input {
// background-color: #FFF;
// border-radius: 2px;
// }
/* ======.less/compiled/core_removed/Grid.less====== */
// .grid-debug-on {
// .col {
// &:hover {
// background-color: rgba(0,0,0,.25);
// }
// }
// }
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Header
========================================================================== */
.t-Header-branding {
background-color: @g_Header-BG;
// color: contrast(@g_Header-BG, darken(@g_Header-BG, 50%), lighten(@g_Header-BG, 50%), 43%);
// a {
// color:contrast(#000 - @g_Header-BG, lighten(@g_Header-BG, 100%), darken(@g_Header-BG, 100%));
// }
}
.t-Header-logo-link,
.t-Header .t-Button.t-Button--header.is-active,
.t-Header .t-Button.t-Button--header.t-Button--header {
color: @g_Header-FG;
&:hover {
text-decoration: none;
}
}
.t-Header-logo-link {
&:focus,
&:active:focus {
outline: none;
box-shadow:
0 0 0 1px lighten(@g_Focus,15%) inset,
0 0 1px 2px fade(lighten(@g_Focus,15%), 25%) !important;
}
}
.t-Header-nav {
background-color: @g_Nav-BG;
}
.t-Header {
.a-MenuBar-item {
&:hover {
background-color: transparent;
}
}
.a-MenuBar-item > .a-Menu-subMenuCol {
.a-Icon {
border-radius: 100%;
}
}
.a-Menu.a-Menu--top > .a-Menu-content {
border-top-width: 0;
}
.a-Menu-content {
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
}
.t-Header-nav-list {
background-color: transparent;
}
.t-HeroRegion {
background-color: @g_Body-Title-BG;
color: contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 75%), lighten(@g_Body-Title-BG, 75%), 43%);
}
.t-HeroRegion-title {
color: contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 75%), lighten(@g_Body-Title-BG, 75%), 43%);
}
.t-HeroRegion-icon {
border-radius: 4px;
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-HeroRegion--featured {
background-color: transparent;
&,
.t-HeroRegion-title {
color: contrast(@g_Region-BG, darken(@g_Region-BG, 75%), lighten(@g_Region-BG, 75%), 43%);
}
}
/*
{
"var" : "@irrBg",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.INTERACTIVE_REPORTS"
}
*/
@irrBg: @g_Region-BG;
/*
{
"var" : "@menu_Tabs-Active-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.INTERACTIVE_REPORTS",
"subgroup": "UTR.LESS.MENU"
}
*/
@menu_Tabs-Active-BG: darken( @g_Accent-BG,5%);
/*
{
"var" : "@menu_Tabs-Active-Text",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.INTERACTIVE_REPORTS",
"subgroup": "UTR.LESS.MENU"
}
*/
@menu_Tabs-Active-Text: fade(contrast( @g_Accent-BG, darken( @g_Accent-BG, 50%), lighten( @g_Accent-BG, 50%)), 100%);
/*
{
"var" : "@menu_Tabs-Hover-BG",
"name" : "UTR.LESS.HOVER_STATE",
"type" : "color",
"group": "UTR.LESS.INTERACTIVE_REPORTS"
}
*/
@menu_Tabs-Hover-BG: darken( @g_Accent-BG,15%);
@menu_Tabs-Text: contrast( @g_Accent-BG);
.a-IRR {
border-radius: @g_Container-BorderRadius;
border-color: contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);
// background-color: @irrBg;
.a-IRR-pagination-label {
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 55%), 100%), desaturate(lighten(@irrBg, 55%), 50%)), 100%);
}
}
.a-IRR-reportSummary-value {
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 75%), 100%), desaturate(lighten(@irrBg, 75%), 50%)), 100%);
}
.a-IRR-controlsContainer {
border-top-color: contrast(@irrBg, darken(@irrBg, 4%), lighten(@irrBg, 4%), 43%);
background-color: contrast(@irrBg, darken(@irrBg, 2%), lighten(@irrBg, 2%), 43%);
}
.a-IRR-fullView {
background-color: @irrBg;
}
.a-IRR-button.a-IRR-button--controls {
background-color: transparent;
// background-color: contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);
// &:hover {
// background-color: contrast(@irrBg, darken(@irrBg, 25%), lighten(@irrBg, 25%), 43%);
// }
}
.a-IRR-sortWidget {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
}
.a-IRR-toolbar {
background: linear-gradient(lighten(@g_Region-Header-BG, 10%), @g_Region-Header-BG);
border-color: contrast(@g_Region-Header-BG, darken(@g_Region-Header-BG, 10%), lighten(@g_Region-Header-BG, 10%), 43%);
}
@l_Progress-BG: @g_Accent-BG;
.a-Report-percentChart-fill {
background-color: @l_Progress-BG;
}
.a-Report-percentChart {
background-color: contrast(@l_Progress-BG, darken(@l_Progress-BG, 50%), lighten(@l_Progress-BG, 50%), 43%);
}
.a-IRR-button--colSearch {
-webkit-border-top-right-radius: 0px !important;
-webkit-border-bottom-right-radius: 0px !important;
-moz-border-radius-topright: 0px !important;
-moz-border-radius-bottomright: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.a-IRR-iconViewTable,
.a-IRR-chartView,
.a-IRR-pivotView,
.a-IRR-groupByView,
.a-IRR-detailView {
border-top-color: contrast(@irrBg, darken(@irrBg, 4%), lighten(@irrBg, 4%), 43%);
}
.a-IRR-toolbar--singleRow {
border-bottom-color: contrast(@irrBg, darken(@irrBg, 6%), lighten(@irrBg, 6%), 43%);
}
.a-IRR-header {
background-color: contrast(@irrBg, darken(@irrBg, 2%), lighten(@irrBg, 2%), 43%);
border-top: 1px solid contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);
// border-bottom: 1px solid contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);
box-shadow: inset 1px 0 0 0 contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);
&:hover {
background-color: contrast(@irrBg, darken(@irrBg, 5%), lighten(@irrBg, 5%), 43%);
}
&.is-active {
background-color: @menu_Tabs-Hover-BG;
border-bottom: none;
a {
color: @menu_Tabs-Active-Text;
}
.a-IRR-headerSort {
color: @menu_Tabs-Active-Text;
}
}
}
.a-IRR-header--group {
background-color: contrast(@irrBg, darken(@irrBg, 4%), lighten(@irrBg, 4%), 43%);
}
.a-IRR-table tr td {
background-color: @irrBg;
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 75%), 100%), desaturate(lighten(@irrBg, 75%), 50%)), 100%);
}
.a-IRR-table {
border-collapse: separate;
}
.a-IRR-table tr:nth-child(even):hover td {
// .text-contrast(@_light_hover_bg);
}
.a-IRR-table tr:hover td {
background-color: contrast(@irrBg, darken(@irrBg, 2.5%), lighten(@irrBg, 2.5%), 43%);
}
.t-IRR-region--noBorders {
.a-IRR {
border-radius: @g_Container-BorderRadius;
}
}
body .a-IRR-sortWidget-rows {
color: @menu_Tabs-Text;
border-top: 1px solid darken(@menu_Tabs-Active-BG, 10%);
background: @menu_Tabs-Active-BG;
}
body .a-IRR-sortWidget-row {
color: @menu_Tabs-Text;
box-shadow: 0 -1px 0 @menu_Tabs-Hover-BG inset;
}
.a-IRR-sortWidget-search > .a-IRR-sortWidget-searchField,
.a-IRR-sortWidget-search > .a-IRR-sortWidget-searchField[type="text"] {
color: @menu_Tabs-Text;
background: @menu_Tabs-Hover-BG;
}
.a-IRR-sortWidget-row:hover {
background-color: @menu_Tabs-Hover-BG;
}
body {
.a-IRR-button.a-IRR-sortWidget-button, .a-IRR-button.a-IRR-sortWidget-button:active:focus {
color: fade(@menu_Tabs-Text, 90%);
background-color: @menu_Tabs-Hover-BG;
&:hover {
background-color: lighten(@menu_Tabs-Hover-BG, 10%);
}
}
}
.a-IRR-sortWidget-actions {
border-bottom: 1px solid darken(@menu_Tabs-Active-BG, 10%);
}
.a-IRR-sortWidget-actions-item {
border-right: none;
}
.a-IRR-sortWidget {
border: none;
}
.a-IRR-table td {
border-left: 1px solid darken(@irrBg, 5%);
border-top: 1px solid darken(@irrBg, 5%);
}
.a-IRR-sortWidget-searchLabel {
color: fade(@menu_Tabs-Text, 90%);
}
.a-IRR-sortWidget-searchLabel:before {
color: fade(@menu_Tabs-Text, 50%);
}
.a-IRR-sortWidget-search > .a-IRR-sortWidget-searchField[type="text"] {
}
.a-IRR-headerLink:focus {
box-shadow: 0 0 0 2px @g_Accent-BG inset;
}
.a-IRR-search-field:focus {
border-color: @g_Accent-BG;
box-shadow: 0 0 0 1px @g_Accent-BG inset, -2px 0 0 @g_Accent-BG inset, 2px 0 0 @g_Accent-BG inset, 0 0 2px 0 fade(@g_Accent-BG, 50%);
}
.a-IRR-singleRow-name,
.a-IRR-singleRow-value {
border-bottom-color: contrast(@irrBg, darken(@irrBg, 6%), lighten(@irrBg, 6%), 43%);
color: contrast(@irrBg, darken(@irrBg, 75%), lighten(@irrBg, 75%), 43%);
}
.a-IRR-singleRow-value {
background-color: @irrBg;
.a-IRR-singleRow-row:hover & {
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%);
}
}
.a-IRR-singleRow-name {
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%);
.a-IRR-singleRow-row:hover & {
background-color: contrast(@irrBg, darken(@irrBg, 6%), lighten(@irrBg, 6%), 43%);
}
}
.a-IRR-button.a-IRR-button--pagination:hover {
background-color: @g_Accent-BG;
}
.a-IRR-reportSummary-label,
.a-IRR-controlsLabel {
background-color: @irrBg;
}
@media only screen and (min-width: 769px) {
.is-maximized.t-IRR-region {
.t-fht-thead .a-IRR-header {
border-bottom: 1px solid contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);;
}
}
}
//
// Removing from Universal Theme
//
// .t-InfoBlocks-contentWrapper {
// background-color: #fff;
// border-radius: 2px;
// }
// .t-InfoBlocks-label {
// .text-normal();
// }
// .t-InfoBlocks-value {
// .text-dark();
// .t-InfoBlocks-item.is-positive & {
// color: #2ECC71;
// }
// .t-InfoBlocks-item.is-negative & {
// color: #E74C3C;
// }
// }
// //@for @i from 1 through length(@g-Colors) {
// // .t-InfoBlocks-item:nth-child(@{@i}n) {
// // .t-InfoBlocks-icon {color: nth(@g-Colors,@i)}
// // }
// // .t-InfoBlocks--coloredHovers .t-InfoBlocks-item:nth-child(@{@i}n) {
// // .t-InfoBlocks-contentWrapper:hover {
// // background-color: nth(@g-Colors,@i);
// // }
// // }
// //}
// .t-InfoBlocks-contentWrapper:hover {
// background-color: #F0F0F0;
// }
// .t-InfoBlocks--coloredHovers .t-InfoBlocks-contentWrapper:hover {
// .t-InfoBlocks-label, .t-InfoBlocks-value, .t-InfoBlocks-icon {
// color: #FFF;
// }
// }
// .t-InfoBlocks--iconBadges {
// .t-InfoBlocks-value {
// background-color: @g_Accent-BG;
// color: #FFFFFF;
// }
// .t-InfoBlocks-item.is-positive .t-InfoBlocks-value {
// background-color: #2ECC71;
// color: #FFF;
// }
// .t-InfoBlocks-item.is-negative .t-InfoBlocks-value {
// background-color: #E74C3C;
// color: #FFF;
// }
// }
// .t-InfoBlocks--iconBadges {
// .t-InfoBlocks-value {
// border-radius: 12px;
// }
// }
// .t-InfoBlocks--large {
// &.t-InfoBlocks--iconBadges {
// .t-InfoBlocks-value {
// border-radius: 24px;
// }
// }
// }
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Links List
========================================================================== */
.t-LinksList-item,
.t-LinksList-link {
// border-color: #F0F0F0;
border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.t-LinksList-icon {
color: contrast(@g_Region-BG, darken(@g_Region-BG, 15%), lighten(@g_Region-BG, 15%), 43%);
}
.t-LinksList-link {
&:hover {
.region-hover();
}
&:focus {
box-shadow:0 0 0 1px @g_Focus inset;
}
}
/**
* Modifier: Go To Arrow
*
* Show Go To Arrow on right
*/
.t-LinksList--showArrow {
.t-LinksList-link {
// &:hover {
// &:before {
// color: @g_Accent-BG;
// }
// }
&:before {
color: contrast(@g_Region-BG, darken(@g_Region-BG, 15%), lighten(@g_Region-BG, 15%), 43%);
}
}
// &.t-LinksList--brightHover .t-LinksList-link:hover:before {
// color: rgba(255,255,255,.5);
// }
}
/**
* Modifier: Show Badge
*
* Show Badge on Right
*/
.t-LinksList--showBadge {
.t-LinksList-badge {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 4%), lighten(@g_Region-BG, 4%), 43%);
color: @g_Region-FG;
}
.t-LinksList-link:hover .t-LinksList-badge {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 8%), lighten(@g_Region-BG, 8%), 43%);
}
// &.t-LinksList--brightHover {
// .t-LinksList-link:hover .t-LinksList-badge {
// background-color: rgba(0,0,0,.15);
// color: #FFF;
// }
// }
.t-LinksList-item.is-expanded > .t-LinksList-link .t-LinksList-badge {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 25%), lighten(@g_Region-BG, 25%), 43%);
// background-color: rgba(0,0,0,.1);
}
}
/**
* Modifier: Bright Hover
*
* Show Bright
*/
.t-LinksList--brightHover {
.t-LinksList-item.is-expanded .t-LinksList-link:hover:before {
color: rgba(255,255,255,.5);
}
.t-LinksList-link {
&:hover {
background-color: @g_Accent-BG;
color: contrast(@g_Accent-BG, darken(@g_Accent-BG, 75%), lighten(@g_Accent-BG, 75%), 43%);
.t-LinksList-icon {
color: rgba(255,255,255,.75);
}
}
}
}
.t-LinksList-item.is-expanded {
background-color: #FCFCFC;
background: linear-gradient(rgba(0,0,0,.015),rgba(0,0,0,0)), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.015));
.t-LinksList-link:hover:before {
color: @g_Accent-BG;
}
.t-LinksList-link:before {
color: rgba(0,0,0,.25)
}
}
.t-LinksList--showBadge {
.t-LinksList-badge {
border-radius: 4px;
}
}
.t-LinksList--iconOnly {
.t-LinksList-icon {
border-radius: 100%;
}
}
.t-LinksList--actions {
.t-LinksList-label {
color: @g_Actions-Col-Text;
}
.t-LinksList-icon {
color: @g_Actions-Col-Text;
}
.t-LinksList-link:hover {
.t-LinksList-icon, .t-LinksList-label, .t-LinksList-badge {
color: contrast(@g_Accent-OG, darken(@g_Accent-OG, 75%), lighten(@g_Accent-OG, 75%), 43%);
}
}
}
/**
* Import Compass
*/
/* ==========================================================================
Login Page + Region
========================================================================== */
.t-Login-container {
}
.t-Login-iconValidation {
background: @g_Success-BG;
color: white;
}
@l_Form-FG: contrast(@g_Region-FG, darken(@g_Region-FG, 5%), lighten(@g_Region-FG, 5%), 43%);
body .t-Login-title {
color: @g_Region-FG;
}
.t-Login-region {
background-color: @g_Region-BG;
}
// .t-Login-region .t-Login-body {
// input[type=text],
// input.password {
// &::-webkit-input-placeholder{
// color: @l_Form-FG;
// }
// &::-moz-placeholder{
// color: @l_Form-FG;
// }
// &:-ms-input-placeholder{
// color: @l_Form-FG;
// }
// }
// }
.t-Login-logo {
&.fa {
color: @g_Accent-BG;
}
}
@media only screen and (max-width: 480px) {
.t-PageBody--login,
.t-PageBody--login .t-Body {
background-color: @g_Region-BG;
}
}
/**
* Import Compass and Theme Variables
*/
/******************************************************************************
Color Variables
******************************************************************************/
@g_Border-Outer: contrast(@g_Region-BG, darken(@g_Region-BG, 15%), lighten(@g_Region-BG, 15%), 43%);
.t-MediaList-item {
border-color: @g_Border-Outer;
}
.t-MediaList--horizontal .t-MediaList-item {
border-right: 1px solid @g_Border-Outer;
}
/* ==========================================================================
Link
========================================================================== */
a.t-MediaList-itemWrap {
color: @g_Link-Base;
&:hover {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 4%), lighten(@g_Region-BG, 4%), 43%);
color: @g_Link-Base;
.t-MediaList-badge {
}
}
&:focus {
box-shadow:0 0 0 1px @g_Focus inset;
}
}
.t-MediaList-itemWrap {
color: @g_Region-FG;
}
.t-MediaList-badge,
.t-MediaList-desc {
color: @g_Region-FG-Light;
}
.t-MediaList-icon {
color: contrast(@g_Region-BG, darken(@g_Region-BG, 15%), lighten(@g_Region-BG, 15%), 43%);
}
.t-MediaList--cols {
.t-MediaList-item {
&:before,
&:after {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
}
}
.Menu(@l_Menu-BG, @l_Menu-Accent) {
.a-MenuBar-label {
color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 75%), lighten(@l_Menu-BG, 75%), 43%);
line-height: 20px;
}
.a-MenuBar-item > .a-Menu-subMenuCol {
display: inline-block;
padding: 8px 0;
vertical-align: top;
margin-right: 8px;
margin-left: -4px;
}
.a-MenuBar-item {
background: @l_Menu-BG;
border-right: 1px solid contrast(@l_Menu-BG, darken(@l_Menu-BG, 10%), lighten(@l_Menu-BG, 10%), 43%);
border-left: 1px solid contrast(@l_Menu-BG, darken(@l_Menu-BG, 10%), lighten(@l_Menu-BG, 10%), 43%);
margin-left: -1px;
&:first-child {
margin-left: 0;
}
}
.a-MenuBar-item.a-Menu--split > .a-Menu-subMenuCol,
.a-MenuBar.u-rtl .a-MenuBar-item.a-Menu--split > .a-Menu-subMenuCol {
border: none;
margin-right: 0;
padding: 8px 8px 8px 4px;
}
.a-MenuBar-item.is-disabled {
.a-MenuBar-label {
@color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 75%), lighten(@l_Menu-BG, 75%), 43%);
color: fade(@color, 50%);
}
}
.a-MenuBar-item:hover {
background-color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 10%), lighten(@l_Menu-BG, 10%), 43%);
}
.a-MenuBar-item.is-expanded {
background-color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 10%), lighten(@l_Menu-BG, 10%), 43%);
}
/* ==========================================================================
Menu
========================================================================== */
.a-Menu-content {
border-radius: 2px;
}
@fontColor: contrast(@l_Menu-Accent, darken(@l_Menu-Accent, 75%), lighten(@l_Menu-Accent, 75%), 43%);
.a-Menu .a-Menu-item {
// .text-dark();
color: @fontColor;
}
.a-Menu-itemSep {
.a-Menu-hSeparator {
border-color: contrast(@l_Menu-Accent, darken(@l_Menu-Accent, 10%), lighten(@l_Menu-Accent, 10%), 43%);
}
}
.a-Menu--current {
background-color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 20%), lighten(@l_Menu-BG, 20%), 43%);
}
.a-Menu .a-Menu-item.is-disabled.is-focused {
background-color: @l_Menu-Accent;
&>.a-Menu-inner .a-Menu-subMenuCol {
color: fade(contrast(@l_Menu-Accent, desaturate(darken(@l_Menu-Accent, 75%), 100%), desaturate(lighten(@l_Menu-Accent, 75%), 50%)), 100%);
}
&>.a-Menu-inner .a-Menu-accel {
color: fade(contrast(@l_Menu-Accent, desaturate(darken(@l_Menu-Accent, 50%), 100%), desaturate(lighten(@l_Menu-Accent, 50%), 50%)), 100%);
}
}
.a-Menu .a-Menu-item.is-focused,
.a-Menu .a-Menu-item.is-expanded {
background-color: @l_Menu-BG;
color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 75%), lighten(@l_Menu-BG, 75%), 43%);
&>.a-Menu-inner .a-Menu-statusCol,
&>.a-Menu-inner .a-Menu-subMenuCol,
&>.a-Menu-inner .a-Menu-accel {
color: contrast(@l_Menu-BG, darken(@l_Menu-BG, 75%), lighten(@l_Menu-BG, 75%), 43%);
}
}
.a-Menu {
.a-Menu-accel {
color: fade(@fontColor, 75%);
}
}
.a-Menu-content {
background-color: fadeout(@l_Menu-Accent, 5%);
border-color: contrast(@l_Menu-Accent, darken(@l_Menu-Accent, 10%), lighten(@l_Menu-Accent, 10%), 43%);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
}
.Menu(darken(@g_Nav-BG, 5%), @g_Accent-OG);
.a-MenuBar {
background-color: transparent;
}
.t-Header .a-MenuBar {
background-color: darken(@g_Nav-BG, 5%);
}
// .t-Body {
// .Menu(darken(@g_Body-BG, 5%), @g_Accent-OG);
// }
.t-Region {
.Menu(darken(@g_Region-BG, 5%), @g_Region-Header-BG);
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Menu Bar
========================================================================== */
//@g_Nav-Active-FG: contrast(@g_Nav-BG, darken(@g_Nav-BG, 75%), lighten(@g_Nav-BG, 75%), 43%);
.MenuBar(@menuActiveFG, @menuBG) {
.a-MenuBar-label {
color: @menuActiveFG;
vertical-align: top;
}
.a-MenuBar-item {
vertical-align: top;
}
/* Focus + Hover State */
.a-MenuBar-item.is-focused,
.a-MenuBar-item:hover {
background-color: contrast(@menuBG, darken(@menuBG, 10%), lighten(@menuBG, 10%), 43%) !important;
}
/* Active + Focus State */
.a-MenuBar-item.a-Menu--current,
.a-MenuBar-item.a-Menu--current.is-focused {
background-color: contrast(@menuBG, darken(@menuBG, 10%), lighten(@menuBG, 10%), 43%) !important;
.a-MenuBar-label {
color: @menuActiveFG !important;
font-weight: bold;
}
}
/* Expanded State */
/* Active + Expanded State */
.a-MenuBar-item.is-expanded,
.a-MenuBar-item.a-Menu--current.is-expanded {
background-color: contrast(@menuBG, darken(@menuBG, 10%), lighten(@menuBG, 10%), 43%) !important;
}
/* Sub Menu Drop Down */
.a-MenuBar-item {
& > .a-Menu-subMenuCol .a-Icon {
color: fade(@menuActiveFG, 80%);
border-color: lighten(@menuBG,15%);
border-radius: 100%;
}
&.a-Menu--current.is-focused > .a-Menu-subMenuCol .a-Icon,
& > .a-Menu-subMenuCol:hover .a-Icon {
@hoverBg: contrast(@menuBG, darken(@menuBG, 25%), lighten(@menuBG, 25%), 43%);
background-color: @hoverBg;
border-color: @hoverBg;
color: contrast(@hoverBg, darken(@hoverBg, 75%), lighten(@hoverBg, 75%), 43%);
}
}
.a-MenuBar-item.a-Menu--current {
& > .a-Menu-subMenuCol .a-Icon {
color: lighten(@menuBG,30%);
border-color: lighten(@menuBG,30%);
}
}
.a-MenuBar-item.a-Menu--current.is-expanded {
& > .a-Menu-subMenuCol .a-Icon {
background-color: @menuActiveFG;
border-color: @menuActiveFG;
color: contrast(@menuActiveFG, darken(@menuActiveFG, 75%), lighten(@menuActiveFG, 75%), 43%);
}
}
.a-MenuBar-item.is-expanded {
& > .a-Menu-subMenuCol .a-Icon {
background-color: lighten(@menuBG,47%);
border-color: lighten(@menuBG,47%);
color: darken(@menuBG,10%);
}
}
// Expanded Menu Contents
.a-Menu-content {
border-width: 0;
background-color: contrast(@menuBG, darken(@menuBG, 10%), lighten(@menuBG, 10%), 43%);
}
.a-Menu .a-Menu-item, {
color: @menuActiveFG;
}
.a-Menu-accel {
color: fade(@menuActiveFG, 75%);
}
.a-Menu .a-Menu-item.is-focused,
.a-Menu .a-Menu-item.is-expanded {
background-color: contrast(@menuBG, darken(@menuBG, 5%), lighten(@menuBG, 5%), 43%) !important;
}
/* Menu Bar Item */
}
.t-Header {
.MenuBar( @g_Nav-Active-FG, @g_Nav-BG );
}
.t-Body {
.MenuBar( @g_Body-Text, @g_Body-BG );
.a-MenuBar > ul {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%)
}
.a-MenuBar-item {//@_border:
border-color: contrast(@g_Body-BG, darken(@g_Body-BG, 10%), lighten(@g_Body-BG, 10%), 43%);
&.is-focused {
box-shadow: none;
}
}
}
.t-Region {
.MenuBar( @g_Region-FG, @g_Region-BG );
.a-MenuBar > ul {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%)
}
.a-MenuBar-item {
border-color: contrast( @g_Region-BG, darken( @g_Region-BG, 10%), lighten( @g_Region-BG, 10%), 43%);
&.is-focused {
box-shadow: none;
}
}
}
.t-Header-userMenu {
.a-Menu-content {
border-width: 0;
background-color: contrast(@g_Nav-BG, darken(@g_Nav-BG, 10%), lighten(@g_Nav-BG, 10%), 43%);
}
.a-Menu-item.is-focused,
.a-Menu-item.is-expanded {
background-color: contrast(@g_Nav-BG, darken(@g_Nav-BG, 5%), lighten(@g_Nav-BG, 5%), 43%) !important;
}
&.a-Menu .a-Menu-item .a-Menu-label {
color: @g_Nav-Active-FG;
-webkit-font-smoothing: antialiased;
}
}
/* ======.less/compiled/core_removed/NavigationBar.less====== */
@bg: darken(@g_Accent-BG,20%);
@l_Menu-Active-FG: contrast(@bg, darken(@bg, 75), lighten(@bg, 75), 43%);
@l_Menu-Active-FG: fade(contrast(@bg, desaturate(darken(@bg, 75%), 100%), desaturate(lighten(@bg, 75%), 50%)), 100%);
.t-NavigationBar-menu {
.a-Menu-content {
border-radius: 0 0 2px 2px;
background-color: @bg;
border-width: 0;
}
.a-Menu-item.is-focused,
.a-Menu-item.is-expanded {
background-color: contrast(@bg, darken(@bg, 10%), lighten(@bg, 10%), 43%) !important;
& > .a-Menu-label {
color: @l_Menu-Active-FG !important;
}
}
.a-Menu-item .a-Menu-label,
&.a-Menu .a-Menu-item a,
&.a-Menu .a-Menu-item .a-Menu-statusCol {
color: @g_Accent-FG !important;
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Popup LOV
========================================================================== */
.t-PopupLOV-links {
a {
&:hover {
background-color: @g_Link-Base;
color: contrast(@g_Link-Base, darken(@g_Link-Base, 75%), lighten(@g_Link-Base, 75%), 43%);
}
}
}
.t-PopupLOV-resultsSet {
tr:hover td {
background-color: #ECF2FB !important;
}
tr:nth-child(2n) td {
background-color: #FAFAFA;
}
}
.t-PopupLOV-resultsSet-link,.ui-widget-content a.t-PopupLOV-resultsSet-link{
color: @g_Link-Base;
}
.t-Page--popupLOV {
background-color: #FFF;
}
.t-PopupLOV-actions {
background-color: @g_Accent-OG;
}
.t-PopupLOV-links {
a {
.text-dark();
&:hover {
background-color: contrast(@g_Link-Base, darken(@g_Link-Base, 10%), lighten(@g_Link-Base, 10%), 43%);
color: contrast(@g_Link-Base, darken(@g_Link-Base, 75%), lighten(@g_Link-Base, 75%), 43%);
}
}
}
.t-PopupLOV-pagination {
.text-normal();
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Region
========================================================================== */
// body {
.t-Region {
background-color: @g_Region-BG;
}
.fielddata b {
.text-dark();
}
.regionHeader(@bg, @fg) {
background-color: @bg;
@gr: contrast(@bg, darken(@bg, 1%), lighten(@bg, 1%), 43%);
border-bottom: 1px solid contrast(@bg, darken(@bg, 10%), lighten(@bg, 10%), 43%);
.t-Region-title,
.t-Button--noUI {
color: @fg;
}
}
.t-Region-header {
.regionHeader(@g_Region-Header-BG, @g_Region-Header-FG);
.t-Body-actions & {
background: transparent;
}
}
.t-Region--stacked {
border-radius: 0 !important;
& > .t-Region-header {
border-radius: 0 !important;
}
}
.t-Region--noBorder {
& > .t-Region-header {
.regionHeader(@g_Region-BG, @g_Region-FG);
}
}
.t-Region--accent1,
.t-Region--accent1&.t-Region--noBorder {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-1, @g_Color-Palette-1-FG);
}
}
.t-Region--accent2,
.t-Region--accent2&.t-Region--noBorder {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-2, @g_Color-Palette-2-FG);
}
}
.t-Region--accent3,
.t-Region--accent3&.t-Region--noBorder {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-3, @g_Color-Palette-3-FG);
}
}
.t-Region--accent4,
.t-Region--accent4&.t-Region--noBorder {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-4, @g_Color-Palette-4-FG);
}
}
.t-Region--accent5,
.t-Region--accent5&.t-Region--noBorder {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-5, @g_Color-Palette-5-FG);
}
}
.t-Region-header {
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.t-Region h2.t-Region-title {
color: @g_Region-Header-FG;
}
.t-Region-body {
color: @g_Region-FG;
}
.t-Region--hideShow {
&.is-collapsed {
border-bottom-color: transparent;
}
}
.t-Region--scrollBody > .t-Region-bodyWrap > .t-Region-body {
background:
linear-gradient(fade(@g_Region-BG,100%) 30%, fade(@g_Region-BG,0%)),
linear-gradient(fade(@g_Region-BG,0%), fade(@g_Region-BG,100%) 70%) 0 100%,
linear-gradient(rgba(0,0,0,.025), rgba(0,0,0,0)),
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.025)) 0 100%;
background-color: @g_Region-BG;
}
.t-Body-actions {
.t-Region {
background-color: transparent;
}
.t-Region-header {
background-color: transparent;
}
}
.t-Body-side {
.t-Region {background-color: transparent;}
}
.t-Region,.t-Region-header {
border-radius: @g_Container-BorderRadius;
}
.t-Region--noBG {
background-color: transparent;
}
.t-Body-actions {
.t-Region {
background-color: transparent;
}
}
.t-Region--carousel {
.apex-rds-button {
background-color: transparent;
border-radius: 2px;
background-color: rgba(0,0,0,.25);
color: #FFF;
&:hover {
background-color: rgba(0,0,0,.5);
}
&:active, &:active:focus {
background-color: rgba(0,0,0,.75);
}
}
.apex-rds-next-region{
border-radius: 2px 0 0 2px;
}
.apex-rds-previous-region{
border-radius: 0 2px 2px 0;
}
.a-Region-carouselNavItem {
&.apex-rds-selected .a-Region-carouselLink {
background-color: rgba(0,0,0,.45);
&:focus {
background-color: @g_Accent-BG
}
}
}
.a-Region-carouselLink {
background-color: rgba(0,0,0,.15);
border-radius: 100%;
}
}
/* ==========================================================================
.t-Report
---
Standard Report (Bordered)
========================================================================== */
.t-Report-cell,
.t-Report-colHead {
border-left: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
border-top: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
// box-shadow: 0 -1px rgba(0, 0, 0, 0.1) inset
}
.t-Report-report tr .t-Report-cell:last-child,
.t-Report-report tr .t-Report-colHead:last-child {
border-right: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.t-Report-report tr:last-child .t-Report-cell {
border-bottom: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.t-Report .is-stuck .t-Report-colHead {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
border-bottom: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.t-Report--rowHighlight {
.t-Report-report tr:hover .t-Report-cell,
.t-Report-report tr:nth-child(odd):hover .t-Report-cell {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 2%), lighten(@g_Region-BG, 2%), 43%) !important;
}
}
.t-Report--staticRowColors {
.t-Report-report tr:nth-child(odd) .t-Report-cell {
background-color: transparent;
}
}
/* ==========================================================================
.t-Report--altRowsDefault
---
Alternate Report Rows
========================================================================== */
.t-Report--altRowsDefault {
.t-Report-report tr:nth-child(odd) .t-Report-cell {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 1%), lighten(@g_Region-BG, 1%), 43%);
}
}
/* ==========================================================================
.t-Report--pagination
========================================================================== */
.t-Report-paginationText b,
.t-Report-paginationText a:hover {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-SocialFooter {
padding-top: 48px;
padding-bottom: 24px;
.row {
padding-top: 8px;
}
.col {
padding-bottom:8px;
text-align: center;
transition: all .2s;
&:hover {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
-ms-transform: translateY(-8px);
-o-transform: translateY(-8px);
transform: translateY(-8px);
box-shadow: 0px 8px 4px -4px rgba(0, 0, 0, 0.05);
}
}
a {
transition: all .2s;
display: block;
text-decoration: none;
text-align: center;
color: fadeout(@g_Body-Text, 20%);
.t-Icon {
display:block;
margin: 0 auto;
color: fadeout(@g_Body-Text, 60%);
}
.fa {
font-size: 28px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
}
.a-Icon {
width: 32px;
height: 32px;
line-height: 32px;
}
.a-Icon:before {
font-size: 32px;
}
&:hover,
&:hover .t-Icon {
color: @g_Link-Base;
}
}
}
.t-SearchResults-desc {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 75%), 100%), desaturate(lighten(@g_Body-BG, 75%), 50%)), 100%);
}
.t-SearchResults-date {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 55%), 100%), desaturate(lighten(@g_Body-BG, 55%), 50%)), 100%);
}
.t-SearchResults-misc {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 55%), 100%), desaturate(lighten(@g_Body-BG, 55%), 50%)), 100%);
}
.t-Region {
.t-SearchResults-desc {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
}
.t-SearchResults-date {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
}
.t-SearchResults-misc {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
}
}
//.t-SearchResults-list {
// margin: 0;
// padding: 0;
// list-style: none;
//}
//.t-SearchResults-item {
// display: block;
// margin-bottom: 24px;
// &:last-child {
// margin-bottom: 12px;
// }
//}
//.t-SearchResults-title {
// font-weight: 500;
// font-size: 1.6rem;
// line-height: 2rem;
// margin: 0;
//}
//.t-SearchResults-info {
// margin-top: 4px;
// font-size: 1.4rem;
// line-height: 2rem;
//}
//.t-SearchResults-desc {
// margin: 0 0 4px 0;
//}
//.t-SearchResults-date {
//}
//.t-SearchResults-misc {
// display: block;
// font-size: 1.2rem;
// line-height: 1.6rem;
//}
.t-StatusList-blockHeader {
// .text-dark();
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
background-color: @g_Region-Header-BG;
}
.t-StatusList-headerTextAlt,
.t-StatusList-attr,
.t-StatusList-textDesc{
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 55%), 100%), desaturate(lighten(@g_Region-BG, 55%), 50%)), 100%);
// .text-normal();
}
.t-StatusList-itemTitle {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
// .text-dark();
}
.t-StatusList--dates {
.t-StatusList-marker {
color: #707070;
border-radius: 2px;
background-color: #FFF;
&:after {
background-color: #A0A0A0;
border-radius: 2px 2px 0 0;
}
}
}
.t-StatusList--bullets {
.t-StatusList-marker {
border-radius: 24px;
background-color: #fff;
color: #404040;
}
.t-StatusList-item.is-complete .t-StatusList-marker { background-color: #707070; }
.t-StatusList-item.is-danger .t-StatusList-marker,
.t-StatusList-item.is-error .t-StatusList-marker { background-color: #ff3b30; }
.t-StatusList-item.is-open .t-StatusList-marker { background-color: #4cd964; }
.t-StatusList-item.is-warning .t-StatusList-marker { background-color: #ffcc00; }
.t-StatusList-item.is-null {
.t-StatusList-marker {
background-color: #F0F0F0;
}
.t-StatusList-marker {
color: #A0A0A0;
}
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Tabs Configuration
========================================================================== */
/* Tab Variables
========================================================================== */
@l_Tab-Highlight: @g_Accent-BG;
/* Region Display Selector
========================================================================== */
.t-Tabs--simple .t-Tabs-item.is-active .t-Tabs-link,
.apex-rds .apex-rds-selected a {
box-shadow: 0 -2px 0 lighten(@l_Tab-Highlight, 20%) inset;
}
.t-Tabs--simple .t-Tabs-link:focus,
.apex-rds a:focus {
box-shadow: 0 0 0 2px lighten(@l_Tab-Highlight,20%) inset;
}
.t-Tabs--pill {
background: linear-gradient(@g_Accent-OG,#F4F4F4);
border-radius: 2px;
.t-Icon {
.text-normal();
}
.t-Tabs-link {
.text-dark();
&:hover {
background-color: #FFF;
}
&:focus {
border-color: #4696FC;
}
&:active {
background-color: #F0F0F0;
}
}
.t-Tabs-item:first-child .t-Tabs-link {
border-radius: 2px 0 0 2px;
}
.t-Tabs-item.is-active {
.t-Tabs-link {
background-color: #FFF;
}
}
}
.t-Tabs--simple .t-Icon {
color: @g_Region-FG;
}
.t-Tabs--simple .t-Tabs-link,.apex-rds a {
color: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG, 75%), 100%), desaturate(lighten(@g_Body-Title-BG, 75%), 50%)), 100%);
&:hover {
background-color: rgba(0,0,0,.025);
}
&:active {
background-color: rgba(0,0,0,.15);
}
.t-Body & {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 75%), 100%), desaturate(lighten(@g_Body-BG, 75%), 50%)), 100%);
}
.t-Body-title &,
.t-Body-info & {
color: @g_Body-Title-FG;
}
.t-Region & {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
}
}
.apex-rds-hover.left {
a {
background: -webkit-linear-gradient(left, @g_Body-Title-BG 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, @g_Body-Title-BG 50%,rgba(255,255,255,0) 100%); /* W3C */
}
}
.apex-rds-hover.right {
a {
background: -webkit-linear-gradient(left, @g_Body-Title-BG 0%,rgba(255,255,255,0.0) 1%, @g_Body-Title-BG 50%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, @g_Body-Title-BG 0%,rgba(255,255,255,0.0) 1%, @g_Body-Title-BG 50%); /* W3C */
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Region
========================================================================== */
.a-TagCloud-link {
border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
border-radius: 2px;
background: contrast(@g_Region-BG, darken(@g_Region-BG, 2%), lighten(@g_Region-BG, 2%), 43%);
transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s;
color: darken(@g_Link-Base,1%);
}
.a-TagCloud-link span {
transition: color .2s;
}
.a-TagCloud-link:hover {
text-decoration: none;
background-color: @g_Accent-BG;
border-color: @g_Accent-BG;
color: @g_Accent-FG;
box-shadow: 0 0 0 2px @g_Accent-BG inset;
}
.a-TagCloud-link:hover span {
color: @g_Accent-FG;
}
.a-TagCloud-count {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 60%), 100%), desaturate(lighten(@g_Region-BG, 60%), 50%)), 100%);
font-weight: 200;
}
.t-Timeline {
color: @g_Region-FG;
}
// .t-Timeline-item {
// background-color: @g_Region-BG;
// }
.t-Timeline-username,
.t-Timeline-date,
.t-Timeline-desc {
color: @g_Region-FG-Light;
}
.t-Timeline-wrap {
color: @g_Region-FG;
}
.t-Timeline-type {
background-color: darken(@g_Region-Header-BG,4%);
color: @g_Region-Header-FG;
}
.t-Timeline-type.is-new {
background-color: @g_Success-BG;
color: #FFF;
}
.t-Timeline-type.is-updated {
background-color: @g_Info-BG;
color: #FFF;
}
.t-Timeline-type.is-removed {
background-color: @g_Danger-BG;
color: #FFF;
}
.t-Timeline-wrap:focus {
outline: none;
box-shadow:0 0 0 1px @g_Focus inset;
}
.treeMe(@nav-Icon, @nav-FG, @nav-Active-BG, @nav-Active-FG, @nav-Icon-Active) {
.a-TreeView-node--topLevel {
.a-TreeView-row.is-focused {
box-shadow: 0 0 0 1px contrast(@nav-Active-BG, darken(@nav-Active-BG, 9%), lighten(@nav-Active-BG, 9%), 43%) inset;
}
.a-TreeView-row.is-current,
.a-TreeView-row.is-selected,
.a-TreeView-row.is-current--top.is-selected {
background-color: contrast(@nav-Active-BG, darken(@nav-Active-BG, 3%), lighten(@nav-Active-BG, 3%), 43%);
}
.a-TreeView-row.is-current--top,
&.is-collapsible > .a-TreeView-row,
ul {
background-color: @nav-Active-BG;
}
.a-TreeView-row.is-hover {
background-color: contrast(@nav-Active-BG, darken(@nav-Active-BG, 6%), lighten(@nav-Active-BG, 6%), 43%) !important;
}
.a-TreeView-row.is-hover + .a-TreeView-toggle,
&.is-collapsible .a-TreeView-toggle {
color: fadeout(@nav-Active-FG, 25%);
&:hover{
color: @nav-Active-FG !important;
}
}
.a-TreeView-content.is-hover {
color: @nav-Active-FG !important;
}
.a-TreeView-content {
color: @nav-FG;
.fa, .a-Icon {
color:@nav-Icon;
}
}
.a-TreeView-content.is-hover,
.a-TreeView-content.is-current--top {
.fa,.a-Icon {
color: @nav-Icon-Active;
}
}
.a-TreeView-label {
color: inherit;
}
.a-TreeView-content.is-current,
.a-TreeView-content.is-selected,
.a-TreeView-content.is-current--top {
color: @nav-Active-FG;
}
.a-TreeView-toggle {
color: fadeout(@nav-FG, 25%);
&:hover{
color: @nav-FG !important;
}
}
.a-TreeView-row {
transition: background-color .1s;
}
}
}
.t-PageBody--leftNav {
.t-Body-nav {
background-color: @g_Nav-BG;
}
}
.t-Region {
.treeMe(fade(@g_Region-FG, 95%), @g_Region-FG, @g_Region-BG, @g_Region-FG, @g_Region-FG);
/* Ensuring that the top level maintains is-selected state */
.a-TreeView-node--topLevel.is-collapsible > .a-TreeView-row.is-selected,
.a-TreeView-node--topLevel.is-collapsible > .a-TreeView-row.is-focused {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 3%), lighten(@g_Region-BG, 3%), 43%);
}
}
.t-TreeNav {
.treeMe(@g_Nav-Icon, @g_Nav-FG, @g_Nav-Active-BG, @g_Nav-Active-FG, @g_Nav-Icon-Active);
.a-TreeView-node--topLevel.is-collapsible .a-TreeView-content .fa,
.a-TreeView-node--topLevel.is-collapsible .a-TreeView-content .a-Icon {
color: @g_Nav-Icon-Active;
}
.a-TreeView-node--topLevel.is-collapsible .a-TreeView-content {
color: @g_Nav-Active-FG;
}
}
/* ======.less/compiled/core_removed/Wizard.less====== */
//
//.ui-dialog-titlebar, .t-Dialog-page, .t-Wizard--modal .t-Wizard-body {
// background-color: lighten(@g_Region-BG, 10%);
//}
//.t-WizardSteps-step.is-active .t-WizardSteps-label {
// .region-text();
//}
//.t-Wizard-footer {
// t-Wizard-footer
//}
@l_Wizard-BG: @g_Region-BG;
.t-Dialog--wizard {
border: contrast(@l_Wizard-BG, darken(@l_Wizard-BG, 10%), lighten(@l_Wizard-BG, 10%), 43%);
}
.t-Wizard {
background-color: @l_Wizard-BG;
border-radius: 2px;
.t-Wizard-title {
color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG, 75%), 100%), desaturate(lighten(@l_Wizard-BG, 75%), 50%)), 100%);
}
}
body .t-Wizard--modal {
background: @l_Wizard-BG;
.t-Wizard-body {
background:
linear-gradient(fade(@l_Wizard-BG,100%) 40%, fade(@l_Wizard-BG,0%)),
linear-gradient(fade(@l_Wizard-BG,0%), fade(@l_Wizard-BG,100%) 60%) 0 100%,
linear-gradient(rgba(0,0,0,.025), rgba(0,0,0,0)),
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.025)) 0 100%;
background-color: @l_Wizard-BG;
}
.t-Region {
background: @l_Wizard-BG;
}
}
.t-Wizard {
border-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG, 10%), lighten(@l_Wizard-BG, 10%), 43%);
.t-Wizard-header {
@headerBg: contrast(@l_Wizard-BG, darken(@l_Wizard-BG, 2%), lighten(@l_Wizard-BG, 2%), 43%);
background-color: @headerBg;
border-color: contrast(@headerBg, darken(@headerBg, 5%), lighten(@headerBg, 5%), 43%);
}
}
.t-WizardSteps-wrap {
&:after {
background-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG, 10%), lighten(@l_Wizard-BG, 10%), 43%);
}
}
.t-WizardSteps-step .t-WizardSteps-marker {
background-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG, 20%), lighten(@l_Wizard-BG, 20%), 43%);
}
.t-WizardSteps-step.is-complete .t-WizardSteps-marker {
background-color: @g_Success-BG;
color: #FFF;
}
.t-WizardSteps-step.is-active .t-WizardSteps-marker {
background-color: @g_Accent-BG;
// color: @g_Accent-FG;
}
.t-WizardSteps-label {
color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG, 60%), 100%), desaturate(lighten(@l_Wizard-BG, 60%), 50%)), 100%);
}
.t-WizardSteps-step.is-active .t-WizardSteps-label {
color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG, 75%), 100%), desaturate(lighten(@l_Wizard-BG, 75%), 50%)), 100%);
}
/*!
* http:
* http:
* http:
*/
//body .ui-dialog {
// border-radius: @g_Container-BorderRadius;
// border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%) !important;
//}
body .ui-dialog {
.ui-dialog-titlebar {
// background: @g_Region-BG;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: @g_Body-BG;
}
.ui-dialog-title {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 75%), 100%), desaturate(lighten(@g_Body-BG, 75%), 50%)), 100%)
}
}
body .ui-dialog .ui-dialog-titlebar-close {
border-radius: 100%;
}
body .ui-dialog .ui-dialog-buttonpane {
border-top-color: #F0F0F0;
}
//.ui-widget-content {
// background: transparent;
// iframe {
// border: none;
// }
//}
//.t-Dialog-page,.t-Dialog-page .t-Region {
// background-color: @g_Region-BG;
//}
//body .ui-dialog.t-Dialog--wizard {
// border-radius: 3px;
// .ui-dialog-titlebar {
// background-color: @g_Region-BG;
// }
// .ui-dialog-titlebar-close {
// background-color: transparent;
// &:hover {
// background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
// }
// &:active {
// background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
// }
// }
//}
/**
* Import Compass and Theme Variables
*/
@ui-Header-BG: @g_Region-Header-BG;
@ui-Header-FG: @g_Region-Header-FG;
@ui-Body-BG: @g_Region-BG;
@ui-Body-FG: @g_Region-FG;
@ui-Border: contrast(@g_Region-BG, darken(@g_Region-BG, 8%), lighten(@g_Region-BG, 8%), 43%);
@ui-State-Default-BG: @g_Button-BG;
@ui-State-Default-FG: @g_Button-Text;
/* Component containers
----------------------------------*/
body .ui-widget-content {
border-color: @ui-Border;
background-color: @ui-Body-BG;
color: @ui-Body-FG;
}
body .ui-widget-content a {
color: @g_Link-Base;
}
body .ui-widget-header {
border-color: @ui-Border;
background-color: @ui-Header-BG;
color: @ui-Header-FG;
}
body .ui-widget-header a {
color: @ui-Header-FG;
}
/* Interaction states
----------------------------------*/
body .ui-state-default,
body .ui-widget-content .ui-state-default,
body .ui-widget-header .ui-state-default {
background-color: @ui-State-Default-BG;
color: @ui-State-Default-FG;
}
body .ui-state-default a,
body .ui-state-default a:link,
body .ui-state-default a:visited,
body .ui-state-active a,
body .ui-state-active a:link,
body .ui-state-active a:visited {
color: @g_Link-Base;
}
body .ui-state-hover,
body .ui-widget-content .ui-state-hover,
body .ui-widget-header .ui-state-hover {
background-color: lighten(@ui-State-Default-BG, 10%);
color: @ui-State-Default-FG;
}
body .ui-state-focus,
body .ui-widget-content .ui-state-focus,
body .ui-widget-header .ui-state-focus {
box-shadow: 0 0 0 1px @g_Focus inset,
0 0 1px 2px fade(@g_Focus, 25%) !important;
background-color: lighten(@ui-State-Default-BG, 10%);
color: @ui-State-Default-FG;
}
body .ui-datepicker .ui-datepicker-buttonpane button:focus {
outline: none;
box-shadow: 0 0 0 1px @g_Focus inset,
0 0 1px 2px fade(@g_Focus, 25%) !important;
}
body .ui-state-hover a,
body .ui-state-hover a:hover,
body .ui-state-hover a:link,
body .ui-state-hover a:visited,
body .ui-state-focus a,
body .ui-state-focus a:hover,
body .ui-state-focus a:link,
body .ui-state-focus a:visited {
color: @g_Link-Base;
}
body .ui-state-active,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active {
background-color: darken(@ui-State-Default-BG, 10%);
color: @ui-State-Default-FG;
}
/* Interaction Cues
----------------------------------*/
body .ui-state-highlight,
body .ui-widget-content .ui-state-highlight,
body .ui-widget-header .ui-state-highlight {
background-color: lighten(@g_Accent-BG,50%);
color: fade(contrast(@g_Accent-FG, desaturate(darken(@g_Accent-FG, 75%), 100%), desaturate(lighten(@g_Accent-FG, 75%), 50%)), 100%);
}
body .ui-state-highlight a,
body .ui-widget-content .ui-state-highlight a,
body .ui-widget-header .ui-state-highlight a {
color: fade(contrast(@g_Accent-FG, desaturate(darken(@g_Accent-FG, 75%), 100%), desaturate(lighten(@g_Accent-FG, 75%), 50%)), 100%);
}
body .ui-state-error,
body .ui-widget-content .ui-state-error,
body .ui-widget-header .ui-state-error {
background-color: @g_Danger-BG;
color: @g_Danger-FG;
}
body .ui-state-error a,
body .ui-widget-content .ui-state-error a,
body .ui-widget-header .ui-state-error a {
color: @g_Danger-FG;
}
body .ui-state-error-text,
body .ui-widget-content .ui-state-error-text,
body .ui-widget-header .ui-state-error-text {
color: @g_Danger-BG
}
/* Date Picker
----------------------------------*/
body .ui-datepicker td span.ui-state-default,
body .ui-datepicker td a.ui-state-default {
background-color: transparent;
color: @ui-Body-FG;
&.ui-state-active {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
font-weight: bold;
&.ui-state-hover {
background-color: @g_Accent-BG !important;
}
}
&.ui-state-hover {
background-color: contrast(@ui-Body-BG, darken(@ui-Body-BG, 5%), lighten(@ui-Body-BG, 5%), 43%) !important;
}
&:focus {
outline: none;
box-shadow: 0 0 0 1px @g_Focus inset,
0 0 1px 2px fade(@g_Focus, 25%) !important;
}
}
body .ui-datepicker td span.ui-state-default.ui-state-highlight,
body .ui-datepicker td a.ui-state-default.ui-state-highlight {
background-color: contrast(@ui-Body-BG, darken(@ui-Body-BG, 8%), lighten(@ui-Body-BG, 8%), 43%);
}
body .ui-datepicker th {
color: contrast(@ui-Body-FG, darken(@ui-Body-FG, 25%), lighten(@ui-Body-FG, 25%), 43%);
}
body .ui-datepicker .ui-datepicker-header,
body .ui-datepicker .ui-datepicker-buttonpane button,
body .ui-datepicker .ui-datepicker-next,
body .ui-datepicker .ui-datepicker-prev {
border-radius: @g_Button-BorderRadius;
}
/* Dialogs
----------------------------------*/
body .ui-dialog .ui-dialog-titlebar {
background-color: @ui-Header-BG;
border-bottom: 1px solid contrast(@ui-Header-BG, darken(@ui-Header-BG, 10%), lighten(@ui-Header-BG, 10%), 43%);
}
body .ui-dialog .ui-dialog-title {
color: @ui-Header-FG;
}
body .ui-dialog .ui-dialog-content,
.t-Dialog-page {
background-color: @ui-Body-BG;
color: @ui-Body-FG;
}
/* Wizard Dialog
----------------------------------*/
.t-Dialog--wizard {
&.ui-dialog,
&.ui-dialog .ui-dialog-titlebar,
body .ui-dialog .ui-dialog-content {
background-color: @ui-Body-BG;
color: @ui-Body-FG;
}
&.ui-dialog .ui-dialog-title {
color: @ui-Body-FG;
}
}
/* Corner radius */
body .ui-corner-all {
border-radius: @g_Container-BorderRadius;
}
body .ui-corner-top,
body .ui-corner-left,
body .ui-corner-tl {
border-top-left-radius: @g_Container-BorderRadius;
}
body .ui-corner-top,
body .ui-corner-right,
body .ui-corner-tr {
border-top-right-radius: @g_Container-BorderRadius;
}
body .ui-corner-bottom,
body .ui-corner-left,
body .ui-corner-bl {
border-bottom-left-radius: @g_Container-BorderRadius;
}
body .ui-corner-bottom,
body .ui-corner-right,
body .ui-corner-br {
border-bottom-right-radius: @g_Container-BorderRadius;
}
/* Corner radius */
body .ui-button.ui-corner-all {
border-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-top,
body .ui-button.ui-corner-left,
body .ui-button.ui-corner-tl {
border-top-left-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-top,
body .ui-button.ui-corner-right,
body .ui-button.ui-corner-tr {
border-top-right-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-bottom,
body .ui-button.ui-corner-left,
body .ui-button.ui-corner-bl {
border-bottom-left-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-bottom,
body .ui-button.ui-corner-right,
body .ui-button.ui-corner-br {
border-bottom-right-radius: @g_Button-BorderRadius;
}
/**
* item type autocomplete (based on jquery.autocomplete.css)
*/
.ac_results {
border: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 15%), lighten(@g_Region-BG, 15%), 43%);
background-color: @g_Region-BG;
color: contrast(@g_Region-BG, darken(@g_Region-BG, 75%), lighten(@g_Region-BG, 75%), 43%);
}
.ac_loading {
background: white url('../../../apex_ui/img/legacy/loading16x16.gif') right center no-repeat;
}
.ac_odd {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
}
body .ac_over {
background-color: @g_Accent-BG;
color: contrast(@g_Accent-BG, darken(@g_Accent-BG, 75%), lighten(@g_Accent-BG, 75%), 43%);
}
body {
.a-D3LineChart, .a-D3BarChart {
.a-D3LineChart-axis-title {
fill: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
}
.a-D3LineChart-axis {
.tick text {
// .region-text();
fill: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 50%), 100%), desaturate(lighten(@g_Region-BG, 50%), 50%)), 100%);
}
}
.a-D3LineChart-axis line, .a-D3LineChart-axis path {
stroke: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
}
.a-D3BarChart {
.a-D3BarChart-axis-title {
fill: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
}
.a-D3BarChart-grid line, .a-D3BarChart-grid {
stroke: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.a-D3BarChart-axis {
line, path {
stroke: contrast(@g_Region-BG, darken(@g_Region-BG, 20%), lighten(@g_Region-BG, 20%), 43%);
}
.tick text {
fill: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 50%), 100%), desaturate(lighten(@g_Region-BG, 50%), 50%)), 100%);
}
}
}
@d3bg: contrast(@g_Region-BG, darken(@g_Region-BG, 50%), lighten(@g_Region-BG, 50%), 43%);
.a-D3Tooltip {
background-color: @d3bg;
color: fade(contrast(@d3bg, desaturate(darken(@d3bg, 50%), 100%), desaturate(lighten(@d3bg, 50%), 50%)), 100%) !important;
}
.a-D3Tooltip-content {
border-top: contrast(@d3bg, darken(@d3bg, 10%), lighten(@d3bg, 10%), 43%);
}
.a-D3ChartLegend.a-D3ChartLegend--external-borders {
border-width: 0;
}
.a-D3ChartLegend-item,
.a-D3ChartLegend.a-D3ChartLegend--background .a-D3ChartLegend-layout {
background-color: transparent;
border-width: 0 !important;
}
.a-D3ChartLegend-item-value {
color: contrast(@g_Region-FG, darken(@g_Region-FG, 15%), lighten(@g_Region-FG, 15%), 43%);
}
.a-D3ChartLegend.a-D3ChartLegend--square-color .a-D3ChartLegend-item-color{
border-radius: 100%;
border-right-width: 0;
}
}
.MiniCal(@background, @foreground) {
/* Calendar Wrapper
========================================================================== */
.a-MiniCal {
border: 1px solid contrast(@background, darken(@background, 10%), lighten(@background, 10%), 43%);
border-radius: @g_Container-BorderRadius;
background-color: @background;
}
/* Calendar Header
========================================================================== */
.a-MiniCal-title {
color: @foreground;
}
/* Month Calendar
========================================================================== */
.a-MiniCal-dayOfWeek {
color: fade(contrast(@background, desaturate(darken(@background, 50%), 100%), desaturate(lighten(@background, 50%), 50%)), 100%);
}
.a-MiniCal-date {
}
.a-MiniCal-day {
border-color: contrast(@background, darken(@background, 2.5%), lighten(@background, 2.5%), 43%);
color: fade(contrast(@background, desaturate(darken(@background, 75%), 100%), desaturate(lighten(@background, 75%), 50%)), 100%);
&.is-today {
.a-MiniCal-date {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
}
&.is-active {
.a-MiniCal-date {
background-color: @g_Warning-BG;
color: @g_Warning-FG;
}
}
&.is-weekend {
background-color: contrast(@background, darken(@background, 2%), lighten(@background, 2%), 43%);
}
&.is-null {
background-color: contrast(@background, darken(@background, 4%), lighten(@background, 4%), 43%);
}
}
}
.t-Body {
.MiniCal(@g_Body-BG, @g_Body-Text);
}
.t-Region {
.MiniCal(@g_Region-BG, @g_Region-FG);
}
.t-Body-actions {
.MiniCal(@g_Actions-Col-BG, @g_Actions-Col-Text);
}
.t-Body-info {
.MiniCal(@g_Body-Title-BG, @g_Body-Title-FG);
}
/* ==========================================================================
SlideToolTip Configuration
========================================================================== */
/* SlideToolTip Variables
========================================================================== */
@p_Tooltip-bg-color: darken(@g_Accent-BG, 20%);
@p_Tooltip-label-color: @g_Accent-FG;
@p_Tooltip-content-color: contrast(@p_Tooltip-bg-color, darken(@p_Tooltip-bg-color, 40%), lighten(@p_Tooltip-bg-color, 40%), 43%);
@p_Slide-bg-color: @g_Region-BG;
@p_Slide-label-color: @g_Region-FG;
@p_Slide-content-color: @p_Tooltip-bg-color;
@p_List-icon-color: fade(@g_Region-FG, 50%);
@p_List-title-color: @g_Region-FG;
@p_List-trigger-color-active: contrast(@p_Tooltip-bg-color, darken(@p_Tooltip-bg-color, 10%), lighten(@p_Tooltip-bg-color, 10%), 43%);
@p_List-trigger-font-color: fade(@g_Region-FG, 75%);
@p_List-badge-color: @g_Region-FG;
@p_List-header-color: @g_Region-FG;
@p_Tooltip-arrow-after: @g_Region-BG;
@p_List-header-color: @g_Accent-FG;
@p_Tooltip-border-radius: @g_Container-BorderRadius;
// t_Acccents
// p_SlideTooltip
//
.a-DetailedContentList-title {
.t-Body & {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 75%), 100%), desaturate(lighten(@g_Body-BG, 75%), 50%)), 100%);
}
.t-Body-info & {
color: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG, 75%), 100%), desaturate(lighten(@g_Body-Title-BG, 75%), 50%)), 100%);
}
.t-Region &,
.t-ButtonRegion & {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 75%), 100%), desaturate(lighten(@g_Region-BG, 75%), 50%)), 100%);
}
}
body {
.a-DetailedContentList-item {
&:focus {
.a-DetailedContentList-header {
box-shadow: 0 0 0 1px @p_List-trigger-color-active inset;
}
}
&.is-expanded {
.a-DetailedContentList-trigger {
background-color: @p_Tooltip-arrow-after;
box-shadow: 0 0 0 1px @g_Accent-BG inset;
color: @g_Accent-BG;
&:focus {
background-color: @p_List-trigger-color-active;
color: contrast(@g_Accent-BG, darken(@g_Accent-BG, 75%), lighten(@g_Accent-BG, 75%), 43%);
box-shadow: 0 0 0 1px @p_List-trigger-color-active inset;
}
}
}
}
.a-DetailedContentList-header {
&:hover {
// background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
.region-hover();
}
}
.a-DetailedContentList-icon {
color: @p_List-icon-color;
}
.a-DetailedContentList-badge {
color: @p_List-badge-color;
}
.a-DetailedContentList-trigger {
background: @p_Tooltip-label-color;
color: @p_List-trigger-font-color;
&:hover {
color: @p_List-trigger-color-active;
}
&:focus {
color: @p_List-trigger-color-active;
}
}
.a-DetailedContentList-body {
background-color: @p_Slide-bg-color;
}
.content-tooltip {
.a-DetailedContentList-body {
background-color: @p_Tooltip-bg-color;
}
.a-DetailedContentList-body-row-label {
color: @p_Tooltip-label-color;
}
.a-DetailedContentList-body-row-content {
color: @p_Tooltip-content-color;
}
}
.a-DetailedContentList-body-header {
background: @p_List-header-color;
}
.a-DetailedContentList-body-row-label {
color: @p_Slide-label-color;
}
.a-DetailedContentList-body-row-content {
color: @p_Slide-content-color;
}
.a-DetailedContentList {
&.a-DetailedContentList--tooltip {
.a-DetailedContentList-body {
&:after {
border-color: @p_Tooltip-arrow-after transparent;
}
&:before {
border-color: @p_List-header-color transparent;
}
}
}
}
.ui-tooltip {
&.content-tooltip {
-webkit-border-radius: @p_Tooltip-border-radius;
-moz-border-radius:@p_Tooltip-border-radius;
border-radius: @p_Tooltip-border-radius;
.a-DetailedContentList-body {
-webkit-border-radius: @p_Tooltip-border-radius;
-moz-border-radius:@p_Tooltip-border-radius;
border-radius: @p_Tooltip-border-radius;
}
.arrow {
&.bottom {
&:before {
border-color: @p_Tooltip-bg-color transparent;
}
&:after {
border-color: @p_Tooltip-bg-color transparent;
}
&.light {
&:after {
border-color: #eaeaea transparent;
}
}
}
&.top {
&:before {
border-color: @p_Tooltip-bg-color transparent;
}
&:after {
border-color: @p_Tooltip-bg-color transparent;
}
}
&.left {
&:before {
border-color: transparent @p_List-header-color transparent transparent;
}
&:after {
border-color: transparent @p_Tooltip-bg-color transparent transparent;
}
}
&.right {
&:before {
border-color: transparent transparent transparent @p_List-icon-color;
}
&:after {
border-color: transparent transparent transparent @p_Tooltip-bg-color;
}
}
}
}
}
}
@g_Accent-BG: #505f6d;
@g_Accent-OG: #ececec;
@g_Body-Title-BG: #dee1e4;
@g_Link-Base: #337ac0;
@g_Body-BG: #f5f5f5;
.badgelistDash (@index) when (@index > 0) {
.badgelistDash((@index - 1));
.t-BadgeList-item:nth-child(@{index}) {
@bg: extract(@_colors, @index);
background-color: @bg;
a {
color: extract(@_colors_FG, @index);
&.t-BadgeList-wrap:hover {
box-shadow: 0 -8px 0 0 contrast(@bg, darken(@bg, 10%), lighten(@bg, 10%), 43%) inset;
}
}
}
}
.badgelistItem (@index) when (@index > 0) {
.badgelistItem((@index - 1));
.t-BadgeList-item:nth-child(@{index}) .t-BadgeList-value {
border-color: darken(extract(@_colors, @index),5%);
color: darken(extract(@_colors, @index),5%);
}
.t-BadgeList-item:nth-child(@{index}) .t-BadgeList-wrap .t-BadgeList-value,
.t-BadgeList-item:nth-child(@{index}) .t-BadgeList-value a {
// box-shadow: 0 0 0 1px darken(nth($g-Colors,$i),5%) inset;
@bg: extract(@_colors, @index);
color: extract(@_colors_FG, @index);
background-color: @bg;
}
}
body {
.t-BadgeList--dash.t-BadgeList--coloredBG {
.badgelistDash (length(@_colors));
}
.t-BadgeList--circular.t-BadgeList--coloredBG {
.badgelistItem (length(@_colors));
}
}
.t-Cards--colorize {
.badgelistDash (length(@_colors));
}
.loopingClass (@index) when (@index > 0) {
.badgelistDash((@index - 1));
// @for $ i from 1 through length($ _colors) {
.t-Cards-item:nth-child(@{index}) .t-Card-wrap {
&:before {
// background-color: nth($ _colors, $ i);
background-color: extract(@_colors, @index);
}
}
@selector: ~".t-Cards-item:nth-child(@{index}) .t-Card-icon .t-Icon";
@{selector} {
background-color: extract(@_colors, @index);
};
// }
// // @for $ i from 1 through length($ _colors) {
// .t-Cards-item:nth-child(#{$i}) .t-Card-icon .t-Icon {
// background-color: extract(@_colors, @index);
//// background-color: nth($ _colors, $ i);
// }
// }
}
// ios-inspired 7 colors
.u-colors(@index) when (@index > 0) {
.u-colors(@index - 1);
@selector: ~".u-ColorBG--@{index}";
@{selector} {
background-color: extract(@_colors, @index);
};
@selectorz: ~".u-ColorFG--@{index}";
@{selectorz} {
color: extract(@_colors, @index);
};
}
.li-colors (@index) when (@index > 0) {
.badgelistItem((@index - 1));
&:nth-child(@{index}) {
background-color: extract(@_colors, @index);
}
}
.u-colors(length(@_colors));
/*@g_Accent-1-BG : blue;
@g_Accent-2-BG : red;
@g_Accent-3-BG : green;
@g_Accent-4-BG : yellow;
@g_Accent-5-BG : gray;
@g_Accent-1-FG : blue;
@g_Accent-2-FG : red;
@g_Accent-3-FG : green;
@g_Accent-4-FG : yellow;
@g_Accent-5-FG : gray;
*/
.a_GlobalColorRules(30, 10);
.a_GlobalColorRules(@counter, @varNumber) when (@counter > @varNumber) {
.a_GlobalColorRules(@counter - 1, @varNumber);
// Must keep in sync with UT's LESS!
@accentNumber : mod(@counter - 1, @varNumber) + 1;
@varName : %("g_Color-Palette-%s", @accentNumber);
@varName2 : %("g_Color-Palette-%s-FG", @accentNumber);
@darkenPct : (floor((@counter - 1) / @varNumber / 2) + 1) * 10%;
// 1 or -1
@darkenFactor : 2 * ( sin( 1rad * floor((@counter - 1) / @varNumber) * pi() / 2 ) - 0.5 );
.u-Color-@{counter}-BG {
&--txt { color : darken(@@varName, @darkenPct * @darkenFactor); }
&--bg { background-color : darken(@@varName, @darkenPct * @darkenFactor); }
&--fill { fill : darken(@@varName, @darkenPct * @darkenFactor); }
&--br { stroke : darken(@@varName, @darkenPct * @darkenFactor); border-color : darken(@@varName, @darkenPct * @darkenFactor); }
}
.u-Color-@{counter}-FG {
&--txt { color : lighten(@@varName2, @darkenPct); }
&--bg { background-color : lighten(@@varName2, @darkenPct); }
&--fill { fill : lighten(@@varName2, @darkenPct); }
&--br { stroke : lighten(@@varName2, @darkenPct); border-color : lighten(@@varName2, @darkenPct); }
}
}
.a_GlobalColorRules(@counter, @varNumber) when (@counter <= @varNumber) and (@counter > 0) {
.a_GlobalColorRules(@counter - 1, @varNumber);
// Must keep in sync with UT's LESS!
@accentNumber : mod(@counter - 1, @varNumber) + 1;
@varName : %("g_Color-Palette-%s", @accentNumber);
@varName2 : %("g_Color-Palette-%s-FG", @accentNumber);
.u-Color-@{counter}-BG {
&--txt { color : @@varName; }
&--bg { background-color : @@varName; }
&--fill { fill : @@varName; }
&--br { stroke : @@varName; border-color : @@varName; }
}
.u-Color-@{counter}-FG {
&--txt { color : @@varName2; }
&--bg { background-color : @@varName2; }
&--fill { fill : @@varName2; }
&--br { stroke : @@varName2; border-color : @@varName2; }
}
}
.u-focused {
box-shadow:
0 0 0 1px @g_Color-Palette-1,
0 0 1px 0px fadeout(@g_Color-Palette-1, 50%) !important;
outline: none;
}