/*
{
"translate": true,
"groups":[
{
"name": "UTR.LESS.GLOBAL_COLORS",
"common": true,
"sequence": 1
},
{
"name": "UTR.LESS.CONTAINERS",
"common": true,
"sequence": 2
},
{
"name": "UTR.LESS.NAVIGATION",
"common": true,
"sequence": 3
},
{
"name": "UTR.LESS.REGIONS",
"common": true,
"sequence": 4
},
{
"name": "UTR.LESS.BUTTONS",
"common": true,
"sequence": 5
},
{
"name": "UTR.LESS.FORMS",
"common": true,
"sequence": 6
},
{
"name": "UTR.LESS.STATES",
"common": true,
"sequence": 7
},
{
"name": "UTR.LESS.PALETTE",
"common": true,
"sequence": 8
},
{
"name": "UTR.LESS.INTERACTIVE_REPORTS",
"common": true,
"sequence": 9
},
{
"name": "UTR.LESS.LAYOUT",
"common": true,
"sequence": 10
}
]
}
*/
/*
{
"var" : "@g_Accent-BG",
"name" : "UTR.LESS.HEADER_ACCENT",
"type" : "color",
"style": "big",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
@g_Accent-BG: #0076df;
/*
{
"var" : "@g_Accent-OG",
"name" : "UTR.LESS.BODY_ACCENT",
"style": "big",
"type" : "color",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
// @g_Accent-OGX: contrast(@g_Accent-BG, darken(@g_Accent-BG, 55%), lighten(@g_Accent-BG, 55%), 43%);
// @g_Accent-OG: desaturate(@g_Accent-OGX,49%);
@g_Accent-OG: #FDFDFD;
@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, 85%), 100%), desaturate(lighten(@g_Body-BG, 85%), 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, 1.5%), lighten(@g_Accent-OG, 1.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, 85%), 100%), desaturate(lighten(@g_Actions-Col-BG, 85%), 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-OG, 3%);
/*
{
"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, 85%), 100%), desaturate(lighten(@g_Body-Title-BG, 85%), 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"
}
*/
/*
{
"var" : "@g_Color-Palette-1-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_1"
}
*/
/*
{
"var" : "@g_Color-Palette-2",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_2"
}
*/
/*
{
"var" : "@g_Color-Palette-2-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_2"
}
*/
/*
{
"var" : "@g_Color-Palette-3",
"name" : "UTR.LESS.COLOR_3",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_3"
}
*/
/*
{
"var" : "@g_Color-Palette-3-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup" : "UTR.LESS.COLOR_3"
}
*/
/*
{
"var" : "@g_Color-Palette-4",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_4"
}
*/
/*
{
"var" : "@g_Color-Palette-4-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_4"
}
*/
/*
{
"var" : "@g_Color-Palette-5",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_5"
}
*/
/*
{
"var" : "@g_Color-Palette-5-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_5"
}
*/
/*
{
"var" : "@g_Color-Palette-6",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_6"
}
*/
/*
{
"var" : "@g_Color-Palette-6-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_6"
}
*/
/*
{
"var" : "@g_Color-Palette-7",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_7"
}
*/
/*
{
"var" : "@g_Color-Palette-7-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_7"
}
*/
/*
{
"var" : "@g_Color-Palette-8",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_8"
}
*/
/*
{
"var" : "@g_Color-Palette-8-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_8"
}
*/
/*
{
"var" : "@g_Color-Palette-9",
"name" : "UTR.LESS.COLOR_9",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_9"
}
*/
/*
{
"var" : "@g_Color-Palette-9-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_9"
}
*/
/*
{
"var" : "@g_Color-Palette-10",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_10"
}
*/
/*
{
"var" : "@g_Color-Palette-10-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_10"
}
*/
/*
{
"var" : "@g_Color-Palette-11",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_11"
}
*/
/*
{
"var" : "@g_Color-Palette-11-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_11"
}
*/
/*
{
"var" : "@g_Color-Palette-12",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_12"
}
*/
/*
{
"var" : "@g_Color-Palette-12-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_12"
}
*/
/*
{
"var" : "@g_Color-Palette-13",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_13"
}
*/
/*
{
"var" : "@g_Color-Palette-13-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_13"
}
*/
/*
{
"var" : "@g_Color-Palette-14",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_14"
}
*/
/*
{
"var" : "@g_Color-Palette-14-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_14"
}
*/
/*
{
"var" : "@g_Color-Palette-15",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_15"
}
*/
/*
{
"var" : "@g_Color-Palette-15-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.PALETTE",
"subgroup": "UTR.LESS.COLOR_15"
}
*/
@g_Color-Palette-1 : #309FDB;
@g_Color-Palette-2 : #13B6CF;
@g_Color-Palette-3 : #2EBFBC;
@g_Color-Palette-4 : #3CAF85;
@g_Color-Palette-5 : #81BB5F;
@g_Color-Palette-6 : #DDDE53;
@g_Color-Palette-7 : #FBCE4A;
@g_Color-Palette-8 : #ED813E;
@g_Color-Palette-9 : #E95B54;
@g_Color-Palette-10: #E85D88;
@g_Color-Palette-11: #CA589D;
@g_Color-Palette-12: #854E9B;
@g_Color-Palette-13: #5A68AD;
@g_Color-Palette-14: #AFBAC5;
@g_Color-Palette-15: #6E8598;
@g_Color-Palette-16: mix(#FFF, @g_Color-Palette-1, 20%);
@g_Color-Palette-17: mix(#FFF, @g_Color-Palette-2, 20%);
@g_Color-Palette-18: mix(#FFF, @g_Color-Palette-3, 20%);
@g_Color-Palette-19: mix(#FFF, @g_Color-Palette-4, 20%);
@g_Color-Palette-20: mix(#FFF, @g_Color-Palette-5, 20%);
@g_Color-Palette-21: mix(#FFF, @g_Color-Palette-6, 20%);
@g_Color-Palette-22: mix(#FFF, @g_Color-Palette-7, 20%);
@g_Color-Palette-23: mix(#FFF, @g_Color-Palette-8, 20%);
@g_Color-Palette-24: mix(#FFF, @g_Color-Palette-9, 20%);
@g_Color-Palette-25: mix(#FFF, @g_Color-Palette-10, 20%);
@g_Color-Palette-26: mix(#FFF, @g_Color-Palette-11, 20%);
@g_Color-Palette-27: mix(#FFF, @g_Color-Palette-12, 20%);
@g_Color-Palette-28: mix(#FFF, @g_Color-Palette-13, 20%);
@g_Color-Palette-29: mix(#FFF, @g_Color-Palette-14, 20%);
@g_Color-Palette-30: mix(#FFF, @g_Color-Palette-15, 20%);
@g_Color-Palette-31: saturate(@g_Color-Palette-1, 15%);
@g_Color-Palette-32: saturate(@g_Color-Palette-2, 15%);
@g_Color-Palette-33: saturate(@g_Color-Palette-3, 15%);
@g_Color-Palette-34: saturate(@g_Color-Palette-4, 15%);
@g_Color-Palette-35: saturate(@g_Color-Palette-5, 15%);
@g_Color-Palette-36: saturate(@g_Color-Palette-6, 15%);
@g_Color-Palette-37: saturate(@g_Color-Palette-7, 15%);
@g_Color-Palette-38: saturate(@g_Color-Palette-8, 15%);
@g_Color-Palette-39: saturate(@g_Color-Palette-9, 15%);
@g_Color-Palette-40: saturate(@g_Color-Palette-10, 15%);
@g_Color-Palette-41: saturate(@g_Color-Palette-11, 15%);
@g_Color-Palette-42: saturate(@g_Color-Palette-12, 15%);
@g_Color-Palette-43: saturate(@g_Color-Palette-13, 15%);
@g_Color-Palette-44: saturate(@g_Color-Palette-14, 15%);
@g_Color-Palette-45: saturate(@g_Color-Palette-15, 15%);
@g_Color-Palette-1-FG: fade(contrast(@g_Color-Palette-1, darken(@g_Color-Palette-1, 50%), lighten(@g_Color-Palette-1, 50%)), 100%);
@g_Color-Palette-2-FG: fade(contrast(@g_Color-Palette-2, darken(@g_Color-Palette-2, 50%), lighten(@g_Color-Palette-2, 50%)), 100%);
@g_Color-Palette-3-FG: fade(contrast(@g_Color-Palette-3, darken(@g_Color-Palette-3, 50%), lighten(@g_Color-Palette-3, 50%)), 100%);
@g_Color-Palette-4-FG: fade(contrast(@g_Color-Palette-4, darken(@g_Color-Palette-4, 50%), lighten(@g_Color-Palette-4, 50%)), 100%);
@g_Color-Palette-5-FG: fade(contrast(@g_Color-Palette-5, darken(@g_Color-Palette-5, 50%), lighten(@g_Color-Palette-5, 50%)), 100%);
@g_Color-Palette-6-FG: fade(contrast(@g_Color-Palette-6, darken(@g_Color-Palette-6, 50%), lighten(@g_Color-Palette-6, 50%)), 100%);
@g_Color-Palette-7-FG: fade(contrast(@g_Color-Palette-7, darken(@g_Color-Palette-7, 50%), lighten(@g_Color-Palette-7, 50%)), 100%);
@g_Color-Palette-8-FG: fade(contrast(@g_Color-Palette-8, darken(@g_Color-Palette-8, 50%), lighten(@g_Color-Palette-8, 50%)), 100%);
@g_Color-Palette-9-FG: fade(contrast(@g_Color-Palette-9, darken(@g_Color-Palette-9, 50%), lighten(@g_Color-Palette-9, 50%)), 100%);
@g_Color-Palette-10-FG: fade(contrast(@g_Color-Palette-10, darken(@g_Color-Palette-10, 50%), lighten(@g_Color-Palette-10, 50%)), 100%);
@g_Color-Palette-11-FG: fade(contrast(@g_Color-Palette-11, darken(@g_Color-Palette-11, 50%), lighten(@g_Color-Palette-11, 50%)), 100%);
@g_Color-Palette-12-FG: fade(contrast(@g_Color-Palette-12, darken(@g_Color-Palette-12, 50%), lighten(@g_Color-Palette-12, 50%)), 100%);
@g_Color-Palette-13-FG: fade(contrast(@g_Color-Palette-13, darken(@g_Color-Palette-13, 50%), lighten(@g_Color-Palette-13, 50%)), 100%);
@g_Color-Palette-14-FG: fade(contrast(@g_Color-Palette-14, darken(@g_Color-Palette-14, 50%), lighten(@g_Color-Palette-14, 50%)), 100%);
@g_Color-Palette-15-FG: fade(contrast(@g_Color-Palette-15, darken(@g_Color-Palette-15, 50%), lighten(@g_Color-Palette-15, 50%)), 100%);
@g_Color-Palette-16-FG: fade(contrast(@g_Color-Palette-16, darken(@g_Color-Palette-16, 50%), lighten(@g_Color-Palette-16, 50%)), 100%);
@g_Color-Palette-17-FG: fade(contrast(@g_Color-Palette-17, darken(@g_Color-Palette-17, 50%), lighten(@g_Color-Palette-17, 50%)), 100%);
@g_Color-Palette-18-FG: fade(contrast(@g_Color-Palette-18, darken(@g_Color-Palette-18, 50%), lighten(@g_Color-Palette-18, 50%)), 100%);
@g_Color-Palette-19-FG: fade(contrast(@g_Color-Palette-19, darken(@g_Color-Palette-19, 50%), lighten(@g_Color-Palette-19, 50%)), 100%);
@g_Color-Palette-20-FG: fade(contrast(@g_Color-Palette-20, darken(@g_Color-Palette-20, 50%), lighten(@g_Color-Palette-20, 50%)), 100%);
@g_Color-Palette-21-FG: fade(contrast(@g_Color-Palette-21, darken(@g_Color-Palette-21, 50%), lighten(@g_Color-Palette-21, 50%)), 100%);
@g_Color-Palette-22-FG: fade(contrast(@g_Color-Palette-22, darken(@g_Color-Palette-22, 50%), lighten(@g_Color-Palette-22, 50%)), 100%);
@g_Color-Palette-23-FG: fade(contrast(@g_Color-Palette-23, darken(@g_Color-Palette-23, 50%), lighten(@g_Color-Palette-23, 50%)), 100%);
@g_Color-Palette-24-FG: fade(contrast(@g_Color-Palette-24, darken(@g_Color-Palette-24, 50%), lighten(@g_Color-Palette-24, 50%)), 100%);
@g_Color-Palette-25-FG: fade(contrast(@g_Color-Palette-25, darken(@g_Color-Palette-25, 50%), lighten(@g_Color-Palette-25, 50%)), 100%);
@g_Color-Palette-26-FG: fade(contrast(@g_Color-Palette-26, darken(@g_Color-Palette-26, 50%), lighten(@g_Color-Palette-26, 50%)), 100%);
@g_Color-Palette-27-FG: fade(contrast(@g_Color-Palette-27, darken(@g_Color-Palette-27, 50%), lighten(@g_Color-Palette-27, 50%)), 100%);
@g_Color-Palette-28-FG: fade(contrast(@g_Color-Palette-28, darken(@g_Color-Palette-28, 50%), lighten(@g_Color-Palette-28, 50%)), 100%);
@g_Color-Palette-29-FG: fade(contrast(@g_Color-Palette-29, darken(@g_Color-Palette-29, 50%), lighten(@g_Color-Palette-29, 50%)), 100%);
@g_Color-Palette-30-FG: fade(contrast(@g_Color-Palette-30, darken(@g_Color-Palette-30, 50%), lighten(@g_Color-Palette-30, 50%)), 100%);
@g_Color-Palette-31-FG: fade(contrast(@g_Color-Palette-31, darken(@g_Color-Palette-31, 50%), lighten(@g_Color-Palette-31, 50%)), 100%);
@g_Color-Palette-32-FG: fade(contrast(@g_Color-Palette-32, darken(@g_Color-Palette-32, 50%), lighten(@g_Color-Palette-32, 50%)), 100%);
@g_Color-Palette-33-FG: fade(contrast(@g_Color-Palette-33, darken(@g_Color-Palette-33, 50%), lighten(@g_Color-Palette-33, 50%)), 100%);
@g_Color-Palette-34-FG: fade(contrast(@g_Color-Palette-34, darken(@g_Color-Palette-34, 50%), lighten(@g_Color-Palette-34, 50%)), 100%);
@g_Color-Palette-35-FG: fade(contrast(@g_Color-Palette-35, darken(@g_Color-Palette-35, 50%), lighten(@g_Color-Palette-35, 50%)), 100%);
@g_Color-Palette-36-FG: fade(contrast(@g_Color-Palette-36, darken(@g_Color-Palette-36, 50%), lighten(@g_Color-Palette-36, 50%)), 100%);
@g_Color-Palette-37-FG: fade(contrast(@g_Color-Palette-37, darken(@g_Color-Palette-37, 50%), lighten(@g_Color-Palette-37, 50%)), 100%);
@g_Color-Palette-38-FG: fade(contrast(@g_Color-Palette-38, darken(@g_Color-Palette-38, 50%), lighten(@g_Color-Palette-38, 50%)), 100%);
@g_Color-Palette-39-FG: fade(contrast(@g_Color-Palette-39, darken(@g_Color-Palette-39, 50%), lighten(@g_Color-Palette-39, 50%)), 100%);
@g_Color-Palette-40-FG: fade(contrast(@g_Color-Palette-40, darken(@g_Color-Palette-40, 50%), lighten(@g_Color-Palette-40, 50%)), 100%);
@g_Color-Palette-41-FG: fade(contrast(@g_Color-Palette-41, darken(@g_Color-Palette-41, 50%), lighten(@g_Color-Palette-41, 50%)), 100%);
@g_Color-Palette-42-FG: fade(contrast(@g_Color-Palette-42, darken(@g_Color-Palette-42, 50%), lighten(@g_Color-Palette-42, 50%)), 100%);
@g_Color-Palette-43-FG: fade(contrast(@g_Color-Palette-43, darken(@g_Color-Palette-43, 50%), lighten(@g_Color-Palette-43, 50%)), 100%);
@g_Color-Palette-44-FG: fade(contrast(@g_Color-Palette-44, darken(@g_Color-Palette-44, 50%), lighten(@g_Color-Palette-44, 50%)), 100%);
@g_Color-Palette-45-FG: fade(contrast(@g_Color-Palette-45, darken(@g_Color-Palette-45, 50%), lighten(@g_Color-Palette-45, 50%)), 100%);
@_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,
@g_Color-Palette-11,
@g_Color-Palette-12,
@g_Color-Palette-13,
@g_Color-Palette-14,
@g_Color-Palette-15,
@g_Color-Palette-16,
@g_Color-Palette-17,
@g_Color-Palette-18,
@g_Color-Palette-19,
@g_Color-Palette-20,
@g_Color-Palette-21,
@g_Color-Palette-22,
@g_Color-Palette-23,
@g_Color-Palette-24,
@g_Color-Palette-25,
@g_Color-Palette-26,
@g_Color-Palette-27,
@g_Color-Palette-28,
@g_Color-Palette-29,
@g_Color-Palette-30,
mix(#000, @g_Color-Palette-31, 15%),
mix(#000, @g_Color-Palette-32, 15%),
mix(#000, @g_Color-Palette-33, 15%),
mix(#000, @g_Color-Palette-34, 15%),
mix(#000, @g_Color-Palette-35, 15%),
mix(#000, @g_Color-Palette-36, 15%),
mix(#000, @g_Color-Palette-37, 15%),
mix(#000, @g_Color-Palette-38, 15%),
mix(#000, @g_Color-Palette-39, 15%),
mix(#000, @g_Color-Palette-40, 15%),
mix(#000, @g_Color-Palette-41, 15%),
mix(#000, @g_Color-Palette-42, 15%),
mix(#000, @g_Color-Palette-43, 15%),
mix(#000, @g_Color-Palette-44, 15%),
mix(#000, @g_Color-Palette-45, 15%);
@_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,
@g_Color-Palette-11-FG,
@g_Color-Palette-12-FG,
@g_Color-Palette-13-FG,
@g_Color-Palette-14-FG,
@g_Color-Palette-15-FG,
@g_Color-Palette-16-FG,
@g_Color-Palette-17-FG,
@g_Color-Palette-18-FG,
@g_Color-Palette-19-FG,
@g_Color-Palette-20-FG,
@g_Color-Palette-21-FG,
@g_Color-Palette-22-FG,
@g_Color-Palette-23-FG,
@g_Color-Palette-24-FG,
@g_Color-Palette-25-FG,
@g_Color-Palette-26-FG,
@g_Color-Palette-27-FG,
@g_Color-Palette-28-FG,
@g_Color-Palette-29-FG,
@g_Color-Palette-30-FG,
@g_Color-Palette-31-FG,
@g_Color-Palette-32-FG,
@g_Color-Palette-33-FG,
@g_Color-Palette-34-FG,
@g_Color-Palette-35-FG,
@g_Color-Palette-36-FG,
@g_Color-Palette-37-FG,
@g_Color-Palette-38-FG,
@g_Color-Palette-39-FG,
@g_Color-Palette-40-FG,
@g_Color-Palette-41-FG,
@g_Color-Palette-42-FG,
@g_Color-Palette-43-FG,
@g_Color-Palette-44-FG,
@g_Color-Palette-45-FG;
/* 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, 40%), lighten(@g_Accent-BG, 40%), 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: #3BAA2C;
/*
{
"var" : "@g_Success-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.SUCCESS"
}
*/
@g_Success-FG: #FFF;
/*
{
"var" : "@g_Info-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.STATES",
"subgroup": "UTR.LESS.INFO"
}
*/
@g_Info-BG: #0076df;
/*
{
"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: #FBCE4A;
/*
{
"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: #f44336;
/*
{
"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%);
// Alert Colored Backgrounds
@l_Alert-Warning-BG: lighten(@g_Warning-BG, 30%);
@l_Alert-Success-BG: lighten(@g_Success-BG, 55%);
@l_Alert-Danger-BG: lighten(@g_Danger-BG, 40%);
@l_Alert-Info-BG: lighten(@g_Info-BG, 55%);
/*
{
"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, 4%);
/*
{
"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, 85%), 100%), desaturate(lighten(@g_Region-Header-BG, 85%), 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, 85%), 100%), desaturate(lighten(@g_Region-BG, 85%), 50%)), 100%);
@g_Region-FG-Light: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 60%), 100%), desaturate(lighten(@g_Region-BG, 60%), 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, 2.5%), lighten(@g_Region-BG, 2.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, 85%), 100%), desaturate(lighten(@g_Form-Item-BG, 85%), 50%)), 100%);
/*
{
"var" : "@g_Form-Label",
"name" : "UTR.LESS.LABEL",
"type" : "color",
"group": "UTR.LESS.FORMS"
}
*/
@g_Form-Label: @g_Region-FG;
/*
{
"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;
// Form Item Focus and Hover
@l_Form-Item-focusBG: lighten(@g_Form-Item-BG, 10%);
@l_Form-Item-hoverBG: lighten(@g_Form-Item-BG, 5%);
// BEGIN NAVIGATION
/*
{
"var": "@g_Nav_Style",
"name": "Navigation Style",
"type": "select",
"options": [
{
"d": "Light",
"r": "light"
},
{
"d": "Dark (Default)",
"r": "dark"
}
],
"group": "UTR.LESS.NAVIGATION"
}
*/
@g_Nav_Style: dark;
/*
{
"var" : "@g_Nav-Active-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.SELECTED_STATE"
}
*/
.setNavigationStyle() when (@g_Nav_Style=light) {
@g_Nav-BGX: contrast(@g_Accent-BG, darken(@g_Accent-BG, 57%), lighten(@g_Accent-BG, 57%), 43%);
@g_Nav-BG: desaturate(@g_Nav-BGX, 48%);
@g_Nav-Active-BG: darken(@g_Nav-BG, 3%);
.t-PageBody--leftNav .t-Body-nav {
border-right: 1px solid rgba(0, 0, 0, .075);
.u-RTL & {
border-right-width: 0;
border-left: 1px solid rgba(0, 0, 0, .075);
}
}
}
.setNavigationStyle() when (@g_Nav_Style=dark) {
@g_Nav-BGX: desaturate(@g_Accent-BG, 85%);
@g_Nav-BG: darken(@g_Nav-BGX, 20%);
@g_Nav-Active-BG: darken(@g_Nav-BG, 10%);
}
.setNavigationStyle();
/*
{
"var" : "@g_Nav-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.BODY"
}
*/
/*
{
"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, 80%), lighten(@g_Nav-BG, 80%), 43%);
/*
{
"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, 95%), lighten(@g_Nav-Active-BG, 95%), 43%);
/*
{
"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-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;
/* Light and Dark Navigation Handling
========================================================================== */
/*
{
"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_Nav-Accent-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.ACCENT"
}
*/
@g_Nav-Accent-BG: @g_Accent-BG;
/*
{
"var" : "@g_Nav-Accent-FG",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.ACCENT"
}
*/
@g_Nav-Accent-FG: @g_Accent-FG;
/*
{
"var" : "@g_Nav-Badge-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.BADGE"
}
*/
@g_Nav-Badge-BG: @g_Accent-BG;
/*
{
"var" : "@g_Nav-Badge-FG",
"name" : "UTR.LESS.TEXT",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.BADGE"
}
*/
@g_Nav-Badge-FG: @g_Accent-FG;
/*
{
"var" : "@g_NavBarMenu-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.MENU"
}
*/
@g_NavBarMenu-BG: #FFFFFF;
/*
{
"var" : "@g_NavBarMenu-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.MENU"
}
*/
@g_NavBarMenu-FG: fade(contrast(@g_NavBarMenu-BG, desaturate(darken(@g_NavBarMenu-BG, 85%), 100%), desaturate(lighten(@g_NavBarMenu-BG, 85%), 50%)), 100%);
/*
{
"var" : "@g_NavBarMenu-Active-BG",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.MENU_ITEM_HOVER"
}
*/
@g_NavBarMenu-Active-BG: @g_Accent-BG;
/*
{
"var" : "@g_NavBarMenu-Active-FG",
"name" : "UTR.LESS.FOREGROUND",
"type" : "color",
"group": "UTR.LESS.NAVIGATION",
"subgroup": "UTR.LESS.MENU_ITEM_HOVER"
}
*/
@g_NavBarMenu-Active-FG: @g_Accent-FG;
/*
{
"var" : "@g_Focus",
"name" : "UTR.LESS.FOCUS_OUTLINE",
"type" : "color",
"group": "UTR.LESS.GLOBAL_COLORS"
}
*/
@g_Focus: @g_Accent-BG;
@g_Focus-tmp: contrast(@g_Focus, darken(@g_Focus, 85%), lighten(@g_Focus, 85%), 43%);
@g_Focus-FG: fade(@g_Focus-tmp, 100%);
/*
{
"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) {
transform: @string;
}
.translate3d-less(@x, @y: 0, @z: 0) {
transform: translate3d(@x, @y, @z);
}
.apex-direction-left(@val) {
:not(.u-RTL) & {
left: @val;
}
.u-RTL & {
right: @val;
}
}
.apex-direction-margin-left(@val) {
:not(.u-RTL) & {
margin-left: @val;
}
.u-RTL & {
margin-right: @val;
}
}
.apex-direction-right(@val) {
:not(.u-RTL) & {
right: @val;
}
.u-RTL & {
left: @val;
}
}
.apex-direction-margin-right(@val) {
:not(.u-RTL) & {
margin-right: @val;
}
.u-RTL & {
margin-left: @val;
}
}
.apex-direction-translate(@val) {
:not(.u-RTL) & {
.translate3d-less(@val, 0, 0);
}
.u-RTL & {
.translate3d-less(-@val, 0, 0);
}
}
/* Moving Button Variables to Main 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%);
/* Overlay
========================================================================== */
@g_Overlay-bg: fade(#000, 25);
@_color-scheme: light;
/* Base Shades
========================================================================== */
@_base: #000;
@_base-bg: #fff;
@_base-tint: @g_Accent-BG;
@_base-shade-0: @_base-bg;
@_base-shade-1: mix(@_base, @_base-bg, 2.5%); // #f9f9f9
@_base-shade-2: mix(@_base, @_base-bg, 6%); // #f0f0f0
@_base-shade-3: mix(@_base, @_base-bg, 12%); // #e0e0e0
@_base-shade-4: mix(@_base, @_base-bg, 18%); // #d1d1d1
@_base-shade-5: mix(@_base, @_base-bg, 37%); // #a0a0a0
@_base-shade-6: mix(@_base, @_base-bg, 56%); // #707070
@_base-shade-7: mix(@_base, @_base-bg, 60%); // #666
@_base-shade-8: mix(@_base, @_base-bg, 75%); // #404040
@_base-shade-9: mix(@_base, @_base-bg, 85%); // #212121
@_base-shade-10: @_base;
@_base-alpha-0: fade(@_base, 0);
@_base-alpha-1: fade(@_base, 2.5);
@_base-alpha-2: fade(@_base, 5);
@_base-alpha-3: fade(@_base, 7.5);
@_base-alpha-4: fade(@_base, 10);
@_base-alpha-5: fade(@_base, 15);
@_base-alpha-6: fade(@_base, 20);
@_base-alpha-7: fade(@_base, 25);
@_base-alpha-8: fade(@_base, 40);
@_base-alpha-9: fade(@_base, 50);
@_base-alpha-10: fade(@_base, 65);
@_base-alpha-11: fade(@_base, 75);
@_base-alpha-12: fade(@_base, 95);
@_base-alpha-13: fade(@_base, 100);
@_base-bg-alpha-0: fade(@_base-bg, 0);
@_base-bg-alpha-1: fade(@_base-bg, 2.5);
@_base-bg-alpha-2: fade(@_base-bg, 5);
@_base-bg-alpha-3: fade(@_base-bg, 7.5);
@_base-bg-alpha-4: fade(@_base-bg, 10);
@_base-bg-alpha-5: fade(@_base-bg, 15);
@_base-bg-alpha-6: fade(@_base-bg, 20);
@_base-bg-alpha-7: fade(@_base-bg, 25);
@_base-bg-alpha-8: fade(@_base-bg, 40);
@_base-bg-alpha-9: fade(@_base-bg, 50);
@_base-bg-alpha-10: fade(@_base-bg, 65);
@_base-bg-alpha-11: fade(@_base-bg, 75);
@_base-bg-alpha-12: fade(@_base-bg, 95);
@_base-bg-alpha-13: fade(@_base-bg, 100);
@_base-shadow-0: fade(#000, 0);
@_base-shadow-1: fade(#000, 2.5);
@_base-shadow-2: fade(#000, 5);
@_base-shadow-3: fade(#000, 7.5);
@_base-shadow-4: fade(#000, 10);
@_base-shadow-5: fade(#000, 15);
@_base-shadow-6: fade(#000, 20);
@_base-shadow-7: fade(#000, 25);
@_base-shadow-8: fade(#000, 40);
@_base-shadow-9: fade(#000, 50);
@_base-shadow-10: fade(#000, 65);
@_base-shadow-11: fade(#000, 75);
@_base-shadow-12: fade(#000, 95);
@_base-shadow-13: fade(#000, 100);
// IG Body
@GVBody_bg: @g_Region-BG;
// Report Controls
@reportControl-savedReport-icon_bg: #4AA4EC;
@reportControl-savedReport-hover_bg: #ecf5fd;
@reportControl-search-icon_bg: #4AA4EC;
@reportControl-search-hover_bg: #ecf5fd;
@reportControl-filter-icon_bg: #24CB7F;
@reportControl-filter-hover_bg: #dcf9ec;
@reportControl-controlBreak-icon_bg: #3B83BD;
@reportControl-controlBreak-hover_bg: #e6f0f7;
@reportControl-groupBy-icon_bg: #3B83BD;
@reportControl-groupBy-hover_bg: #e6f0f7;
@reportControl-aggregate-icon_bg: #3B83BD;
@reportControl-aggregate-hover_bg: #e6f0f7;
@reportControl-highlight-icon_bg: #FFBE2A;
@reportControl-highlight-hover_bg: #fff0cd;
@reportControl-flashback-icon_bg: #9EA7AD;
@reportControl-flashback-hover_bg: #d5d9dc;
@reportControl-chart-icon_bg: #3B83BD;
@reportControl-chart-hover_bg: #85b4d9;
@reportControl-pivot-icon_bg: #9EA7AD;
@reportControl-pivot-hover_bg: #d5d9dc;
@reportControl-invalidSettings-icon_bg: #BDC3C7;
@reportControl-invalidSettings-hover_bg: #f4f5f6;
@reportControl-inactiveSettings-icon_bg: #BDC3C7;
@reportControl-inactiveSettings-hover_bg: #f4f5f6;
@g_Nav_Style: dark;
@g_Accent-BG: #505f6d;
@g_Accent-OG: #ececec;
@g_Body-Title-BG: #dee1e4;
@g_Link-Base: #337ac0;
@g_Body-BG: #f5f5f5;
.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);
}
.t-AVPList-item {
box-shadow: 0 -0.1rem 0 @_base-alpha-2 inset;
}
.t-AVPList-label,
.t-AVPList-value {
box-shadow: 0 0.1rem @_base-alpha-3 inset;
}
.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: @g_Body-Text;
.t-Body-info & {
color: @g_Body-Title-FG;
}
.t-Region & {
color: @g_Region-FG;
}
}
.t-AVPList + .t-Report-pagination {
border-top-color: @_base-alpha-2;
}
:root {
--a-palette-danger: @g_Danger-BG;
--a-palette-danger-shade: @l_Alert-Danger-BG;
}
/**
* Colorized Background
*/
.t-Alert--wizard,
.t-Alert--horizontal {
border-radius: @g_Container-BorderRadius;
border-color: @_base-alpha-4;
.t-Alert-icon {
border-top-left-radius: @g_Container-BorderRadius;
border-bottom-left-radius: @g_Container-BorderRadius;
}
}
.t-Alert--colorBG {
&.t-Alert--warning,
&.t-Alert--yellow {
background-color: @l_Alert-Warning-BG;
color: fade(contrast(@l_Alert-Warning-BG, desaturate(darken(@l_Alert-Warning-BG, 100%), 100%), desaturate(lighten(@l_Alert-Warning-BG, 100%), 50%)), 100%);
}
&.t-Alert--success {
background-color: @l_Alert-Success-BG;
color: fade(contrast(@l_Alert-Success-BG, desaturate(darken(@l_Alert-Success-BG, 100%), 100%), desaturate(lighten(@l_Alert-Success-BG, 100%), 50%)), 100%);
}
&.t-Alert--danger,
&.t-Alert--red {
background-color: @l_Alert-Danger-BG;
color: fade(contrast(@l_Alert-Danger-BG, desaturate(darken(@l_Alert-Danger-BG, 100%), 100%), desaturate(lighten(@l_Alert-Danger-BG, 100%), 50%)), 100%);
}
&.t-Alert--info {
background-color: @l_Alert-Info-BG;
color: fade(contrast(@l_Alert-Info-BG, desaturate(darken(@l_Alert-Info-BG, 100%), 100%), desaturate(lighten(@l_Alert-Info-BG, 100%), 50%)), 100%);
}
}
.t-Alert-icon .t-Icon {
color: #FFF;
}
/**
* Modifier: Warning
*/
.t-Alert--warning,
.t-Alert--yellow {
.t-Alert-icon .t-Icon {
color: @g_Warning-BG;
}
&.t-Alert--horizontal .t-Alert-icon {
background-color: fadeout(@g_Warning-BG, 85%);
}
}
/**
* Modifier: Success
*/
.t-Alert--success {
.t-Alert-icon .t-Icon {
color: @g_Success-BG;
}
&.t-Alert--horizontal .t-Alert-icon {
background-color: fadeout(@g_Success-BG, 85%);
}
}
/**
* Modifier: Information
*/
.t-Alert--info {
.t-Alert-icon .t-Icon {
color: @g_Info-BG;
}
&.t-Alert--horizontal .t-Alert-icon {
background-color: fadeout(@g_Info-BG, 85%);
}
}
/**
* Modifier: Success
*/
.t-Alert--danger,
.t-Alert--red {
.t-Alert-icon .t-Icon {
color: @g_Danger-BG;
}
&.t-Alert--horizontal .t-Alert-icon {
background-color: fadeout(@g_Danger-BG, 85%);
}
}
.t-Alert--wizard {
.t-Alert-inset {
border-radius: @g_Container-BorderRadius;
}
}
.t-Alert--horizontal,
.t-Alert--wizard {
background-color: @g_Region-BG;
color: @g_Region-FG;
}
/* Page Level Alerts (from APEX)
========================================================================== */
.t-Alert--page {
box-shadow: 0 0 0 0.1rem @_base-alpha-4 inset, 0 3px 9px -2px @_base-shadow-4;
.a-Notification-item:before {
background-color: @_base-alpha-9;
}
&.t-Alert--success {
background-color: fadeout(@g_Success-BG, 10%);
color: @g_Success-FG;
.t-Alert-icon {
background-color: transparent;
color: @g_Success-FG;
.t-Icon {
color: inherit;
}
}
.t-Button--closeAlert {
color: @g_Success-FG !important;
}
}
&.t-Alert--warning {
background-color: @g_Warning-BG;
color: @g_Warning-FG;
.t-Alert-icon .t-Icon {
color: inherit;
}
a {
color: inherit;
text-decoration: underline;
}
.a-Notification-item:before {
background-color: currentColor;
}
}
}
/* Alerts on Login Page
========================================================================== */
.t-Login-containerBody .t-Body-alert {
width: 460px;
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Badges
========================================================================== */
/* ==========================================================================
Badge Modifiers
========================================================================== */
.t-Badge--basic {
box-shadow: 0 0 0 0.1rem @_base-bg-alpha-1 inset;
}
.t-Badge--orb {
&:before {
box-shadow: 0 0 0 0.1rem @_base-bg-alpha-2 inset;
}
}
// /* ==========================================================================
// Badge States
// ========================================================================== */
// @g_Base-BG: #FFFFFF;
// @g_Warning-BG: #FFBE2A;
// @g_Danger-BG: #F54B21;
// @g_Primary-BG: #AAC7DA;
// @g_Info-BG: #8ABCEB;
// @g_Hot-BG: #0572CE;
// @g_Success-BG: #2ECC71;
// /* Default (Normal)
// ========================================================================== */
// /* Primary
// ========================================================================== */
// .t-Badge--orb.is-primary:before {
// background-color: @g_Primary-BG;
// }
// .t-Badge--basic.is-primary {
// background-color: lighten(@g_Primary-BG, 23%);
// color: #404040;
// }
// /* Info
// ========================================================================== */
// .t-Badge--orb.is-info:before {
// background-color: @g_Info-BG;
// }
// .t-Badge--basic.is-info {
// background-color: lighten(@g_Info-BG, 23%);
// // color: darken(@g_Info-BG,35%);
// color: #404040;
// }
// /* Warning
// ========================================================================== */
// .t-Badge--orb.is-warning:before {
// background-color: @g_Warning-BG;
// }
// .t-Badge--basic.is-warning {
// background-color: lighten(@g_Warning-BG, 35%);
// color: darken(@g_Warning-BG, 35%);
// }
// /* Success
// ========================================================================== */
// .t-Badge--orb.is-success:before {
// background-color: @g_Success-BG;
// }
// .t-Badge--basic.is-success {
// background-color: lighten(@g_Success-BG, 40%);
// color: darken(@g_Success-BG, 35%);
// }
// /* Danger
// ========================================================================== */
// .t-Badge--orb.is-danger:before {
// background-color: @g_Danger-BG;
// }
// .t-Badge--basic.is-danger {
// background-color: lighten(@g_Danger-BG, 35%);
// color: darken(@g_Danger-BG, 35%);
// }
// /* Complete
// ========================================================================== */
// .t-Badge--orb.is-complete:before {
// background-color: #E0E0E0;
// }
// .t-Badge--basic.is-complete {
// background-color: #E0E0E0;
// color: #404040;
// }
/* Null / Unknown
========================================================================== */
.t-Badge--orb.is-null:before {
color: #707070;
}
.t-Badge--basic.is-null {
color: #707070;
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Badge List
========================================================================== */
.t-BadgeList,
.t-BadgeList:not(.u-colors) a .t-BadgeList-label {
color: @g_Region-FG;
}
.t-BadgeList--circular {
.t-BadgeList-value {
box-shadow: 0 0 0 1px fadeout(@g_Region-FG, 90%) inset;
background-color: @g_Region-BG;
}
a.t-BadgeList-wrap:hover .t-BadgeList-value {
box-shadow: 0 0 0 4px @g_Accent-BG inset;
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
}
.t-BadgeList--dash a.t-BadgeList-wrap:focus,
.t-BadgeList--dash .t-BadgeList-wrap:focus-within,
.t-BadgeList--circular a.t-BadgeList-wrap:focus .t-BadgeList-value,
.t-BadgeList--circular .t-BadgeList-value a:focus {
box-shadow: 0 0 0 1px @g_Focus inset, 0 0 0 2px @g_Region-BG inset;
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-BadgeList--dash .t-BadgeList-wrap:focus-within,
.t-BadgeList--circular .t-BadgeList-value a:hover {
background-color: @g_Accent-BG !important;
color: @g_Accent-FG !important;
}
.t-BadgeList--dash .t-BadgeList-value a:focus,
.t-BadgeList--dash a.t-BadgeList-wrap:focus-within .t-BadgeList-label {
color: @g_Accent-FG;
}
.t-BadgeList-item:after,
.t-BadgeList-item:before {
background-color: @_base-alpha-2;
}
/* ==========================================================================
Dashboard
========================================================================== */
.t-BadgeList--dash {
a.t-BadgeList-wrap:hover {
&:before {
background-color: @_base-alpha-4;
}
}
}
/* ==========================================================================
Layout Modifiers
========================================================================== */
/* Color Handling
========================================================================== */
.t-BadgeList.u-colors {
&.t-BadgeList--circular {
.t-BadgeList-wrap:before {
background-color: @g_Region-BG;
}
.t-BadgeList-label {
color: @g_Region-FG;
}
}
.t-BadgeList-value a {
color: inherit;
}
}
.a-BarChart {
.a-BarChart-item {
box-shadow: 0 -0.1rem 0 @_base-alpha-2 inset;
&: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: @_base-alpha-1;
}
}
.a-BarChart--classic {
.a-BarChart-label,
.a-BarChart-barLink,
.a-BarChart-value {
box-shadow: 0 -0.1rem 0 @_base-alpha-2 inset;
}
.a-BarChart-bar,
.a-BarChart-filled {
border-radius: 1px;
}
.a-BarChart-item:hover .a-BarChart-bar {
background-color: @_base-alpha-2;
}
}
.a-BarChart--modern {
.a-BarChart-bar,
.a-BarChart-filled {
border-radius: 1px;
}
.a-BarChart-item:hover .a-BarChart-bar {
background-color: @_base-alpha-2;
}
}
.a-BarChart-filled {
background-color: @g_Accent-BG;
}
/**
* Import Compass
*/
:root {
color-scheme: @_color-scheme;
}
/* Wait Overlay Styles
========================================================================== */
.apex_wait_overlay {
background: @_base-bg-alpha-9;
}
/**
* Import Compass and Theme Variables
*/
:root {
--a-base-link-text-color: @g_Link-Base;
}
/*
{
"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 {
background-color: @g_Body-BG;
color: @g_Body-Text;
.grid-debug-on {
.container {
border-bottom-color: @_base-alpha-4;
}
}
}
a {
color: @g_Link-Base;
}
.t-Body-actions {
background-color: @g_Actions-Col-BG;
border-left: 1px solid @_base-alpha-3;
.u-RTL & {
border-left: 0;
border-right: 1px solid @_base-alpha-3;
}
}
.t-Body-title {
background-color: fadeout(@g_Body-Title-BG, 10%);
color: @g_Body-Title-FG;
border-bottom: 1px solid contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG, 10%), lighten(@g_Body-Title-BG, 10%), 0);
border-bottom-color: @_base-alpha-4;
//backdrop-filter: saturate(180%) blur(8px);
}
// For Marquee Detail Page, we can set the offset background to make the middle area
// appear as a single continuous block
.t-PageBody--masterDetail {
#t_Body_content_offset {
background-color: fadeout(@g_Body-Title-BG, 10%);
}
.t-Body-title {
&.has-shadow {
box-shadow: 0 1px 0 @_base-shadow-3;
}
&.has-shadow:after {
background-image: linear-gradient(@_base-shadow-2, @_base-shadow-0);
}
}
.apex-rds-container {
box-shadow: 0 -1px 0 @_base-alpha-4 inset;
&.is-stuck:after {
background-image: linear-gradient(@_base-shadow-2, @_base-shadow-0);
}
}
}
.ui-widget-content {
background-color: @g_Region-BG;
.text-dark();
}
.t-Body-side {
background-color: @l_Left-Col-BG;
color: @l_Left-Col-Text;
@media only screen and (min-width: 641px) {
box-shadow: 1px 0 0 @_base-alpha-4;
.u-RTL & {
box-shadow: -1px 0 0 @_base-alpha-4;
}
}
}
.apex-rds-container {
background-color: transparent;
.t-Body-info & {
background-color: @g_Body-Title-BG;
&.is-stuck {
background-color: fadeout(@g_Body-Title-BG, 5%);
backdrop-filter: blur(4px);
}
}
}
.t-Body-info {
background-color: @g_Body-Title-BG;
}
.t-Body-title {
&.js-hideBreadcrumbs {
background-color: @_base-alpha-12;
}
}
.t-Body-topButton {
border-radius: 100%;
background-color: lighten(@g_Body-BG, 10%);
color: contrast(lighten(@g_Body-BG, 10%), darken(lighten(@g_Body-BG, 10%), 10%), lighten(lighten(@g_Body-BG, 10%), 10%), 43%);
box-shadow: 0 0 0 1px @_base-alpha-4;
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset, 0 1px 2px @_base-shadow-5;
}
&:hover,
&:focus {
color: @g_Focus;
}
&:hover,
&:active {
box-shadow: 0 1px 2px @_base-shadow-5 inset;
}
&:active {
background-color: lighten(@g_Body-BG, 15%);
color: contrast(lighten(@g_Body-BG, 15%), darken(lighten(@g_Body-BG, 15%), 10%), lighten(lighten(@g_Body-BG, 15%), 10%), 43%);
}
}
/*
{
"var" : "@Head-Height",
"name" : "UTR.LESS.HEADER_HEIGHT",
"type" : "number",
"units": "px",
"range": {
"min": 40,
"max": 80,
"increment": 4
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Head-Height: 48px;
/*
{
"var" : "@Nav-Exp",
"name" : "UTR.LESS.NAVIGATION_TREE",
"type" : "number",
"units": "px",
"range": {
"min": 120,
"max": 440,
"increment": 10
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Nav-Exp: 240px;
/*
{
"var" : "@Actions-Exp",
"name" : "UTR.LESS.ACTIONS_COLUMN",
"type" : "number",
"units": "px",
"range": {
"min": 160,
"max": 440,
"increment": 10
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Actions-Exp: 200px;
/*
{
"var" : "@Side-Exp",
"name" : "UTR.LESS.LEFT_COLUMN",
"type" : "number",
"units": "px",
"range": {
"min": 160,
"max": 440,
"increment": 10
},
"group": "UTR.LESS.LAYOUT"
}
*/
@Side-Exp: 240px;
@Nav-Col: 48px;
@Actions-Col: 0px;
@Side-Col: 0px;
.t-Header-branding {
height: @Head-Height;
}
.t-Header-logo-link img {
max-height: @Head-Height - 8px;
}
.t-Body-content {
//min-height: 100vh;
min-height: calc(~"100vh - "@Head-Height);
}
/* ==========================================================================
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) {
.apex-direction-left(@Nav-Exp);
.apex-direction-right(0);
}
}
.t-Body-content {
@media only screen and (min-width: 641px) {
.apex-direction-margin-left(@Nav-Exp);
}
}
.t-Body-main {
.apex-direction-margin-left(0);
}
}
/* ==========================================================================
Menu Based Navigation
========================================================================== */
.apex-top-nav {
.t-Body-actions {
top: @Head-Height + 40;
}
.t-Body-title {
top: @Head-Height + 40;
}
@media only screen and (max-width: 640px) {
&.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 {
.apex-direction-translate(-40px);
}
}
/**
* Base styles for Side Bar
*/
.t-Body-side {
@media only screen and (min-width: 641px) {
width: @Side-Exp;
}
}
.apex-side-nav {
.t-Body-side {
@media only screen and (min-width: 641px) {
.apex-direction-left(@Nav-Col);
}
}
}
// Help fix flicker on sidebar before javascript loads
.no-anim .t-Body-nav,
.no-anim .t-TreeNav {
background-color: transparent !important;
border-color: transparent !important;
visibility: hidden;
}
/* ==========================================================================
Tree Nav Expanded
========================================================================== */
.apex-side-nav.js-navExpanded {
.t-Body-main {
.apex-direction-margin-left(@Nav-Col);
.apex-direction-translate(@Nav-Exp - @Nav-Col);
}
@media only screen and (max-width: 480px) {
//
// Compensate for completely collapsed left column
//
.t-Body-title,
.t-Body-side,
.t-Body-content {
.apex-direction-margin-left(0);
}
.t-Body-main {
.apex-direction-margin-left(0);
.apex-direction-translate(@Nav-Exp);
}
}
@media only screen and (min-width: 641px) {
&.t-PageBody--hideLeft {
.t-Body-title,
.t-Body-content,
.t-Body-main {
transform: none;
}
.t-Body-title {
.apex-direction-left(@Nav-Exp);
.apex-direction-right(0);
}
.t-Body-content {
.apex-direction-margin-left(@Nav-Exp - @Nav-Col);
}
.t-Body-main {
.apex-direction-margin-left(@Nav-Col);
}
}
// .t-Body-title,
.t-Body-side {
.translate3d-less(@Nav-Exp, 0, 0);
.u-RTL & {
.translate3d-less(-@Nav-Exp, 0, 0);
}
}
&.t-PageBody--showLeft {
.t-Body-main {
.apex-direction-margin-left(0);
transform: none;
}
// .t-Body-title,
.t-Body-side {
.apex-direction-left(0);
}
.t-Body-content {
.apex-direction-margin-left(@Side-Exp + @Nav-Col);
:not(.u-RTL) & {
.translate3d-less(@Nav-Exp - @Nav-Col, 0, 0);
}
.u-RTL & {
.translate3d-less(-@Nav-Exp + @Nav-Col, 0, 0);
}
}
.t-Body-title {
.apex-direction-left(0);
:not(.u-RTL) & {
.translate3d-less(@Nav-Exp, 0, 0);
}
.u-RTL & {
.translate3d-less(-@Nav-Exp, 0, 0);
}
}
}
}
@media only screen and (min-width: 993px) {
&.t-PageBody--showLeft {
.t-Body-main {
.apex-direction-margin-left(0);
transform: none;
}
.t-Body-title {
transform: none !important;
.apex-direction-margin-left(@Nav-Exp);
}
.t-Body-content {
.apex-direction-margin-left(@Side-Exp + @Nav-Exp);
:not(.u-RTL) &,
.u-RTL & {
transform: none;
}
}
}
}
}
/* ==========================================================================
Tree Nav Collapsed
========================================================================== */
.apex-side-nav.js-navCollapsed {
.t-Body-nav,
.t-Body-nav .t-TreeNav {
width: @Nav-Col;
}
.t-Body-content,
.t-Body-title,
.t-Body-side {
.apex-direction-margin-left(@Nav-Col);
}
.t-Body-title.is-stuck {
.apex-direction-left(0);
}
@media only screen and (max-width: 480px) {
//
// Completely hide left column when on very small screens
//
.t-Body-nav {
.transform-less(translateX(-@Nav-Col));
.transform-less(translateX(-@Nav-Col));
.u-RTL & {
.transform-less(translateX(@Nav-Col));
}
}
.t-Body-title,
.t-Body-side,
.t-Body-content {
.apex-direction-margin-left(0);
}
}
@media only screen and (max-width: 640px) {
&.t-PageBody.js-rightExpanded {
.t-Body-main {
.apex-direction-margin-left(0);
}
}
}
@media only screen and (min-width: 641px) {
.t-Body-title {
.apex-direction-margin-left(0);
.apex-direction-left(@Nav-Col);
}
&.t-PageBody--showLeft {
.t-Body-side {
.apex-direction-margin-left(0);
}
.t-Body-content {
.apex-direction-margin-left(@Side-Exp + @Nav-Col);
}
}
}
@media only screen and (min-width: 993px) {
.t-Body-side {
.apex-direction-left(@Nav-Col);
}
}
}
/* ==========================================================================
Tree Nav Hidden
========================================================================== */
.apex-side-nav.js-navCollapsed--hidden {
&.js-navCollapsed .t-Body-nav {
width: 0;
visibility: hidden;
.a-TreeView-badge {
visibility: hidden !important; // Force hidden badges to hide when sidebar is hidden off screen. 19.2 bug
}
}
.t-Body-nav,
.t-Body-nav .t-TreeNav {
width: @Nav-Exp;
}
.t-Body-content,
.t-Body-title,
.t-Body-side {
.apex-direction-margin-left(0);
}
.t-Body-title.is-stuck {
.apex-direction-left(0);
}
@media only screen and (max-width: 480px) {
//
// Completely hide left column when on very small screens
//
.t-Body-nav {
.transform-less(translateX(0));
.u-RTL & {
.transform-less(translateX(0));
}
}
.t-Body-title,
.t-Body-side,
.t-Body-content {
.apex-direction-margin-left(0);
}
}
@media only screen and (max-width: 640px) {
&.t-PageBody.js-rightExpanded {
.t-Body-main {
.apex-direction-margin-left(0);
}
}
}
@media only screen and (min-width: 641px) {
.t-Body-title {
.apex-direction-margin-left(0);
// .apex-direction-left(@Nav-Col);
.apex-direction-left(0);
}
&.t-PageBody--showLeft {
.t-Body-side {
// .apex-direction-margin-left(0);
.apex-direction-left(0);
}
.t-Body-content {
// .apex-direction-margin-left(@Side-Exp + @Nav-Col);
.apex-direction-margin-left(@Side-Exp);
}
}
}
@media only screen and (min-width: 993px) {
.t-Body-side {
//.apex-direction-left(@Nav-Col);
.apex-direction-margin-left(0);
.apex-direction-left(0);
}
&.t-PageBody--showLeft {
.t-Body-side {
// .apex-direction-margin-left(0);
.apex-direction-left(0);
}
.t-Body-content {
.apex-direction-margin-left(@Side-Exp);
}
}
&.t-PageBody--showLeft.js-navExpanded {
.t-Body-content {
.apex-direction-margin-left(@Side-Exp + @Nav-Exp);
}
}
}
}
/* ==========================================================================
Actions Expanded
========================================================================== */
.t-PageBody.js-rightExpanded {
.t-Body-main {
margin-right: 0;
}
.t-Body-main,
.t-Body-nav {
.apex-direction-translate(-@Actions-Exp);
}
@media only screen and (min-width: 641px) {
&.t-PageBody--hideLeft {
.t-Body-main,
.t-Body-nav {
transform: none;
}
.t-Body-main {
.apex-direction-margin-right(@Actions-Exp);
}
.t-Body-title {
:not(.u-RTL) & {
right: @Actions-Exp;
}
.u-RTL & {
left: @Actions-Exp;
}
}
}
&.t-PageBody--showLeft {
.t-Body-title {
.apex-direction-right(0);
}
}
&.js-navCollapsed.t-PageBody--showLeft {
.t-Body-side {
.apex-direction-margin-left(0);
.apex-direction-left(0);
}
}
}
@media only screen and (min-width: 993px) {
&.t-PageBody--showLeft {
.t-Body-main {
.apex-direction-margin-right(@Actions-Exp);
// margin-right: @Actions-Exp;
}
.t-Body-main,
.t-Body-nav {
transform: none;
}
.t-Body-title {
.apex-direction-right(@Actions-Exp);
// right: @Actions-Exp;
}
}
&.js-navCollapsed.t-PageBody--showLeft:not(.js-navCollapsed--hidden) {
.t-Body-side {
.apex-direction-left(@Nav-Col);
}
}
}
@media only screen and (max-width: 992px) {
&.t-PageBody--showLeft {
.t-Body-main {
transform: none;
}
.t-Body-title,
.t-Body-side,
.t-Body-content {
.apex-direction-translate(-@Actions-Exp);
}
.t-Body-side {
margin-left: @Nav-Col !important;
.u-RTL & {
margin-left: 0 !important;
right: @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 {
.apex-direction-translate(@Actions-Exp);
}
}
/* ==========================================================================
Show Left Side Bar
========================================================================== */
.t-PageBody--showLeft {
@media only screen and (min-width: 641px) {
.t-Body-content {
.apex-direction-margin-left(@Side-Exp);
}
}
}
/*
{
"var": "@g_Body-Content-Max-Width",
"name": "UTR.LESS.BODY_CONTENT_MAX_WIDTH",
"type": "select",
"options": [
{
"d": "Auto",
"r": "100%"
},
{
"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: 100%;
.t-Body-contentInner {
margin: 0 auto;
max-width: @g_Body-Content-Max-Width;
}
// Skip to Main Content Link
#t_Body_skipToContent {
color: @g_Accent-BG;
background-color: @g_Accent-FG;
}
/* Full Width Mega Menu
========================================================================== */
.t-MegaMenu--fullWidth {
&:not(.js-menu-callout) {
padding-top: (@Head-Height - 32px) / 2;
}
}
/* Column Widths when using X layout columns
========================================================================== */
.t-MegaMenu--layout2Cols,
.t-MegaMenu--layout3Cols,
.t-MegaMenu--layout4Cols,
.t-MegaMenu--layout5Cols {
.t-MegaMenu-item--top {
max-width: @Nav-Exp;
}
}
/**
* Import Compass
*/
/* ==========================================================================
Breadcrumb
========================================================================== */
.t-Breadcrumb-item {
&:after {
color: fadeout(@g_Body-Text, 25%);
}
&,
a {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 65%), 100%), desaturate(lighten(@g_Body-BG, 65%), 50%)), 100%)
}
a:hover,
a:focus {
color: @g_Link-Base;
text-decoration: underline;
outline: none;
}
}
.t-Body-title-shrink .t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-Body-title-shrink .t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-titleText {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 85%), 100%), desaturate(lighten(@g_Body-BG, 85%), 50%)), 100%)
}
@media only screen and (max-width: 640px) {
.t-BreadcrumbRegion--useRegionTitle .t-BreadcrumbRegion-titleText {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 85%), 100%), desaturate(lighten(@g_Body-BG, 85%), 50%)), 100%)
}
}
.t-Breadcrumb-item .t-Icon {
&:hover {
color: @g_Accent-BG;
}
}
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-BreadcrumbRegion-titleText {
color: @g_Body-Title-FG;
}
// Breadcrumn within Title Bar
/* Hero Region in Title Bar
========================================================================== */
.t-Body-title {
.t-Breadcrumb-item:after {
color: fadeout(@g_Body-Title-FG, 25%);
}
.t-Breadcrumb-item,
.t-Breadcrumb-item a,
.t-BreadcrumbRegion--useBreadcrumbTitle .t-Breadcrumb-item.is-active,
.t-BreadcrumbRegion-titleText {
color: @g_Body-Title-FG;
}
}
/**
* Import Compass and Theme Variables
*/
/******************************************************************************
Button for Theme
******************************************************************************/
/* Generic Button
========================================================================== */
.a-Button {
--a-button-font-size: 12px;
--a-button-line-height: 16px;
}
.t-Button,
.a-Button,
.ui-button {
--a-button-border-width: ~"0px";
border: none;
text-shadow: none;
border-radius: @g_Button-BorderRadius;
transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
.t-Icon {
transition: inherit;
}
&:hover,
&:focus {
z-index: 100;
outline: none !important;
}
&:focus,
&.is-active:focus {
// box-shadow: 0 0 0 1px @g_Focus inset !important;
&:before {
box-shadow: 0 0 0 1px @g_Focus inset !important;
opacity: 1;
}
&:active:before {
opacity: 0;
}
}
}
.t-Button {
&:not(.t-Button--link):not(.t-Button--header):active,
&:not(.t-Button--link):not(.t-Button--header).is-active {
box-shadow: 0 0 0 1px @_base-alpha-5 inset, 0 2px 2px @_base-shadow-5 inset !important;
}
}
/* Fast Shadows for Buttons
========================================================================== */
.a-Button,
.t-Button,
.ui-button {
&:before,
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
opacity: 0;
transition: .2s ease;
}
&:before {
z-index: 1;
}
&:after {
z-index: -1;
box-shadow: 0 2px 1px @_base-shadow-3;
transform: translateY(-2px);
}
&:focus:after,
&:not(.t-Button--link):hover:after {
opacity: 1;
transform: translateY(0);
}
&:focus:active:after {
opacity: 0;
transform: translateY(-2px);
}
&:focus:after {
transform: translateY(0);
box-shadow: 0 0 1px 1px fade(@g_Focus, 25%);
}
}
/* ==========================================================================
Standard Buttons
========================================================================== */
/* Standard Button - Normal State
========================================================================== */
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label,
.apex-button-group input + label,
.t-Button:not(.t-Button--simple),
.ui-button,
.a-Button,
.a-Button.a-Button--popupLOV,
.a-IG-button.a-IG-button--controls {
color: @g_Button-Text;
background-color: @g_Button-BG;
box-shadow: 0 0 0 1px fade(@_base, 12.5) inset;
&:hover {
background-color: lighten(@g_Button-BG, 10%);
box-shadow: 0 0 0 1px @_base-alpha-5 inset;
}
&:focus {
background-color: lighten(@g_Button-BG, 15%);
}
&.is-active,
&:active {
background-color: darken(@g_Button-BG, 10%);
}
}
.ui-button:hover {
color: @g_Button-Text;
}
.t-Form-fieldContainer--radioButtonGroup .apex-item-grid {
background-color: darken(@g_Button-BG, 12.5%);
border-radius: @g_Button-BorderRadius;
}
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:active + label,
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:focus:not(:checked) + label,
.apex-button-group input:active + label,
.apex-button-group input:focus:not(:checked) + label {
box-shadow: 0 0 0 1px @g_Focus inset, 0 0 0 2px @g_Form-Item-BG inset !important;
outline: none;
border-color: @g_Focus;
// background-color: lighten(@g_Button-BG, 10%) !important;
// color: @g_Button-Text !important;
}
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked:focus + label,
.apex-button-group input:checked:focus + label {
box-shadow: 0 0 0 1px @g_Focus inset, 0 0 0 2px @g_Form-Item-BG inset !important;
}
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label,
.apex-button-group input:checked + label {
// background-color: darken(@g_Button-BG, 10%);
// color: @g_Button-Text;
border-color: @g_Focus;
background-color: @g_Focus;
color: @g_Focus-FG;
box-shadow: none;
}
/* Standard Button - Hot State
========================================================================== */
.a-Button--hot,
.t-Button--hot:not(.t-Button--simple),
body .ui-button.ui-button--hot,
body .ui-state-default.ui-priority-primary {
background-color: @l_Button-Hot-BG;
color: @l_Button-Hot-Text;
&:hover,
&:not(:active):focus {
background-color: lighten(@l_Button-Hot-BG, 5%);
}
&:active,
&.is-active {
background-color: darken(@l_Button-Hot-BG, 5%);
}
}
body .ui-button.ui-button--hot {
font-weight: bold;
}
:root {
--ut-palette-primary: @l_Button-Hot-BG;
--ut-palette-primary-contrast: @l_Button-Hot-Text;
}
/* Standard Button - Warning State
========================================================================== */
.t-Button--warning:not(.t-Button--simple):not(.t-Button--hot) {
color: @l_Button-Warning-Text;
&:hover,
&:not(:active):focus {
background-color: lighten(@l_Button-Warning-BG, 10%);
}
&,
&:active,
&.is-active {
background-color: @l_Button-Warning-BG;
}
}
/* Standard Button - Success State
========================================================================== */
.t-Button--success:not(.t-Button--simple):not(.t-Button--hot) {
color: @l_Button-Success-Text;
&:hover,
&:not(:active):focus {
background-color: lighten(@l_Button-Success-BG, 5%);
}
&,
&:active,
&.is-active {
background-color: @l_Button-Success-BG;
}
}
/* Standard Button - Danger State
========================================================================== */
.t-Button--danger:not(.t-Button--simple):not(.t-Button--hot) {
color: @l_Button-Danger-Text;
&:hover,
&:not(:active):focus {
background-color: lighten(@l_Button-Danger-BG, 5%);
}
&,
&:active,
&.is-active {
background-color: @l_Button-Danger-BG;
}
}
/* Standard Button - Primary State
========================================================================== */
.t-Button--primary:not(.t-Button--simple):not(.t-Button--hot) {
color: @l_Button-Primary-Text;
&:hover,
&:not(:active):focus {
background-color: lighten(@l_Button-Primary-BG, 5%);
}
&,
&:active,
&.is-active {
background-color: @l_Button-Primary-BG;
}
}
/* ==========================================================================
Simple Button
========================================================================== */
/* Default Simple Button
========================================================================== */
.t-Button--simple:not(.t-Button--hot):not(.t-Button--danger):not(.t-Button--primary):not(.t-Button--success):not(.t-Button--warning) {
background-color: @l_Button-Simple-BG;
color: @l_Button-Simple-Text;
box-shadow: 0 0 0 1px fade(@_base, 12.5) inset;
&:hover,
&:focus,
&.is-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;
}
}
/* Hot Simple Button
========================================================================== */
.t-Button--simple.t-Button--hot {
// @textColor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG, 70%), @l_Button-Hot-BG), mix(lighten(@l_Button-Simple-BG, 70%), @l_Button-Hot-BG), 50%);
@dark: darken(@l_Button-Hot-BG, 25%);
@light: lighten(@l_Button-Hot-BG, 0%);
@textColor: contrast(@l_Button-Hot-BG, @dark, @light);
&,
.t-Icon {
color: @textColor;
}
box-shadow: 0 0 0 1px @l_Button-Hot-BG inset;
background-color: @l_Button-Simple-BG;
&:hover,
&:focus,
&.is-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 Simple Button
========================================================================== */
.t-Button--simple.t-Button--primary:not(.t-Button--hot) {
@dark: darken(@l_Button-Primary-BG, 25%);
@light: lighten(@l_Button-Primary-BG, 0%);
@textColor: contrast(@l_Button-Primary-BG, @dark, @light);
&,
.t-Icon {
color: @textColor;
}
box-shadow: 0 0 0 1px @l_Button-Primary-BG inset;
background-color: @l_Button-Simple-BG;
&:hover,
&:focus,
&.is-active {
background-color: @l_Button-Primary-BG;
color: @l_Button-Primary-Text;
.t-Icon {
color: @l_Button-Primary-Text;
}
}
}
/* Warning Simple Button
========================================================================== */
.t-Button--simple.t-Button--warning:not(.t-Button--hot) {
// @textColor: 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%);
@dark: darken(@l_Button-Warning-BG, 25%);
@light: lighten(@l_Button-Warning-BG, 0%);
@textColor: contrast(@l_Button-Warning-BG, @dark, @light);
&,
.t-Icon {
color: @textColor;
}
box-shadow: 0 0 0 1px @l_Button-Warning-BG inset;
background-color: @l_Button-Simple-BG;
&:hover,
&:focus,
&.is-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;
}
}
}
/* Danger Simple Button
========================================================================== */
.t-Button--simple.t-Button--danger:not(.t-Button--hot) {
// @textColor: 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%);
@dark: darken(@l_Button-Danger-BG, 25%);
@light: lighten(@l_Button-Danger-BG, 0%);
@textColor: contrast(@l_Button-Danger-BG, @dark, @light);
&,
.t-Icon {
color: @textColor;
}
box-shadow: 0 0 0 1px @l_Button-Danger-BG inset;
background-color: @l_Button-Simple-BG;
&:hover,
&:focus,
&.is-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;
}
}
}
/* Success Simple Button
========================================================================== */
.t-Button--simple.t-Button--success:not(.t-Button--hot) {
// @textColor: 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%);
@dark: darken(@l_Button-Success-BG, 25%);
@light: lighten(@l_Button-Success-BG, 0%);
@textColor: contrast(@l_Button-Success-BG, @dark, @light);
&,
.t-Icon {
color: @textColor;
}
box-shadow: 0 0 0 1px @l_Button-Success-BG inset;
background-color: @l_Button-Simple-BG;
&:hover,
&:focus,
&.is-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;
}
}
}
/* ==========================================================================
No UI and Link Style Buttons
========================================================================== */
/* Default No UI Button
========================================================================== */
.t-Button--noUI {
background-color: transparent !important;
&:not(:hover):not(:focus):not(.is-active) {
box-shadow: none;
}
&:hover,
&:focus,
&.is-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 fade(@_base, 12.5) inset;
}
&:focus:hover {
box-shadow: 0 0 0 1px fade(@_base, 12.5) inset;
}
}
/* Default Link Style Button
========================================================================== */
.t-Button--link {
background-color: transparent !important;
box-shadow: none !important;
&:hover {
text-decoration: underline;
}
&:focus {
// box-shadow: 0 0 0 1px currentColor inset !important;
}
&.t-Button,
.t-Icon {
color: @g_Link-Base;
}
}
/* Hot No UI Button
========================================================================== */
.t-Button--noUI.t-Button--hot {
// @textColor: contrast(@l_Button-Hot-BG, mix(darken(@l_Button-Hot-BG, 40%), #FFF), mix(lighten(@l_Button-Hot-BG, 40%), #FFF), 50%);
@dark: darken(@l_Button-Hot-BG, 25%);
@light: lighten(@l_Button-Hot-BG, 0%);
@textColor: contrast(@l_Button-Hot-BG, @dark, @light);
&,
.t-Icon {
color: @textColor;
}
}
/* Primary No UI Button
========================================================================== */
.t-Button--noUI.t-Button--primary,
.t-Button--link.t-Button--primary {
// @textColor: contrast(@l_Button-Primary-BG, mix(darken(@l_Button-Primary-BG, 40%), #FFF), mix(lighten(@l_Button-Primary-BG, 40%), #FFF), 50%);
@dark: darken(@l_Button-Primary-BG, 25%);
@light: lighten(@l_Button-Primary-BG, 0%);
@textColor: contrast(@l_Button-Primary-BG, @dark, @light);
&,
.t-Icon {
color: @textColor !important;
}
}
/* Warning No UI Button
========================================================================== */
.t-Button--noUI.t-Button--warning,
.t-Button--link.t-Button--warning {
// @textColor: contrast(@l_Button-Warning-BG, mix(darken(@l_Button-Warning-BG, 40%), #FFF), mix(lighten(@l_Button-Warning-BG, 40%), #FFF), 50%);
@dark: darken(@l_Button-Warning-BG, 25%);
@light: lighten(@l_Button-Warning-BG, 0%);
@textColor: contrast(@l_Button-Warning-BG, @dark, @light);
&,
.t-Icon {
color: @textColor !important;
}
}
/* Danger No UI Button
========================================================================== */
.t-Button--noUI.t-Button--danger,
.t-Button--link.t-Button--danger {
// @textColor: contrast(@l_Button-Danger-BG, mix(darken(@l_Button-Danger-BG, 40%), #FFF), mix(lighten(@l_Button-Danger-BG, 40%), #FFF), 50%);
@dark: darken(@l_Button-Danger-BG, 25%);
@light: lighten(@l_Button-Danger-BG, 0%);
@textColor: contrast(@l_Button-Danger-BG, @dark, @light);
&,
.t-Icon {
color: @textColor !important;
}
}
/* Success No UI Button
========================================================================== */
.t-Button--noUI.t-Button--success,
.t-Button--link.t-Button--success {
// @textColor: contrast(@l_Button-Success-BG, mix(darken(@l_Button-Success-BG, 40%), #FFF), mix(lighten(@l_Button-Success-BG, 40%), #FFF), 50%);
@dark: darken(@l_Button-Success-BG, 25%);
@light: lighten(@l_Button-Success-BG, 0%);
@textColor: contrast(@l_Button-Success-BG, @dark, @light);
&,
.t-Icon {
color: @textColor !important;
}
}
/* ==========================================================================
High Contrast
========================================================================== */
// Removing as it is already in Core
// .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;
// }
// Why is this needed?
// .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: 2px;
box-shadow: none;
&:focus,
&:active:focus {
&:before {
box-shadow: 0 0 0 1px lighten(@g_Focus, 15%) inset !important;
}
}
&:hover,
&:focus,
&:active {
background-color: transparent;
}
&:hover {
background-color: @_base-alpha-4;
}
&:active,
&:focus:active {
background-color: @_base-alpha-8;
}
&.is-active {
background-color: @_base-alpha-7;
box-shadow: none;
}
}
.t-Button.t-Button--headerTree {
&:focus {
box-shadow: 0 0 0 1px lighten(@g_Focus, 15%) inset;
}
@media only screen and (max-width: 480px) {
background-color: @_base-alpha-7;
}
}
.t-Button.t-Button--headerRight {
background-color: @g_Actions-Col-BG;
border: 1px solid contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG, 10%), lighten(@g_Actions-Col-BG, 10%), 43%);
&: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, 85%), 100%), desaturate(lighten(@g_Actions-Col-BG, 85%), 50%)), 100%);
}
}
.t-Button--navBar {
.t-Button-badge {
border-radius: 16px;
background-color: fade(@_base, 35);
}
}
.t-Button--helpButton .a-Icon {
opacity: .5;
}
/* Navigation Bar Menus
========================================================================== */
@l_NavBarButton-Active-BG: darken(@g_Accent-BG, 15%);
// @l_NavBarButton-Active-FG: contrast(@bg, darken(@bg, 75), lighten(@bg, 75), 43%);
@l_NavBarButton-Active-FG: fade(contrast(@l_NavBarButton-Active-BG, desaturate(darken(@l_NavBarButton-Active-BG, 85%), 100%), desaturate(lighten(@l_NavBarButton-Active-BG, 85%), 50%)), 100%);
.t-Header-navBar .t-Button--header.is-active {
//border-bottom-right-radius: 0;
//border-bottom-left-radius: 0;
background-color: @l_NavBarButton-Active-BG;
color: @l_NavBarButton-Active-FG;
}
/* ==========================================================================
Modifiers in Buttons
========================================================================== */
/* Set white for when
========================================================================== */
.t-Button.t-Button--noUI,
.t-Button.t-Button--link,
.t-Button.t-Button--simple {
.fa:after {
background-color: #FFF;
}
}
/* Danger Button
========================================================================== */
.t-Button--danger,
.t-Button--simple.t-Button--danger:hover {
.fa:after {
background-color: @g_Danger-BG;
}
}
/* Success Button
========================================================================== */
.t-Button--success,
.t-Button--simple.t-Button--success:hover {
.fa:after {
background-color: @g_Success-BG;
}
}
/* Primary Button
========================================================================== */
.t-Button--primary,
.t-Button--simple.t-Button--primary:hover {
.fa:after {
background-color: @g_Primary-BG;
}
}
/* Warning Button
========================================================================== */
.t-Button--warning,
.t-Button--simple.t-Button--warning:hover {
.fa:after {
background-color: @g_Warning-BG;
}
}
/* Hot Button
========================================================================== */
.t-Button--hot,
.t-Button--simple.t-Button--hot:hover {
.fa:after {
background-color: @l_Button-Hot-BG;
}
}
// Body Actions Button
.t-Body-actionsToggle {
// border-radius: @g_Button-BorderRadius;
background-color: @g_Actions-Col-BG;
border-color: @_base-alpha-3;
border-right-color: transparent;
color: @g_Button-Text;
.u-RTL & {
border-color: @_base-alpha-3;
border-left-color: transparent;
}
&:active {
background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG, 10%), lighten(@g_Actions-Col-BG, 10%), 43%);
}
&:focus,
&:active {
border-color: @g_Focus;
}
}
/**
* Import Compass
*/
/* ==========================================================================
Button Region
========================================================================== */
.t-ButtonRegion {
background-color: @g_Region-BG;
color: @g_Region-FG;
border-radius: @g_Container-BorderRadius;
border-color: @_base-alpha-3;
box-shadow: 0 2px 2px @_base-shadow-2;
}
.t-ButtonRegion--noUI {
background-color: transparent;
box-shadow: none;
}
.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;
}
/* ==========================================================================
Modifier: Wizard Dialog and Dialog Region
========================================================================== */
.t-Dialog-footer .t-ButtonRegion {
border-top-color: @_base-alpha-2;
}
/* ==========================================================================
CKEditor v5 Variables
========================================================================== */
.ck-editor {
// --ck-z-default: 1;
// --ck-z-modal: ~"calc(var(--ck-z-default) + 999)";
--ck-color-base-foreground: @_base-alpha-1;
--ck-color-base-background: @g_Form-Item-BG;
--ck-color-base-border: @_base-alpha-4;
// --ck-color-base-action: #61b045;
// --ck-color-base-focus: #6cb5f9;
--ck-color-base-text: @_base;
--ck-color-base-active: @g_Accent-BG;
--ck-color-base-active-focus: @g_Focus;
--ck-color-base-error: @g_Danger-BG;
--ck-color-focus-border: @g_Focus;
// --ck-color-focus-outer-shadow: #bcdefb;
// --ck-color-focus-disabled-shadow: rgba(119, 186, 248, 0.3);
// --ck-color-focus-error-shadow: rgba(255, 64, 31, 0.3);
--ck-color-text: var(--ck-color-base-text);
// --ck-color-shadow-drop: rgba(0, 0, 0, 0.15);
// --ck-color-shadow-drop-active: rgba(0, 0, 0, 0.2);
--ck-color-shadow-inner: none;
// --ck-color-button-default-background: transparent;
--ck-color-button-default-hover-background: @_base-alpha-3;
--ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
--ck-color-split-button-hover-border: var(--ck-color-base-border);
--ck-color-button-default-active-background: @_base-alpha-4;
--ck-color-button-default-active-shadow: @_base-alpha-4;
// --ck-color-button-default-disabled-background: transparent;
--ck-color-button-on-background: @_base-alpha-5;
--ck-color-button-on-hover-background: @_base-alpha-6;
--ck-color-button-on-active-background: @_base-alpha-7;
--ck-color-button-on-active-shadow: @_base-alpha-4;
--ck-color-button-on-disabled-background: @_base-alpha-4;
// --ck-color-button-action-background: var(--ck-color-base-action);
// --ck-color-button-action-hover-background: #579e3d;
// --ck-color-button-action-active-background: #53973b;
// --ck-color-button-action-active-shadow: #498433;
// --ck-color-button-action-disabled-background: #7ec365;
--ck-color-button-action-text: var(--ck-color-base-background);
// --ck-color-button-save: #008a00;
// --ck-color-button-cancel: #db3700;
// --ck-color-switch-button-off-background: #b0b0b0;
// --ck-color-switch-button-off-hover-background: #a3a3a3;
// --ck-color-switch-button-on-background: var(--ck-color-button-action-background);
// --ck-color-switch-button-on-hover-background: #579e3d;
--ck-color-switch-button-inner-background: var(--ck-color-base-background);
// --ck-color-switch-button-inner-shadow: rgba(0, 0, 0, 0.1);
--ck-color-dropdown-panel-background: var(--ck-color-base-background);
--ck-color-dropdown-panel-border: var(--ck-color-base-border);
--ck-color-input-background: var(--ck-color-base-background);
// --ck-color-input-border: #c7c7c7;
--ck-color-input-error-border: var(--ck-color-base-error);
--ck-color-input-text: var(--ck-color-base-text);
// --ck-color-input-disabled-background: #f2f2f2;
// --ck-color-input-disabled-border: #c7c7c7;
// --ck-color-input-disabled-text: #5c5c5c;
--ck-color-list-background: var(--ck-color-base-background);
--ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
--ck-color-list-button-on-background: var(--ck-color-base-active);
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
--ck-color-list-button-on-text: @g_Accent-FG;
--ck-color-panel-background: var(--ck-color-base-background);
--ck-color-panel-border: var(--ck-color-base-border);
--ck-color-toolbar-background: var(--ck-color-base-foreground);
--ck-color-toolbar-border: var(--ck-color-base-border);
// --ck-color-tooltip-background: var(--ck-color-base-text);
// --ck-color-tooltip-text: var(--ck-color-base-background);
// --ck-color-engine-placeholder-text: #707070;
// --ck-color-upload-bar-background: #6cb5f9;
// --ck-color-link-default: #0000f0;
// --ck-color-link-selected-background: rgba(31, 177, 255, 0.1);
// --ck-color-link-fake-selection: rgba(31, 177, 255, 0.3);
// --ck-disabled-opacity: .5;
// --ck-focus-outer-shadow-geometry: 0 0 0 3px;
// --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
// --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
// --ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);
--ck-focus-ring: 1px solid var(--ck-color-focus-border);
// --ck-font-size-base: 13px;
// --ck-line-height-base: 1.84615;
--ck-font-face: inherit;
// --ck-font-size-tiny: 0.7em;
// --ck-font-size-small: 0.75em;
// --ck-font-size-normal: 1em;
// --ck-font-size-big: 1.4em;
// --ck-font-size-large: 1.8em;
// --ck-ui-component-min-height: 2.3em;
}
// Form Tweaks
.ck.ck-editor__main > .ck-editor__editable {
--ck-color-base-background: @g_Form-Item-BG;
}
.ck.ck-editor__editable:not(.ck-editor__nested-editable):hover {
--ck-color-base-background: @l_Form-Item-hoverBG;
}
.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
--ck-color-base-background: @l_Form-Item-focusBG;
box-shadow: none !important;
}
// Preview Overrides
body .ck-content pre {
color: @g_Form-Item-FG;
border-color: @_base-alpha-4;
background-color: @_base-alpha-3;
}
// Legacy CKeditor
body .cke_chrome {
box-shadow: none;
border-radius: 2px;
}
/**
* 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.ui-widget {
background-color: @fc-Body-BG;
border-radius: @fc-BorderRadius;
}
.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%);
}
.fc .ui-button:active,
.fc .ui-button:focus,
.fc-view:active,
.fc-view:focus {
outline: 1px solid @g_Focus;
}
.fc-view-container > .fc-view {
&:active,
&:focus {
outline: none;
}
}
.apex-fullcalendar-5 {
--fc-small-font-size: 0.85em;
--fc-page-bg-color: @g_Region-BG;
--fc-neutral-bg-color: fade(@g_Color-Palette-15, 30%);
--fc-neutral-text-color: @g_Region-FG-Light;
--fc-border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 12%), lighten(@g_Region-BG, 12%), 43%);
--fc-event-bg-color: @g_Color-Palette-1;
--fc-event-border-color: @g_Color-Palette-1;
// --fc-event-text-color: @g_Region-FG;
--fc-event-selected-overlay-color: @_base-alpha-7;
--fc-event-resizer-thickness: 8px;
--fc-event-resizer-dot-total-width: 8px;
--fc-event-resizer-dot-border-width: 1px;
--fc-non-business-color: fade(@g_Color-Palette-14, 30%);
--fc-bg-event-color: @g_Color-Palette-5;
--fc-bg-event-opacity: 0.3;
--fc-highlight-color: fade(@g_Color-Palette-15, 30%);
--fc-today-bg-color: fade(@g_Color-Palette-15, 15%);
--fc-now-indicator-color: @g_Color-Palette-9;
--fc-daygrid-event-dot-width: 8px;
--fc-list-event-dot-width: 10px;
--fc-list-event-hover-bg-color: @_base-shade-1;
--fc-button-text-color: @g_Button-Text;
--fc-button-bg-color: @g_Button-BG;
--fc-button-border-color: contrast(@g_Button-BG, darken(@g_Button-BG, 5%), lighten(@g_Button-BG, 5%), 43%);
--fc-button-hover-bg-color: lighten(@g_Button-BG, 10%);
--fc-button-hover-border-color: contrast(@g_Button-BG, darken(@g_Button-BG, 5%), lighten(@g_Button-BG, 5%), 43%);
--fc-button-active-bg-color: darken(@g_Button-BG, 10%);
--fc-button-active-border-color: darken(@g_Button-BG, 10%);
.fc-list-table .fc-list-event {
background-color: transparent;
color: inherit;
}
a:not([href]) {
color: inherit;
}
}
/* ==========================================================================
Card View
========================================================================== */
:root {
--a-cv-grid-gap: 16px;
--a-cv-item-width: 304px;
--a-cv-focus-outline: none;
// --a-cv-order-header: 1;
// --a-cv-order-media: 2;
// --a-cv-order-body: 3;
// --a-cv-order-actions: 4;
--a-cv-border-width: 1px;
--a-cv-border-color: @_base-alpha-3;
--a-cv-border-radius: 3px;
--a-cv-background-color: @g_Region-BG;
// --a-cv-text-color:;
--a-cv-shadow: 0 2px 4px -2px @_base-shadow-3;
--a-cv-hover-background-color: var(--a-cv-background-color);
--a-cv-hover-text-color: var(--a-cv-text-color);
--a-cv-hover-border-color: var(--a-cv-border-color);
--a-cv-hover-shadow: 0 4px 8px 0 @_base-shadow-4;
--a-cv-active-background-color: var(--a-cv-background-color);
--a-cv-active-text-color: var(--a-cv-text-color);
--a-cv-active-border-color: var(--a-cv-border-color);
--a-cv-active-shadow: var(--a-cv-shadow);
// --a-cv-focus-background-color: var(--a-cv-background-color);
// --a-cv-focus-text-color: var(--a-cv-text-color);
--a-cv-focus-border-color: @g_Focus;
// --a-cv-focus-shadow: var(--a-cv-shadow);
// --a-cv-media-background-color: @_base-alpha-1;
--a-cv-media-padding-y: 16px;
--a-cv-media-padding-x: 16px;
// --a-cv-header-background-color: ;
// --a-cv-header-text-color: ;
--a-cv-header-padding-y: 16px;
--a-cv-header-padding-x: 16px;
// --a-cv-header-item-spacing-x: 12px;
--a-cv-header-border-width: 1px;
--a-cv-header-border-color: @_base-alpha-2;
--a-cv-icon-background-color: @g_Accent-BG;
// --a-cv-icon-background-image: ;
--a-cv-icon-text-color: @g_Accent-FG;
--a-cv-icon-border-radius: 100%;
--a-cv-icon-size: 16px;
--a-cv-icon-container-size: 32px;
--a-cv-icon-padding: 8px;
// --a-cv-icon-image-size: ;
// --a-cv-icon-image-border-radius: ;
// --a-cv-initials-border-radius: 100%;
// --a-cv-initials-size: 32px;
// --a-cv-initials-padding: ;
// --a-cv-initials-font-size: 14px;
--a-cv-initials-font-weight: 700;
// --a-cv-initials-text-color: @g_Accent-FG;
--a-cv-initials-background-color: @g_Accent-BG;
// --a-cv-initials-background-image: ;
// --a-cv-title-font-size: ;
// --a-cv-title-font-weight: ;
// --a-cv-title-line-height: ;
// --a-cv-title-text-color: ;
--a-cv-subtitle-font-size: 12px;
--a-cv-subtitle-font-weight: 400;
--a-cv-subtitle-line-height: 16px;
--a-cv-subtitle-text-color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 60%), 100%), desaturate(lighten(@g_Region-BG, 60%), 50%)), 100%);
// --a-cv-badge-font-size: ;
// --a-cv-badge-font-weight: ;
// --a-cv-badge-line-height: ;
// --a-cv-badge-text-color: ;
// --a-cv-badge-background-color: ;
// --a-cv-badge-border-radius: ;
// --a-cv-badge-padding: ;
--a-cv-body-padding-x: 16px;
--a-cv-body-padding-y: 16px;
// --a-cv-body-background-color: ;
--a-cv-maincontent-font-size: 14px;
--a-cv-maincontent-line-height: 20px;
// --a-cv-maincontent-text-color: ;
--a-cv-subcontent-font-size: 11px;
--a-cv-subcontent-line-height: 16px;
--a-cv-subcontent-text-color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 60%), 100%), desaturate(lighten(@g_Region-BG, 60%), 50%)), 100%);
--a-cv-actions-border-width: 1px;
--a-cv-actions-border-color: @_base-alpha-2;
--a-cv-actions-padding-y: 16px;
--a-cv-actions-padding-x: 16px;
// --a-cv-actions-background-color: ;
}
// Card Table Model View Overrides
.a-TMV--cards {
// Override Footer
.a-GV-footer {
min-height: unset;
padding-top: 0;
padding-bottom: 0;
.js-rangeDisplay {
margin-top: var(--a-gv-footer-padding-y);
margin-bottom: var(--a-gv-footer-padding-y);
}
}
}
.a-CardView-fullLink:focus {
box-shadow: inset 0 0 0 var(--a-cv-border-width, 0) var(--a-cv-focus-border-color);
}
.a-CardView-media {
align-items: center;
justify-content: center;
a {
transition: opacity .2s ease;
&:focus {
opacity: .5;
}
}
}
.has-media--first {
--a-cv-media-padding-y: 0;
--a-cv-media-padding-x: 0;
}
.has-media--background {
--a-cv-media-padding-y: ~"0px";
--a-cv-media-padding-x: ~"0px";
--a-cv-text-color: #fff;
--a-cv-subtitle-text-color: rgba(255, 255, 255, .65);
--a-cv-subcontent-text-color: rgba(255, 255, 255, .65);
--a-cv-badge-background-color: rgba(255, 255, 255, .25);
a:not([class]) {
color: inherit;
&:hover,
&:focus {
text-decoration: underline;
}
}
}
// Actions
.a-CardView-button {
--a-button-font-size: 12px;
--a-button-line-height: 16px;
--a-button-border-width: ~"0px";
--a-button-border-radius: @g_Button-BorderRadius;
--a-button-background-color: @g_Button-BG;
--a-button-text-color: @g_Button-Text;
--a-button-shadow: 0 0 0 1px fade(@_base, 12.5) inset;
--a-button-hover-background-color: lighten(@g_Button-BG, 10%);
--a-button-hover-shadow: 0 0 0 1px @_base-alpha-5 inset;
--a-button-active-background-color: darken(@g_Button-BG, 10%);
--a-button-focus-background-color: lighten(@g_Button-BG, 15%);
transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.a-CardView-button--hot {
--a-button-background-color: @l_Button-Hot-BG;
--a-button-text-color: @l_Button-Hot-Text;
--a-button-hover-background-color: lighten(@l_Button-Hot-BG, 5%);
--a-button-active-background-color: darken(@l_Button-Hot-BG, 5%);
--a-button-focus-background-color: lighten(@l_Button-Hot-BG, 5%);
}
/* ==========================================================================
Card Variations
========================================================================== */
// Style A (non-flush image, closer to rw card)
.t-CardsRegion--styleA {
--a-cv-overflow: hidden;
--a-cv-media-background-color: @_base-alpha-1;
--a-cv-media-overlay-color: rgba(0, 0, 0, .75);
--a-cv-header-border-width: ~"0px";
--a-cv-header-background-color: unset;
--a-cv-actions-border-width: ~"0px";
--a-cv-actions-background-color: unset;
--a-cv-icon-container-size: 40px;
--a-cv-icon-size: 20px;
--a-cv-icon-border-radius: 3px;
--a-cv-icon-image-size: var(--a-cv-icon-container-size);
--a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-size: var(--a-cv-icon-container-size);
--a-cv-initials-font-size: 20px;
--a-cv-initials-font-weight: 400;
--a-cv-badge-padding: 4px 8px;
--a-cv-badge-border-radius: 20px;
.has-media--body,
.has-media--first {
--a-cv-media-border-radius: 3px;
--a-cv-media-padding-y: 16px;
--a-cv-media-padding-x: 16px;
.a-CardView-media {
margin-left: var(--a-cv-media-padding-x);
margin-right: var(--a-cv-media-padding-x);
padding: 0;
}
}
.has-media--first {
.a-CardView-media {
margin-top: var(--a-cv-media-padding-y);
}
}
.has-icon--top {
--a-cv-icon-container-size: 96px;
--a-cv-icon-size: 48px;
--a-cv-icon-border-radius: 8px;
--a-cv-icon-image-size: var(--a-cv-icon-container-size);
--a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-size: var(--a-cv-icon-container-size);
--a-cv-initials-font-size: 24px;
}
// Remove extra spacing
.has-media--first .a-CardView-header + .a-CardView-body,
.has-media--background .a-CardView-header + .a-CardView-body,
.a-CardView-body + .a-CardView-actions {
padding-top: 0;
}
// Row
.a-CardView-items--row {
// .a-CardView-body {
// grid-column-start: 2;
// }
.t-CardsRegion--styleA .a-CardView-actions {
flex-direction: column;
align-items: flex-end;
grid-column: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.a-CardView-media {
margin-top: var(--a-cv-media-padding-y);
margin-bottom: var(--a-cv-media-padding-y);
margin-right: 0;
.u-RTL & {
margin-right: var(--a-cv-media-padding-x);
margin-left: 0;
}
}
}
}
// Style B (centered header)
.t-CardsRegion--styleB {
--a-cv-overflow: hidden;
--a-cv-media-background-color: @_base-alpha-1;
--a-cv-media-overlay-color: rgba(0, 0, 0, .75);
--a-cv-icon-container-size: 64px;
--a-cv-icon-size: 32px;
--a-cv-icon-border-radius: 4px;
--a-cv-icon-image-size: var(--a-cv-icon-container-size);
--a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-size: var(--a-cv-icon-container-size);
--a-cv-initials-font-size: 32px;
--a-cv-initials-font-weight: 400;
--a-cv-media-overlay-color: rgba(0, 0, 0, .75);
--a-cv-media-padding-y: ~"0px";
--a-cv-media-padding-x: ~"0px";
--a-cv-header-border-width: ~"0px";
--a-cv-header-background-color: unset;
--a-cv-actions-border-width: ~"0px";
--a-cv-actions-background-color: unset;
--a-cv-title-font-size: 20px;
--a-cv-title-line-height: 28px;
--a-cv-badge-padding: 4px 12px;
--a-cv-badge-border-radius: 20px;
// Icon Top
.has-icon--top {
--a-cv-icon-container-size: 112px;
--a-cv-icon-size: 32px;
--a-cv-icon-border-radius: 4px;
--a-cv-icon-image-size: var(--a-cv-icon-container-size);
--a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
--a-cv-initials-size: var(--a-cv-icon-container-size);
--a-cv-initials-font-size: 32px;
.a-CardView-iconWrap {
margin-left: ~"calc(var(--a-cv-header-padding-x) * -1)";
margin-right: ~"calc(var(--a-cv-header-padding-x) * -1)";
margin-top: ~"calc(var(--a-cv-header-padding-y) * -1)";
.a-CardView-initials,
.a-CardView-icon,
.a-CardView-iconImg {
width: 100%;
border-radius: 0;
}
}
.a-CardView-icon:before {
border-radius: 100%;
background-color: @_base-shadow-4;
text-shadow: 0 1px 1px @_base-shadow-4;
margin: auto;
padding: ~"calc(var(--a-cv-icon-size) / 2)";
}
}
// Icon Start
.has-icon--start {
.a-CardView-iconWrap {
margin-bottom: var(--a-cv-header-item-spacing-x, 12px);
}
}
// Icon End
.has-icon--end {
.a-CardView-iconWrap {
margin-top: var(--a-cv-header-item-spacing-x, 12px);
grid-area: badge-bottom;
}
.a-CardView-headerBody {
grid-area: icon-top;
}
.a-CardView-badge {
grid-area: body;
}
}
.a-CardView-iconWrap {
grid-area: icon-top;
margin-right: unset;
margin-left: unset;
display: flex;
justify-content: center;
}
.a-CardView-headerBody {
text-align: center;
}
.a-CardView-badge {
margin-left: auto;
margin-right: auto;
grid-area: badge-bottom;
&:not(:first-child) {
margin-top: var(--a-cv-header-item-spacing-x, 12px);
}
}
// Display Label
.a-CardView-badgeLabel {
border: unset;
clip: unset;
height: unset;
margin: unset;
overflow: unset;
padding: unset;
position: unset;
width: unset;
}
.a-CardView-actions {
flex-direction: column;
}
// Full Width
.a-CardView-actionsPrimary {
.a-CardView-button {
width: 100%;
}
.a-CardView-button + .a-CardView-button {
margin-top: 4px;
}
}
// Inline
.a-CardView-actionsSecondary {
text-align: center;
&:not(:only-child) {
margin-top: 8px;
}
}
}
// Style C
.t-CardsRegion--styleC {
--a-cv-overflow: hidden;
--a-cv-media-background-color: @_base-alpha-1;
--a-cv-media-overlay-color: rgba(0, 0, 0, .75);
--a-cv-media-padding-y: ~"0px";
--a-cv-media-padding-x: ~"0px";
--a-cv-header-border-width: ~"0px";
--a-cv-header-background-color: unset;
--a-cv-actions-border-width: ~"0px";
--a-cv-actions-background-color: unset;
.has-title.has-body:not(.has-media--body),
.has-title.has-secondary:not(.has-media--body),
.has-subtitle.has-body:not(.has-media--body),
.has-subtitle.has-secondary:not(.has-media--body),
.has-icon.has-body:not(.has-media--body),
.has-icon.has-secondary:not(.has-media--body),
.has-badge.has-body:not(.has-media--body),
.has-badge.has-secondary:not(.has-media--body) {
.a-CardView-body {
padding-top: 0;
}
}
// Row
.a-CardView-items--row {
.a-CardView-body {
grid-column-start: 3;
}
.a-CardView-actions {
flex-direction: column;
align-items: flex-end;
grid-column: 4;
grid-row-start: 1;
grid-row-end: 4;
}
.a-CardView:not(.has-icon),
.has-icon--top,
.has-icon--end {
--a-cv-icon-spacer: ~"0px";
}
.has-media {
@media (max-width: 768px) {
grid-template-columns: minmax(20px, 80px) minmax(0, var(--a-cv-icon-spacer, 44px)) 1fr minmax(0, auto);
}
}
}
}
/* ==========================================================================
Cards Container
========================================================================== */
@l_Card-BG: @g_Region-BG;
.t-Card {
box-shadow: 0 2px 4px -2px @_base-shadow-3;
}
.t-Card-wrap {
border-radius: 2px;
background-color: @l_Card-BG;
border-color: @_base-alpha-3;
&:focus {
border-color: @g_Focus;
}
}
.t-Card-icon {
color: @l_Card-BG;
}
.t-Card-desc {
color: fade(contrast(@l_Card-BG, desaturate(darken(@l_Card-BG, 85%), 100%), desaturate(lighten(@l_Card-BG, 85%), 50%)), 100%);
}
.t-Card-info,
.t-Card-subtitle {
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, 85%), lighten(@l_Card-BG, 85%)), 100%);
}
.t-Card-colorFill,
.t-Card-icon {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-Cards--featured .t-Card-body {
border-top-color: @_base-alpha-3;
}
.t-Cards--basic {
.t-Card-titleWrap {
box-shadow: 0 -1px 0 @_base-alpha-2 inset;
}
}
.t-Cards--compact {
.t-Card-titleWrap {
box-shadow: 0 -1px 0 @_base-alpha-2 inset;
}
}
.t-Cards--featured {
.t-Card-body {
border-top-color: @_base-alpha-3;
}
}
.t-Cards--block {
.t-Icon {
background-color: @_base-alpha-4;
text-shadow: 0 1px 1px @_base-shadow-4;
}
}
.t-Cards--animRaiseCard {
.t-Card:hover {
box-shadow: 0 10px 4px -4px @_base-shadow-2;
}
}
/* Sample Footer
========================================================================== */
.t-Cards--sampleAppsFooter {
margin-top: 32px;
.t-Card {
box-shadow: none;
}
.t-Cards-item {
display: block;
flex-grow: 1;
width: 25%;
@media only screen and (max-width: 480px) {
width: 50%;
}
}
.t-Card-wrap,
.t-Card-icon {
background-color: transparent;
border-color: transparent;
}
.t-Card-icon {
transition: .2s ease;
}
.t-Icon {
background-color: @_base-bg-alpha-13;
box-shadow: 0 0 0 1px @_base-alpha-4 inset;
}
}
/**
* 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;
}
// @comment_BG: contrast(@g_Region-BG, darken(@g_Region-BG, 3%), lighten(@g_Region-BG, 3%), 43%);
@comment_icon_bg: contrast(@g_Region-BG, darken(@g_Region-BG, 5%), lighten(@g_Region-BG, 5%), 43%);
// @comment_FG: fade(contrast(@comment_BG, desaturate(darken(@comment_BG, 100%), 100%), desaturate(lighten(@comment_BG, 100%), 50%)), 100%);
// @comment_BGX: contrast(@g_Accent-BG, darken(@g_Accent-BG, 57%), lighten(@g_Accent-BG, 57%), 43%);
// @comment_BGY: desaturate(@comment_BGX, 48%);
@comment_BG: @_base-alpha-2; //darken(@comment_BGY, 3%);
@comment_FG: @_base; // fade(contrast(@comment_BG, desaturate(darken(@comment_BG, 100%), 100%), desaturate(lighten(@comment_BG, 100%), 50%)), 100%);
@comment_basic_BG: contrast(@g_Region-BG, darken(@g_Region-BG, 1.5%), lighten(@g_Region-BG, 1.5%), 43%);
// @active_comment_BGX: contrast(@g_Accent-BG, darken(@g_Accent-BG, 57%), lighten(@g_Accent-BG, 57%), 43%);
// @active_comment_BGY: desaturate(@active_comment_BGX, 48%);
@active_comment_BG: @_base-alpha-4; //darken(@active_comment_BGY, 12%);
@active_comment_FG: @_base; //fade(contrast(@active_comment_BG, desaturate(darken(@active_comment_BG, 100%), 100%), desaturate(lighten(@active_comment_BG, 100%), 50%)), 100%);
.t-Comments--chat {
.t-Comments-comment {
background-color: @comment_BG;
color: @comment_FG;
&:after {
border-color: @_base-alpha-0;
border-right-color: @comment_BG;
.u-RTL & {
border-right-color: @_base-alpha-0;
border-left-color: @comment_BG;
}
}
}
.t-Comments-item.is-active .t-Comments-comment {
background-color: @active_comment_BG;
color: @active_comment_FG;
&:after {
border-right-color: @active_comment_BG;
.u-RTL & {
border-right-color: @_base-alpha-0;
border-left-color: @active_comment_BG;
}
}
}
}
.t-Comments--basic {
.t-Comments-item.is-active {
background-color: @comment_basic_BG;
}
}
.t-Comments-item.is-systemMessage {
background-color: contrast(@comment_BG, darken(@comment_BG, 5%), lighten(@comment_BG, 5%), 43%);
}
.t-Comments-info {
color: @_base-alpha-10;
}
.t-Comments-comment {
color: @_base;
&:after {
// border-color: rgba(0, 0, 0, 0);
}
}
.t-Completeness {
background-color: @_base-bg-alpha-13;
box-shadow: 0 0 0 1px @_base-alpha-4 inset;
}
a.t-Completeness:hover {
.t-Completeness-labelWrap {
background-color: @_base-alpha-7;
}
.t-Completeness-label {
background-color: @_base-bg-alpha-13;
}
}
.t-Completeness-fill {
box-shadow: 0 0 0 1px @_base-alpha-5 inset;
}
.t-Completeness-label {
background-color: @_base-bg-alpha-11;
color: @_base-alpha-11;
}
.t-ConfigPanel {
box-shadow: 0 -1px 0 @_base-alpha-4 inset;
}
.t-ConfigPanel-about {
background-color: lighten(#FFCB3D, 32%);
color: #565656;
box-shadow: 0 -1px 0 @_base-alpha-4 inset;
}
.t-ConfigPanel-main {
box-shadow: -1px 0 0 @_base-alpha-4 inset;
@media only screen and (max-width: 640px) {
box-shadow: 0 -1px 0 @_base-alpha-4 inset;
}
}
.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;
box-shadow: 0 -1px 0 @_base-alpha-2 inset;
&:hover {
background-color: @_base-alpha-2;
box-shadow: 0 1px 0 @_base-alpha-2;
}
}
.t-ConfigPanel-attrLabel {
// color: @g_Region-FG;
}
.t-ConfigPanel-attrValue {
color: @g_Link-Base;
}
/* Body Background -- Shadow
========================================================================== */
.t-ContentBlock--shadowBG .t-ContentBlock-body {
background-color: @_base-alpha-2;
border-color: @_base-alpha-4;
}
/* Body Background -- Light
========================================================================== */
.t-ContentBlock--lightBG .t-ContentBlock-body {
border-color: @_base-alpha-4;
}
/* ==========================================================================
Content Row
========================================================================== */
.t-ContentRow-item {
border-bottom-color: @_base-alpha-3;
}
.t-ContentRow-iconWrap,
.t-ContentRow-description,
.t-ContentRow-misc {
color: @g_Region-FG-Light;
}
.t-Dialog {
background-color: @g_Region-BG;
}
/* Scrollbars
========================================================================== */
.t-Dialog {
::-webkit-scrollbar-thumb {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 25%), lighten(@g_Region-BG, 25%), 43%);
&:hover {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 30%), lighten(@g_Region-BG, 30%), 43%)
}
}
&::-webkit-scrollbar-track {
background-color: @g_Region-BG;
}
}
.t-DialogRegion-buttons {
// border-top-color: @_base-alpha-2;
box-shadow: inset 0 1px 0 @_base-alpha-2;
}
.a-FS-control + .a-FS-control {
border-top-color: @_base-alpha-4;
}
.a-FS-toggle {
background-color: @_base-alpha-6;
color: @g_Accent-FG;
border-radius: 2px;
&:hover {
background-color: @_base-alpha-7;
}
&:focus {
background-color: @g_Accent-BG;
box-shadow: 0 1px 1px 0 fade(@g_Accent-BG, 85%);
}
}
.a-FS-clearButton,
.a-FS-toggleOverflow {
background-color: transparent;
color: @g_Link-Base;
}
.a-FS-search,
.a-FS-filter {
span.apex-item-icon {
color: @_base-alpha-10;
}
}
.a-FS-search {
border-bottom-color: @_base-alpha-4;
}
.a-FS .apex-group-label {}
.a-FS-clearAll {
}
.a-FS-clear {
outline: none;
--a-button-background-color: @_base-alpha-2;
// --a-button-text-color: #000;
--a-button-hover-background-color: @_base-alpha-3;
// --a-button-hover-text-color: #000;
--a-button-active-background-color: @_base-alpha-4;
// --a-button-active-text-color: #000;
--a-button-focus-background-color: @_base-alpha-4;
--a-button-focus-border-color: @g_Accent-BG;
// --a-button-focus-text-color: #000;
// Temp
&:focus {
box-shadow: inset 0 0 0 1px @g_Accent-BG;
}
}
.a-FS-currentList {
--a-fs-filter-group-border-color: @_base-alpha-4;
--a-fs-filter-group-label-text-color: @_base-shade-6;
}
.a-FS-facetChart {
--jui-dialog-titlebar-border-width: 1px;
--jui-dialog-titlebar-border-color: @_base-alpha-2;
--jui-dialog-titlebar-background-color: @g_Region-Header-BG;
--jui-dialog-titlebar-text-color: @g_Region-FG;
--a-fs-chart-border-color: @_base-alpha-4;
}
/* File Drop
======================================================================= */
:root {
--a-filedrop-border-radius: @g_Form-BorderRadius;
--a-filedrop-border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
--a-filedrop-background-color: @l_Form-Item-hoverBG;
--a-filedrop-focus-border-color: @g_Focus;
--a-filedrop-dragging-background-color: fade(@g_Focus, 10%);
--a-filedrop-dragging-border-color: @g_Focus;
--a-filedrop-progress-background-color: @_base-alpha-4;
--a-filedrop-progress-bar-background-color: @g_Focus;
}
.apex-item-file-download {
margin-top: .4rem;
display: inline-block;
}
.apex-item-filedrop-action {
// margin-top: 12px;
}
.apex-item-group--file-block {
--a-filedrop-item-spacing: 6px;
--a-filedrop-padding-y: 24px;
.apex-item-filedrop-icon {
// margin-bottom: 0;
}
}
.apex-item-group--file-browse {
--a-filedrop-padding-y: 0px;
--a-filedrop-padding-x: 0px;
// --a-filedrop-item-spacing: 0px;
--a-filedrop-icon-size: 16px;
--a-filedrop-heading-font-size: 12px;
--a-filedrop-heading-line-height: 16px;
--a-filedrop-heading-font-weight: 400;
--a-filedrop-text-color: fade(@g_Form-Item-FG, 70%);
.apex-item-filedrop-body,
.apex-item-filedrop-icon {
padding: .4rem .8rem;
}
.apex-item-filedrop-icon {
border-left-width: var(--a-filedrop-border-width);
border-left-style: var(--a-filedrop-border-style);
border-left-color: var(--a-filedrop-border-color);
background-color: @g_Form-Item-BG;
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
.u-RTL & {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
border-left-width: 0;
border-right-width: var(--a-filedrop-border-width);
border-right-style: solid;
border-right-color: var(--a-filedrop-border-color);
}
}
.apex-item-filedrop {
flex-direction: row;
height: auto;
outline: none;
&:hover {
--a-filedrop-text-color: @g_Form-Item-FG;
.apex-item-filedrop-icon {
background-color: @l_Form-Item-focusBG;
color: @g_Form-Item-FG;
}
}
&:focus {
.apex-item-filedrop-icon {
border-color: @g_Focus;
background-color: @g_Focus;
color: @g_Focus-FG;
}
}
}
// Large
.t-Form-fieldContainer--floatingLabel.t-Form-fieldContainer--large & {
--a-filedrop-heading-font-size: 14px;
.apex-item-filedrop-body,
.apex-item-filedrop-icon {
padding-top: 6px;
padding-bottom: 6px;
}
.apex-item-filedrop-icon {
padding-left: 12px;
padding-right: 12px;
}
}
// X-Large
.t-Form-fieldContainer--floatingLabel.t-Form-fieldContainer--xlarge & {
--a-filedrop-heading-font-size: 16px;
.apex-item-filedrop-body,
.apex-item-filedrop-icon {
padding-top: 8px;
padding-bottom: 8px;
}
.apex-item-filedrop-icon {
padding-left: 16px;
padding-right: 16px;
}
}
}
/**
* Import Compass and Theme Variables
*/
/* Footer
========================================================================== */
.t-Footer {
border-top: 1px solid @_base-alpha-2;
background-color: @_base-alpha-1;
}
/* Footer Top Button
========================================================================== */
.t-Footer-topButton {
background-color: @g_Region-BG;
color: contrast(@g_Body-Text, darken(@g_Body-Text, 20%), lighten(@g_Body-Text, 20%), 43%);
box-shadow: 0 0 0 1px @_base-alpha-4 inset;
&:hover {
box-shadow: 0 0 0 1px @_base-alpha-4 inset, 0 2px 4px @_base-shadow-2;
}
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
@l_FormItemBG: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
:root {
--a-field-input-text-color: @g_Form-Item-FG;
--a-field-input-background-color: @g_Form-Item-BG;
--a-field-input-border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
}
.t-Form-inputContainer:before {
color: @g_Form-Item-FG;
}
.a-IRR-search-field,
.a-IG .a-Toolbar-inputText,
.a-IRR-selectList,
.a-Toolbar-selectList {
--a-field-input-text-color: @g_Form-Item-FG;
--a-field-input-background-color: @g_Form-Item-BG;
--a-field-input-border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
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%);
&:hover {
--a-field-input-background-color: @l_Form-Item-hoverBG;
background-color: @l_Form-Item-hoverBG;
}
&:focus {
--a-field-input-background-color: @l_Form-Item-focusBG;
--a-field-input-border-color: @g_Focus;
background-color: @l_Form-Item-focusBG !important;
border-color: @g_Focus !important;
outline: none;
}
}
.a-IG .a-Toolbar-inputText {
// box-shadow: 0 0 0 1px contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%) inset;
}
.a-Toolbar-group--together .a-Toolbar-item + .a-Toolbar-item {
margin-left: -1px;
.u-RTL & {
margin-left: 0;
margin-right: -1px;
}
}
.apex-item-file-dropzone-label,
.apex-item-file-dropzone-icon {
border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
}
.apex-item-file:focus + .apex-item-file-dropzone .apex-item-file-dropzone-label {
border-color: @g_Focus;
}
.apex-item-file:focus + .apex-item-file-dropzone .apex-item-file-dropzone-icon {
background-color: @g_Focus;
border-color: @g_Focus;
}
.apex-item-textarea,
.apex-item-text,
.apex-item-select,
.apex-item-multi,
select.listmanager,
select.ui-datepicker-month,
select.ui-datepicker-year,
.oj-text-field .oj-text-field-container,
.oj-datepicker-inline .oj-datepicker-content {
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%);
&.apex-page-item-error {
border-color: contrast(@g_Danger-BG, darken(@g_Danger-BG, 10%), lighten(@g_Danger-BG, 10%), 43%);
&:required:valid {
border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
}
}
}
.oj-text-field.oj-invalid .oj-text-field-container {
border-color: contrast(@g_Danger-BG, darken(@g_Danger-BG, 10%), lighten(@g_Danger-BG, 10%), 43%);
}
.ui-dialog {
.u-Form-inputContainer input,
.u-Form-inputContainer select,
.u-Form-inputContainer textarea {
--a-field-input-text-color: @g_Form-Item-FG;
--a-field-input-background-color: @g_Form-Item-BG;
--a-field-input-border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
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%);
&:hover {
--a-field-input-background-color: @l_Form-Item-hoverBG;
background-color: @l_Form-Item-hoverBG;
}
&:focus {
--a-field-input-background-color: @l_Form-Item-focusBG;
--a-field-input-border-color: @g_Focus;
background-color: @l_Form-Item-focusBG !important;
border-color: @g_Focus !important;
// outline: none;
}
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
// color: @g_Form-Item-FG !important;
// background-color: @g_Form-Item-BG !important;
// border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%) !important;
// -webkit-text-fill-color: @g_Form-Item-FG !important;
// transition: background-color 5000s ease-in-out 0s;
}
// Floating Label BG Color for Textarea
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--textarea.js-show-label .t-Form-label:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--textarea.is-active .t-Form-label:before {
background-color: @g_Form-Item-BG;
}
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--textarea:focus-within .t-Form-label:before {
background-color: @l_Form-Item-focusBG !important;
}
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--textarea:hover .t-Form-label:before {
background-color: @l_Form-Item-hoverBG;
}
// Setting Focus Label Hot
// .t-Form-fieldContainer--floatingLabel.is-focused .t-Form-label {
// color: @g_Focus;
// }
// Adding border radius for text, select, and textarea items
.apex-item-text,
.apex-item-select,
.apex-item-textarea,
.oj-text-field .oj-text-field-container,
.oj-datepicker-inline .oj-datepicker-content {
border-radius: @g_Form-BorderRadius;
}
.apex-item-multi .apex-item-text.apex-item-popup-lov {
background-color: transparent;
border-color: transparent;
}
.t-Form-fieldContainer--floatingLabel .t-Form-inputContainer .apex-item-display-only {
color: @g_Form-Item-FG;
background-color: @l_Form-Item-hoverBG;
border-color: @l_FormItemBG;
border-style: dashed;
}
/* File Upload */
.apex-item-file-dropzone-label {
background-color: @l_Form-Item-hoverBG;
color: fade(@g_Form-Item-FG, 70%);
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
.u-RTL & {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
}
}
.apex-item-file-dropzone-icon {
background-color: @g_Form-Item-BG;
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
.u-RTL & {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
}
}
.apex-item-file:hover + .apex-item-file-dropzone {
.apex-item-file-dropzone-label {
color: @g_Form-Item-FG;
}
.apex-item-file-dropzone-icon {
background-color: @l_Form-Item-focusBG;
color: @g_Form-Item-FG;
}
}
.apex-item-file:focus + .apex-item-file-dropzone {
.apex-item-file-dropzone-label {
border-color: @g_Focus;
color: @g_Form-Item-FG;
}
.apex-item-file-dropzone-icon {
border-color: @g_Focus;
background-color: @g_Focus;
color: @g_Focus-FG;
}
}
.apex-item-textarea:focus,
.apex-item-text:focus,
.apex-item-select:focus,
.apex-item-multi:focus,
select.listmanager:focus,
.oj-text-field.oj-focus .oj-text-field-container,
.oj-inputdatetime-inline.oj-focus .oj-datepicker-content {
background-color: @l_Form-Item-focusBG !important;
border-color: @g_Focus !important;
}
.apex-item-text.a-PopupLOV-search:focus + .a-Button--popupLOV,
.apex-item-text.a-PopupLOV-search.is-focused + .a-Button--popupLOV,
.apex-item-text.apex-item-popup-lov:focus + .a-Button--popupLOV,
.apex-item-text.apex-item-popup-lov.is-focused + .a-Button--popupLOV,
.apex-item-multi:focus + .a-Button--popupLOV,
.apex-item-multi.is-focused + .a-Button--popupLOV,
.apex-item-text.a-PopupLOV-search:focus + .apex-item-icon + .a-Button--popupLOV,
.apex-item-text.a-PopupLOV-search.is-focused + .apex-item-icon + .a-Button--popupLOV,
.apex-item-text.apex-item-popup-lov:focus + .apex-item-icon + .a-Button--popupLOV,
.apex-item-text.apex-item-popup-lov.is-focused + .a-Button--popupLOV,
.apex-item-multi:focus + .apex-item-icon + .a-Button--popupLOV,
.apex-item-multi.is-focused + .apex-item-icon + .a-Button--popupLOV {
box-shadow: 0 0 0 1px @g_Focus inset;
}
.apex-item-textarea:hover,
.apex-item-text:hover,
.apex-item-select:hover,
.apex-item-multi:hover,
select.listmanager:hover,
.oj-datepicker-inline .oj-datepicker-content,
.oj-text-field:hover .oj-text-field-container {
background-color: @l_Form-Item-hoverBG;
}
.t-Form-inputContainer input::-webkit-input-placeholder {
color: fadeout(@g_Form-Item-FG, 38%);
opacity: 1;
}
.t-Form-inputContainer input::-moz-placeholder {
color: fadeout(@g_Form-Item-FG, 38%);
opacity: 1;
}
.t-Form-inputContainer input:-ms-input-placeholder {
color: fadeout(@g_Form-Item-FG, 38%);
opacity: 1;
}
.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;
border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
}
.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,
.u-Form-label {
color: @g_Form-Label;
// .text-dark();
}
.t-Form-fieldContainer--floatingLabel .t-Form-label {
color: fade(contrast(@g_Form-Label, desaturate(darken(@g_Form-Label, 20%), 100%), desaturate(lighten(@g_Form-Label, 20%), 50%)), 100%);
}
.t-Form-error {
color: @g_Danger-BG;
}
// .has-icon:required:valid + .apex-item-icon {
// color: @g_Form-Item-FG;
// }
.t-Form-postText {
color: fade(contrast(@g_Form-Label, desaturate(darken(@g_Form-Label, 50%), 100%), desaturate(lighten(@g_Form-Label, 50%), 50%)), 100%);
}
.t-Form--search {
input.t-Form-searchField {
background-color: @g_Form-Item-BG;
color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 85%), lighten(@g_Form-Item-BG, 85%), 43%);
}
}
.oj-helphints-inline-container,
.oj-user-assistance-inline-container,
.oj-user-assistance-inline-container .oj-message-detail {
--oj-user-assistance-inline-text-color: fade(contrast(@g_Form-Label, desaturate(darken(@g_Form-Label, 50%), 100%), desaturate(lighten(@g_Form-Label, 50%), 50%)), 100%);
}
.a-Button.a-Button--calendar,
.a-Button.a-Button--popupLOV,
.a-Button.a-Button--colorPicker {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
.u-RTL & {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
}
}
.t-Form-inputContainer input.hasDatepicker,
.t-Form-inputContainer input.popup_lov {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
.u-RTL & {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
}
}
// Date Picker
.ui-datepicker {
border-color: contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%);
}
// Inline Date Picker
body .ui-datepicker.ui-datepicker-inline {
outline: none;
box-shadow: none !important;
background-color: transparent !important;
}
// Inline Date Picker within Floating Label
.t-Form-fieldContainer--floatingLabel .ui-datepicker-inline {
box-shadow: none !important;
background-color: transparent;
padding: 0;
border: none;
.ui-widget-header {
background-color: transparent !important;
}
}
/******************************************************************************
Checkbox + Radio Buttons
******************************************************************************/
:root,
.u-selector {
--a-checkbox-background-color: @g_Form-Item-BG;
--a-checkbox-border-color: @_base-alpha-5;
--a-checkbox-text-color: @g_Focus-FG;
--a-checkbox-checked-background-color: @g_Focus;
--a-checkbox-checked-text-color: @g_Focus-FG;
--a-checkbox-hover-background-color: @_base-alpha-2;
}
.u-selector {}
.apex-item-group--rc input {
& + label {
&:before {
// border-color: @_base-alpha-4;
--a-checkbox-background-color: @g_Form-Item-BG;
box-shadow: inset @_base-alpha-5 0 0 0 1px;
background-color: @g_Form-Item-BG;
}
&:after {
color: @g_Focus-FG;
}
}
/* Hover
========================================================================== */
&:hover + label:before {
box-shadow: inset @_base-alpha-7 0 0 0 1px;
}
/* Focus
========================================================================== */
&:focus + label:before {
box-shadow: inset @g_Focus 0 0 0 1px, inset @g_Focus-FG 0 0 0 2px;
}
}
.apex-item-single-checkbox input {
/* Hover
========================================================================== */
&:hover + label:before {
--a-checkbox-border-color: @_base-alpha-7;
// box-shadow: inset @_base-alpha-7 0 0 0 1px;
}
/* Checked & Hover
========================================================================== */
&:checked {
& + label:hover:before {
--a-checkbox-background-color: darken(@g_Focus, 5%);
}
}
}
.checkbox_group input,
.radio_group input {
& + label {
&:before {}
}
/* Focus
========================================================================== */
&:focus + label:before {}
&:focus:checked + label:before {
box-shadow: inset @g_Focus 0 0 0 1px, inset @g_Focus-FG 0 0 0 2px;
}
/* Checked
========================================================================== */
&:checked {
& + label:before {
background-color: @g_Focus;
box-shadow: none;
border-color: transparent;
}
}
/* Checked & Hover
========================================================================== */
&:checked {
& + label:hover:before {
background-color: darken(@g_Focus, 5%);
}
}
}
.u-checkbox:focus,
.apex-item-single-checkbox input:focus + .u-checkbox,
.apex-item-single-checkbox input:focus + label,
.u-radio:focus {
&:before {
--a-checkbox-border-color: @g_Focus;
box-shadow: inset @g_Focus-FG 0 0 0 1px;
}
}
/******************************************************************************
Radio Specific
******************************************************************************/
.radio_group input {
& + label {
&:after {
background-color: @g_Focus-FG;
}
}
}
/******************************************************************************
Radio Button Pills with Checkbox + Radio Buttons
******************************************************************************/
.t-Form-fieldContainer--radioButtonGroup .checkbox_group input {
& + label {
&:before {
background-color: darken(@g_Form-Item-BG, 7.5%);
border-color: transparent;
}
}
/* Focus
========================================================================== */
&:focus + label:before {
border-color: @g_Focus;
}
&:focus:checked + label:before {
border-color: @g_Form-Item-BG;
background-color: @g_Form-Item-BG;
box-shadow: 0 0 0 1px @g_Focus inset;
}
&:focus:checked + label:after {
color: @g_Focus;
}
/* Checked
========================================================================== */
&:checked {
& + label:before {
border-color: @g_Form-Item-BG;
background-color: @g_Form-Item-BG;
}
& + label:after {
color: @g_Focus;
}
}
}
/* Pre and Post Text Styles
========================================================================== */
.t-Form-fieldContainer--preTextBlock .t-Form-itemText--pre,
.t-Form-fieldContainer--postTextBlock .t-Form-itemText--post {
background-color: @g_Form-Item-BG;
box-shadow: 0 0 0 .1rem contrast(@g_Form-Item-BG, darken(@g_Form-Item-BG, 10%), lighten(@g_Form-Item-BG, 10%), 43%) inset;
border-radius: @g_Form-BorderRadius;
}
.t-Form-fieldContainer--preTextBlock {
.t-Form-itemText--pre {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
.u-RTL & {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
}
}
}
.t-Form-fieldContainer--postTextBlock {
.t-Form-itemText--post {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
.u-RTL & {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
}
}
}
/* Icon Focus State
========================================================================== */
.apex-item-has-icon:focus + .apex-item-icon,
.apex-item-multi.is-focused + .apex-item-icon {
color: @g_Focus;
}
/* ==========================================================================
Floating Labels
========================================================================== */
.t-Form-fieldContainer--floatingLabel {
.apex-item-icon {
// background-color: mix(@l_FormItemBG,transparent);
color: fade(contrast(@g_Form-Label, desaturate(darken(@g_Form-Label, 10%), 100%), desaturate(lighten(@g_Form-Label, 10%), 50%)), 100%);
box-shadow: -.1rem 0 0 @l_FormItemBG inset;
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
.u-RTL & {
box-shadow: .1rem 0 0 @l_FormItemBG inset;
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
}
}
// Required
&.is-required:before {
border-top-left-radius: @g_Form-BorderRadius;
.u-RTL & {
border-top-left-radius: 0;
border-top-right-radius: @g_Form-BorderRadius;
}
}
.apex-item-has-icon:focus + .apex-item-icon,
.apex-item-multi.is-focused + .apex-item-icon {
box-shadow: none;
background-color: @g_Focus;
color: @g_Focus-FG;
}
}
/* Help Button
========================================================================== */
.t-Form-helpButton {
&:focus .a-Icon {
color: @g_Focus;
}
}
/* Pill Buttons
========================================================================== */
/* Vertical Pills */
.t-Form-fieldContainer--radioButtonGroup .t-Form-itemWrapper > .apex-item-group {
& > .apex-item-option:first-of-type label {
border-radius: @g_Form-BorderRadius @g_Form-BorderRadius 0 0;
}
& > .apex-item-option:last-of-type label {
border-radius: 0 0 @g_Form-BorderRadius @g_Form-BorderRadius;
}
}
/* Horizontal Pills */
.t-Form-fieldContainer--radioButtonGroup .apex-item-grid .apex-item-grid-row:only-child {
.apex-item-option:first-of-type label {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
}
.apex-item-option:last-of-type label {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
}
}
.u-RTL {
.t-Form-fieldContainer--radioButtonGroup .apex-item-grid .apex-item-grid-row:only-child {
.apex-item-option:first-of-type label {
border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
}
.apex-item-option:last-of-type label {
border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
}
}
}
// Switch
/* ==========================================================================
Checkbox Switch
========================================================================== */
.a-Switch-toggle {
box-shadow: inset @_base-alpha-2 0 0 0 1px;
background-color: mix(@_base, @_base-bg, 45%);
&:before {
background-color: @_base-bg;
}
}
.a-Switch:hover {
.a-Switch-toggle {
background-color: @_base-alpha-11;
}
}
.a-Switch:active {
.a-Switch-toggle {}
}
.a-Switch input[type=checkbox]:focus + .a-Switch-toggle {
box-shadow: inset @g_Focus 0 0 0 1px, inset @_base-bg 0 0 0 2px;
}
.a-Switch input[type=checkbox]:checked + .a-Switch-toggle {
background-color: @g_Focus;
}
.a-Switch:hover input[type=checkbox]:checked + .a-Switch-toggle {
background-color: darken(@g_Focus, 5%);
}
.a-Switch input[type=checkbox]:indeterminate + .a-Switch-toggle {
&:before {
box-shadow: inset @_base-bg 0 0 0 1px;
background-color: @_base-bg-alpha-9;
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Header
========================================================================== */
.t-Header-branding {
background-color: @g_Header-BG;
}
.t-Header-logo,
.t-Header .t-Button--header.is-active,
.t-Header .t-Button--header {
color: @g_Header-FG;
&:hover {
text-decoration: none;
}
}
.t-Header-logo-link {
color: inherit;
// border-radius: 2px;
&:focus,
&:active:focus {
outline: none;
box-shadow:
0 0 0 1px lighten(@g_Focus, 15%) inset;
}
}
.t-HeroRegion-icon {
border-radius: 4px;
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-HeroRegion-title {
color: @g_Body-Text;
}
.t-HeroRegion-col--content {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 55%), 100%), desaturate(lighten(@g_Body-BG, 55%), 50%)), 100%);
}
/* Hero Region in Title Bar
========================================================================== */
.t-Body-title {
.t-HeroRegion-title,
.t-HeroRegion-col--content {
color: @g_Body-Title-FG;
}
}
.a-IG {
border-color: mix(@GVBody_bg, @_base, 92.5%);
background-color: @_base-bg;
}
.a-RV-toolbar,
.a-IG-dialog-side {
border-color: @_base-shade-4;
}
.a-IG-dialog-side {
background-color: @_base-shade-2;
}
.a-GV-hdr,
.a-IG-header {
border-color: mix(@GVBody_bg, @_base, 92.5%);
// background-color: @_base-shade-2;
background-color: @g_Region-Header-BG;
}
:root {
--a-gv-header-background-color: @g_Region-Header-BG;
--a-gv-background-color: @GVBody_bg;
}
.a-GV-table {
--a-gv-cell-border-color: mix(@GVBody_bg, @_base, 92.5%);
}
.a-GV-hdr {
box-shadow: inset 0 -1px 0 0 mix(@GVBody_bg, @_base, 92.5%);
}
.a-GV-w-frozen .a-GV-table,
.a-GV-w-hdr .a-GV-table {
border-color: @_base-shade-3 !important;
}
.a-GV-bdy {
background-color: @GVBody_bg;
}
.a-GV-header,
.a-GV-headerGroup,
.a-Toolbar-group {
border-color: mix(@GVBody_bg, @_base, 92.5%);
}
.a-GV-table .a-GV-cell {
border-color: mix(@GVBody_bg, @_base, 92.5%);
}
.a-GV-table tr.is-selected .a-GV-cell {
background-color: mix(@g_Focus, @_base-bg, 10%);
}
.a-GV-table tr.is-deleted.is-selected .a-GV-cell {
&.has-button {
background-color: fade(mix(@g_Focus, @_base-bg, 10%), 50%);
}
}
.a-IRR-paginationWrap--bottom {
border-top-color: mix(@GVBody_bg, @_base, 92.5%);
}
.a-IG-gridView .a-GV-footer {
border-color: mix(@GVBody_bg, @_base, 92.5%);
}
.a-GV-footer {
border-color: mix(@GVBody_bg, @_base, 92.5%);
background-color: mix(@GVBody_bg, @_base, 98.5%);
}
.a-GV-pageRange {
color: @_base-alpha-10;
}
.a-GV-pageButton {
color: @_base-alpha-10;
&:hover {
background-color: @_base-alpha-3;
}
}
.a-GV-pageSelector-item.is-selected .a-GV-pageButton {
background-color: @_base-alpha-5;
color: @_base-alpha-12;
}
.a-GV-table th.a-GV-controlBreakHeader {
background-color: @_base-alpha-2;
border-color: @_base-alpha-4;
color: @_base-alpha-11;
}
.a-GV-row.is-hover,
.a-IRR-table tr:hover td {
--a-gv-row-hover-background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 2%), lighten(@g_Region-BG, 2%), 43%);
}
.a-GV--editMode .a-GV-row.is-readonly .a-GV-cell,
.a-GV--editMode .a-GV-cell.is-readonly {
background-color: @_base-shade-1;
color: @_base-shade-6;
}
.a-IG-recordView {
.u-Form-fieldContainer .t-Button.t-Button--helpButton {
box-shadow: none !important;
background-color: transparent !important;
&:before,
&:after {
content: none;
}
&:hover {
.a-Icon {
opacity: 1;
}
}
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset !important;
}
}
}
// .a-IG {
// border-color: @_base-shade-3;
// background-color: @_base-shade-0;
// }
.a-IG-header,
.a-IGDialog-header,
.a-IGDialog-footer,
.a-IGDialog-side {
border-color: @_base-shade-3;
background-color: @_base-shade-1;
}
// .a-IG-gridView .a-GV-footer {
// border-color: @_base-shade-3;
// }
// .a-IG-button.a-IG-button--controls {
// background-color: transparent;
// }
// .a-IG-controlsCheckboxLabel {
// border-color: @_base-shade-5;
// background-color: @_base-bg-alpha-10;
// &:before {
// color: @g_Accent-FG;
// }
// &:hover {
// border-color: @_base-alpha-6;
// }
// &:active {
// background-color: inherit;
// }
// }
// .a-IG-controls .a-IG-controlsCheckbox:checked + .a-IG-controlsCheckboxLabel {
// background-color: @g_Accent-BG;
// border-color: @g_Accent-BG;
// &:before {}
// }
// .a-IG-controlsLabel {
// border-color: @_base-alpha-2;
// background-color: transparent;
// }
.a-GV-columnControls .a-Button {
color: @g_Button-Text;
background-color: @g_Button-BG;
box-shadow: 0 0 0 1px fade(@_base, 12.5) inset;
&.is-active {
background-color: darken(@g_Button-BG, 10%);
box-shadow: 0 0 0 1px fade(@_base, 2.5) inset;
}
}
.a-GV-floatingItem.is-expanded {
background-color: @_base-bg-alpha-12;
}
.a-GV-columnHandle,
.a-GV-cellMoveHandle {
opacity: .5;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCA0IDQiPjxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik0wIDBoMnYyaC0yeiIvPjwvc3ZnPg==);
&:hover {
opacity: .75;
}
}
// Splitter
:root {
--a-splitter-bar-background-color: @g_Button-BG;
--a-splitter-bar-border-color: fade(@_base, 12.5);
--a-splitter-bar-hover-background-color: lighten(@g_Button-BG, 10%);
--a-splitter-bar-active-background-color: var(--a-splitter-bar-hover-background-color);
--a-splitter-bar-focus-background-color: @g_Focus;
--a-splitter-bar-focus-border-color: var(--a-splitter-bar-focus-background-color);
--a-splitter-thumb-border-color: var(--a-splitter-bar-border-color);
--a-splitter-thumb-background-color: var(--a-splitter-bar-background-color);
--a-splitter-thumb-arrow-color: @g_Button-Text;
--a-splitter-thumb-hover-border-color: var(--a-splitter-bar-focus-background-color);
--a-splitter-thumb-hover-background-color: var(--a-splitter-bar-hover-background-color);
--a-splitter-thumb-focus-border-color: var(--a-splitter-bar-focus-background-color);
--a-splitter-thumb-focus-background-color: var(--a-splitter-bar-focus-background-color);
--a-splitter-thumb-focus-arrow-color: @g_Button-Text;
--a-splitter-thumb-focus-hover-background-color: var(--a-splitter-thumb-focus-background-color);
}
/*
{
"var" : "@irrBg",
"name" : "UTR.LESS.BACKGROUND",
"type" : "color",
"group": "UTR.LESS.INTERACTIVE_REPORTS"
}
*/
@irrBg: @g_Region-BG;
@menu_Tabs-Active-BG: darken(@g_Accent-BG, 5%);
@menu_Tabs-Active-Text: fade(contrast(@g_Accent-BG, darken(@g_Accent-BG, 50%), lighten(@g_Accent-BG, 50%)), 100%);
@menu_Tabs-Hover-BG: darken(@g_Accent-BG, 15%);
@menu_Tabs-Text: contrast(@g_Accent-BG);
:root {
--a-report-controls-cell-label-text-color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 85%), 100%), desaturate(lighten(@irrBg, 85%), 50%)), 100%);
--a-report-controls-cell-label-background-color: @irrBg;
--a-report-controls-cell-label-text-color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 85%), 100%), desaturate(lighten(@irrBg, 85%), 50%)), 100%);
}
.a-IRR {
border-radius: @g_Container-BorderRadius;
border-color: @_base-alpha-4;
background-color: @irrBg;
.a-IRR-pagination-label {
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 55%), 100%), desaturate(lighten(@irrBg, 55%), 50%)), 100%);
}
}
.a-IRR-dialogRow--header {
color: inherit;
}
.a-IRR-dialogList a {
color: inherit !important;
}
.a-IRR-reportSummary-value,
.a-IG-reportSummary-value {
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 85%), 100%), desaturate(lighten(@irrBg, 85%), 50%)), 100%);
}
.a-IRR-controlsContainer {
--a-report-controls-border-color: contrast(@g_Region-Header-BG, darken(@g_Region-Header-BG, 10%), lighten(@g_Region-Header-BG, 10%), 43%);
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 @_base-shadow-4
// }
.a-IRR-toolbar {
background: @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 {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
.u-RTL & {
border-top-right-radius: @g_Button-BorderRadius !important;
border-bottom-right-radius: @g_Button-BorderRadius !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !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 {
--a-gv-header-cell-border-color: contrast(@irrBg, darken(@irrBg, 10%), lighten(@irrBg, 10%), 43%);
background-color: contrast(@irrBg, darken(@irrBg, 2%), lighten(@irrBg, 2%), 43%);
border-top: 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%);
color: @_base-alpha-12;
&:hover {
background-color: contrast(@irrBg, darken(@irrBg, 5%), lighten(@irrBg, 5%), 43%);
}
&.is-active {
box-shadow: 0 1px 1px @_base-shadow-2 inset;
a {
color: inherit;
}
.a-IRR-headerSort {
color: inherit;
}
}
}
.a-IRR-header.is-active,
.a-GV-header.is-active {
background-color: rgba(32, 32, 32, 1);
color: #FFF;
}
.a-IRR-header--group {
background-color: contrast(@irrBg, darken(@irrBg, 4%), lighten(@irrBg, 4%), 43%);
}
.t-IRR-region {
box-shadow: 0 1px 2px @_base-shadow-2, 0 2px 4px -2px @_base-shadow-3;
}
.a-IRR-tableContainer .js-stickyTableHeader.is-stuck {
box-shadow: 0 1px @_base-alpha-4;
}
@media only screen and (max-width: 768px) {
.a-IRR-buttons {
&:before {
background-color: @_base-alpha-2;
}
}
}
.a-IRR-table tr td {
background-color: @irrBg;
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 85%), 100%), desaturate(lighten(@irrBg, 85%), 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;
}
}
.a-IRR-table td {
--a-gv-cell-border-color: mix(@irrBg, @_base, 95%);
border-left: 1px solid mix(@irrBg, @_base, 95%);
border-top: 1px solid mix(@irrBg, @_base, 95%);
}
.a-IRR-table tr td:last-child {
border-right-color: darken(@irrBg, 5%);
}
.a-IRR-headerLink:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
.a-IRR-search-field:focus {
// border-color: @g_Focus;
// box-shadow: -1px 0 0 @g_Focus inset, 1px 0 0 @g_Focus inset;
}
.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_Focus;
}
.a-IRR-reportSummary-label,
.a-IG-reportSummary-label {
// background-color: @irrBg !important;
// color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 85%), 100%), desaturate(lighten(@irrBg, 85%), 50%)), 100%);
}
.a-IRR-controlsLabel,
.a-IG-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%);
}
}
}
.ui-widget-content .a-IRR-iconList-link {
color: fade(contrast(@irrBg, desaturate(darken(@irrBg, 85%), 100%), desaturate(lighten(@irrBg, 85%), 50%)), 100%);
background-color: @irrBg;
}
.a-IRR-iconList-link:hover {
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%);
}
.a-IRR-iconList-item .a-IRR-iconList-link:hover,
.a-IRR-iconList-item .a-IRR-iconList-link.is-active,
.a-IRR-radioIconList-item input[type=radio]:checked + label {
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%) !important;
}
/* Override app_ui styles
========================================================================== */
.a-IRR-button:focus,
.a-IRR-button:focus {
box-shadow: inherit;
}
/* Sort Widget
========================================================================== */
.a-IRR-sortWidget {
background-color: rgba(32, 32, 32, .95);
backdrop-filter: blur(4px);
color: #FFF;
border-width: 0;
// box-shadow: 0 2px 4px -2px @_base-shadow-9, 0 8px 16px -4px @_base-shadow-5;
border-bottom-left-radius: @g_Button-BorderRadius;
border-bottom-right-radius: @g_Button-BorderRadius;
box-shadow: 0 8px 16px @_base-shadow-7, 0 0 0 1px @_base-alpha-4;
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: @_base-bg-alpha-9;
}
::-webkit-scrollbar-track {
background-color: @_base-bg-alpha-7;
}
}
/* Clear Backgrounds */
.a-IRR-sortWidget-help {
background-color: transparent;
}
/* Buttons */
.a-IRR-sortWidget-actions {
padding: 8px;
border-radius: 2px;
width: auto;
border-bottom-width: 0;
}
.a-IRR-sortWidget-actions-item {
border-right-width: 0;
}
.a-IRR-button.a-IRR-sortWidget-button {
background-color: transparent;
color: #FFF;
border-radius: 2px;
&:hover {
background-color: @_base-alpha-6;
}
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
&.is-active,
&:active:focus {
background-color: @_base-alpha-9;
}
}
.a-IRR-sortWidget-searchLabel {
height: 40px;
padding: 12px 8px;
&:before {
color: #FFF;
}
}
.a-IRR-sortWidget-search > .a-IRR-sortWidget-searchField[type="text"] {
// background-color: transparent;
appearance: none;
background-color: @_base-bg-alpha-4;
height: 40px;
color: #FFF;
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
.a-IRR-sortWidget-rows {
border-top-width: 0;
}
.a-IRR-sortWidget-row {
color: #FFF;
box-shadow: none;
&:hover {
background-color: @_base-bg-alpha-5;
}
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
.a-IG .a-IRR-sortWidget:before {
color: rgba(32, 32, 32, .95);
}
// Shame for Top Users
.a-IRR .hour-graph {
span.hour.is-null {
background-color: @_base-shade-3 !important;
}
}
.a-IRR .hour-graph {
span.hour {
background-color: mix(@g_Success-BG, @_base-bg, 40%) !important;
}
}
// Dialog Specific
.a-IRR-dialog--download {
.a-IconList-item {
outline: none;
color: @g_Body-Text;
// background-color: @_base-alpha-1 !important;
box-shadow: inset @_base-alpha-2 0 -1px 0 0;
&:hover {
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%) !important;
}
&.is-selected {
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%) !important;
box-shadow: inset @g_Accent-BG 0 2px 0 0;
&.is-focused {
color: inherit;
box-shadow: inset @g_Accent-BG 0 2px 0 0, inset @g_Accent-BG 0 0 0 1px;
background-color: contrast(@irrBg, darken(@irrBg, 3%), lighten(@irrBg, 3%), 43%) !important;
}
}
}
}
.a-IRR-iconList-item + .a-IRR-iconList-item {
border-color: @_base-alpha-2;
}
.a-IRR-dialogInfo:first-child {
border-bottom-color: @_base-alpha-2;
}
/* Control Types
========================================================================== */
// Error
.a-IG-reportSummary-item.is-error,
.a-IG-controls-item.is-error,
.a-IRR-reportSummary-item.is-error,
.a-IRR-controls-item.is-error {
// --a-report-controls-cell-label-icon-background-color: var(--a-palette-danger);
// --a-report-controls-cell-label-icon-text-color: var(--a-palette-danger-contrast);
// --a-report-controls-cell-label-background-color: var(--a-palette-danger-shade);
// --a-report-controls-cell-label-text-color: var(--a-palette-danger);
// --a-report-controls-cell-label-hover-background-color: var(--a-palette-danger-shade);
}
// Types
.a-IG-reportSummary-item--savedReport,
.a-IG-controls-item--savedReport,
.a-IRR-reportSummary-item--savedReport,
.a-IRR-controls-item--savedReport {
--a-report-controls-cell-label-icon-background-color: @reportControl-savedReport-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-savedReport-hover_bg;
}
.a-IG-reportSummary-item--search,
.a-IG-controls-item--search,
.a-IRR-reportSummary-item--search,
.a-IRR-controls-item--search {
--a-report-controls-cell-label-icon-background-color: @reportControl-search-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-search-hover_bg;
}
.a-IG-reportSummary-item--filter,
.a-IG-controls-item--filter,
.a-IRR-reportSummary-item--filter,
.a-IRR-controls-item--filter {
--a-report-controls-cell-label-icon-background-color: @reportControl-filter-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-filter-hover_bg;
}
.a-IG-reportSummary-item--controlBreak,
.a-IG-controls-item--controlBreak,
.a-IRR-reportSummary-item--controlBreak,
.a-IRR-controls-item--controlBreak {
--a-report-controls-cell-label-icon-background-color: @reportControl-controlBreak-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-controlBreak-hover_bg;
}
.a-IG-reportSummary-item--groupBy,
.a-IG-controls-item--groupBy,
.a-IRR-reportSummary-item--groupBy,
.a-IRR-controls-item--groupBy {
--a-report-controls-cell-label-icon-background-color: @reportControl-groupBy-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-groupBy-hover_bg;
}
.a-IG-reportSummary-item--aggregate,
.a-IG-controls-item--aggregate,
.a-IRR-reportSummary-item--aggregate,
.a-IRR-controls-item--aggregate {
--a-report-controls-cell-label-icon-background-color: @reportControl-aggregate-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-aggregate-hover_bg;
}
.a-IG-reportSummary-item--highlight,
.a-IG-controls-item--highlight,
.a-IRR-reportSummary-item--highlight,
.a-IRR-controls-item--highlight {
--a-report-controls-cell-label-icon-background-color: @reportControl-highlight-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-highlight-hover_bg;
}
.a-IG-reportSummary-item--flashback,
.a-IG-controls-item--flashback,
.a-IRR-reportSummary-item--flashback,
.a-IRR-controls-item--flashback {
--a-report-controls-cell-label-icon-background-color: @reportControl-flashback-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-flashback-hover_bg;
}
.a-IG-reportSummary-item--chart,
.a-IG-controls-item--chart,
.a-IRR-reportSummary-item--chart,
.a-IRR-controls-item--chart {
--a-report-controls-cell-label-icon-background-color: @reportControl-chart-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-chart-hover_bg;
}
.a-IG-reportSummary-item--pivot,
.a-IG-controls-item--pivot,
.a-IRR-reportSummary-item--pivot,
.a-IRR-controls-item--pivot {
--a-report-controls-cell-label-icon-background-color: @reportControl-pivot-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-pivot-hover_bg;
}
.a-IG-reportSummary-item--invalidSettings,
.a-IG-controls-item--invalidSettings,
.a-IRR-reportSummary-item--invalidSettings,
.a-IRR-controls-item--invalidSettings {
--a-report-controls-cell-label-icon-background-color: @reportControl-invalidSettings-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-invalidSettings-hover_bg;
}
.a-IG-reportSummary-item--inactiveSettings,
.a-IG-controls-item--inactiveSettings,
.a-IRR-reportSummary-item--inactiveSettings,
.a-IRR-controls-item--inactiveSettings {
--a-report-controls-cell-label-icon-background-color: @reportControl-inactiveSettings-icon_bg;
--a-report-controls-cell-label-hover-background-color: @reportControl-inactiveSettings-hover_bg;
}
// Color Overrides for JET
// @rootFontSize: 12px;
// @fontSize: @rootFontSize;
// @smallFontSize: @rootFontSize - 1px;
// @mediumFontSize: @rootFontSize + 2px;
// @largeFontSize: @rootFontSize + 4px;
// @largestFontSize: @rootFontSize + 6px;
@g_Color-Palette-1: #309FDB;
@g_Color-Palette-2: #13B6CF;
@g_Color-Palette-3: #2EBFBC;
@g_Color-Palette-4: #3CAF85;
@g_Color-Palette-5: #81BB5F;
@g_Color-Palette-6: #DDDE53;
@g_Color-Palette-7: #FBCE4A;
@g_Color-Palette-8: #ED813E;
@g_Color-Palette-9: #E95B54;
@g_Color-Palette-10: #E85D88;
@g_Color-Palette-11: #CA589D;
@g_Color-Palette-12: #854E9B;
@g_Color-Palette-13: #5A68AD;
@g_Color-Palette-14: #AFBAC5;
@g_Color-Palette-15: #6E8598;
.oj-dvt-category1 {
color: @g_Color-Palette-1
}
.oj-dvt-category2 {
color: @g_Color-Palette-4
}
.oj-dvt-category3 {
color: @g_Color-Palette-7
}
.oj-dvt-category4 {
color: @g_Color-Palette-9
}
.oj-dvt-category5 {
color: @g_Color-Palette-12
}
.oj-dvt-category6 {
color: @g_Color-Palette-3
}
.oj-dvt-category7 {
color: @g_Color-Palette-8
}
.oj-dvt-category8 {
color: @g_Color-Palette-10
}
.oj-dvt-category9 {
color: @g_Color-Palette-2
}
.oj-dvt-category10 {
color: @g_Color-Palette-5
}
.oj-dvt-category11 {
color: @g_Color-Palette-11
}
.oj-dvt-category12 {
color: @g_Color-Palette-6
}
// Colors for Jet Charts
.oj-legend,
.oj-legend-title,
.oj-chart-pie-center-label,
.oj-chart-xaxis-title,
.oj-chart-yaxis-title,
.oj-chart-y2axis-title,
.oj-chart-xaxis-tick-label,
.oj-chart-yaxis-tick-label,
.oj-chart-y2axis-tick-label,
.oj-chart-data-label,
.oj-dvt-no-data-message {
color: @g_Body-Text;
}
:root {
// Set Variables for JET 9
--oj-body-bg-color: @g_Body-BG;
--oj-body-text-color: @g_Body-Text;
--oj-header-text-color: @g_Body-Text;
--oj-core-text-color-primary: @g_Body-Text;
--oj-core-text-color-secondary: fade(@g_Body-Text, 70%);
--oj-core-bg-color-hover: @_base-alpha-2;
--oj-core-bg-color-active: @_base-alpha-3;
--oj-dvt-datatip-bg-color: @_base-shade-2;
--oj-dvt-datatip-border-color: @_base-shade-3;
--oj-dvt-datatip-text-color: @_base-shade-10;
--oj-dvt-datatip-label-color: @_base-shade-8;
--oj-dvt-datatip-value-color: @_base-shade-10;
--oj-listbox-bg-color-hover: @g_NavBarMenu-Active-BG;
// Set Variables for JET 10
--oj-core-bg-color-content: @_base-shade-4;
--oj-popup-border-color: @_base-shade-3;
--oj-popup-bg-color: @_base-shade-0;
--oj-collection-bg-color: @g_Body-BG;
--oj-collection-border-color: @_base-alpha-4;
--oj-collection-free-space-bg-color: @_base-alpha-2;
--oj-collection-header-bg-color: @_base-alpha-3;
--oj-collection-header-text-color: @g_Body-Text;
// --oj-collection-header-bg-color-hover: var(--oj-core-bg-color-hover);
// --oj-collection-header-bg-color-selected: var(--oj-core-bg-color-selected);
// --oj-collection-cell-banded-bg-color: rgb(var(--oj-palette-neutral-rgb-10));
// --oj-collection-editable-cell-border-color-focus: rgb(var(--oj-palette-brand-rgb-110));
// --oj-collection-editable-cell-bg-color-read-only: var(--oj-core-bg-color-hover);
--oj-dvt-contrast-line-color: @_base-alpha-8;
--oj-dvt-reference-object-line-color: @_base-bg-alpha-8;
}
// Jet Dropdown
.oj-listbox-drop {
background-color: @g_NavBarMenu-BG;
color: @g_NavBarMenu-FG;
border-width: 0;
border-radius: 2px;
box-shadow: 0 8px 16px @_base-shadow-7, 0 0 0 1px @_base-alpha-4;
padding: 8px 0;
}
.oj-inputsearch-choice {
color: inherit;
background-color: transparent;
border-color: transparent;
}
.oj-listbox-results {
outline: none;
}
.oj-listbox-results .oj-hover,
.oj-listbox-drop:not(.oj-listbox-hide-hover) .oj-listbox-results .oj-hover {
background-color: @g_NavBarMenu-Active-BG;
color: @g_NavBarMenu-Active-FG;
}
.oj-dvtbase.oj-chart.oj-component-initnode svg g text {
fill: @_base-shade-10;
}
/**
* 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;
}
}
/* ==========================================================================
Icon-based Links List
========================================================================== */
.t-LinksList--actions {
.t-LinksList-item--separator {
border-bottom-color: @_base-alpha-2;
}
}
/**
* 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: @_base-bg-alpha-9;
// }
}
/**
* 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: @_base-alpha-5;
// 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: @_base-alpha-4;
}
}
/**
* Modifier: Bright Hover
*
* Show Bright
*/
.t-LinksList--brightHover {
.t-LinksList-item.is-expanded .t-LinksList-link:hover:before {
color: @_base-bg-alpha-9;
}
.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: @_base-bg-alpha-11;
}
}
}
}
.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: @_base-alpha-7;
}
}
.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%);
}
}
}
.t-Body-actions .t-LinksList-link {
&:hover {
background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG, 5%), lighten(@g_Actions-Col-BG, 5%), 43%);
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
List View
========================================================================== */
.a-ListView-item {
border-bottom: 1px solid @_base-alpha-2;
.ul-li-aside {
color: @_base-alpha-10;
}
.ui-li-count {
background-color: @_base-alpha-2;
box-shadow: 0 0 0 1px @_base-alpha-2 inset;
color: @_base-alpha-10;
}
}
.a-ListView-item .ui-btn {
color: @g_Body-Text;
&:hover {
background-color: @_base-alpha-2;
}
}
.a-ListView-item .fa {
color: contrast(@g_Region-BG, darken(@g_Region-BG, 15%), lighten(@g_Region-BG, 15%), 43%);
}
.a-ListView-item .ui-li-count {
color: contrast(@g_Region-BG, darken(@g_Region-BG, 65%), lighten(@g_Region-BG, 65%), 43%);
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
/**
* Import Compass
*/
/* ==========================================================================
Login Page + Region
========================================================================== */
.t-PageBody--login {
background-color: mix(@_base, @_base-bg, 12%);
}
.t-LoginPage--bg1,
.t-LoginPage--bg2,
.t-LoginPage--bg3 {
background-color: @g_Accent-BG;
}
// .t-LoginPage--bg1 {
// background-image: url(../../../images/backgrounds/stripes.svg);
// background-size: cover;
// background-position: right bottom;
// background-repeat: no-repeat;
// background-color: @g_Accent-BG;
// &.apex-theme-vita-dark {
// background-image: url(../../../images/backgrounds/stripes-dark.svg);
// }
// }
// .t-LoginPage--bg2 {
// background-image: url(../../../images/backgrounds/radar.svg);
// background-size: cover;
// background-position: right bottom;
// background-repeat: no-repeat;
// background-color: @g_Accent-BG;
// &.apex-theme-vita-dark {
// background-image: url(../../../images/backgrounds/radar-dark.svg);
// }
// }
// .t-LoginPage--bg3 {
// background-image: url(../../../images/backgrounds/circles.svg);
// background-size: cover;
// background-position: center;
// background-repeat: no-repeat;
// background-color: @g_Accent-BG;
// &.apex-theme-vita-dark {
// background-image: url(../../../images/backgrounds/circles-dark.svg);
// }
// }
// Temp
.app-icon {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-color: @g_Accent-BG;
}
.t-Login-iconValidation {
background-color: @g_Success-BG;
color: @_base-bg;
}
.t-Login-region {
background-color: @_base-bg-alpha-10;
//background-image: linear-gradient(225deg, @_base-bg-alpha-10 0%, @_base-bg-alpha-0 100%);
box-shadow: 0 8px 24px -4px @_base-shadow-6, 0 0 0 1px @_base-alpha-4;
}
.t-LoginPage--split {
.t-Login-container {
background-color: @_base-bg-alpha-10;
// background-image: linear-gradient(225deg, @_base-bg-alpha-10 0%, @_base-bg-alpha-0 100%);
box-shadow: 0 0 24px -4px @_base-shadow-6, 0 0 0 1px @_base-alpha-4;
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Markdown Editor
========================================================================== */
.a-MDEditor {}
.a-MDEditor .a-Toolbar {
border-color: @_base-alpha-3;
background-color: @_base-alpha-1;
border-top-left-radius: .2rem;
border-top-right-radius: .2rem;
.a-Button {
&:not(:hover):not(:active):not(:focus):not(.is-active) {
background-color: transparent;
box-shadow: none;
}
// &:not(:only-of-type) {
// border-radius: 0;
// }
// &:first-child {
// border-top-left-radius: @g_Button-BorderRadius;
// border-bottom-left-radius: @g_Button-BorderRadius;
// }
// &:last-child {
// border-top-right-radius: @g_Button-BorderRadius;
// border-bottom-right-radius: @g_Button-BorderRadius;
// }
}
}
.a-MDEditor-previewPanel,
.a-MDEditor textarea.apex-item-textarea,
.a-MDEditor .CodeMirror {
border-color: @_base-alpha-3;
// background-color: @_base-bg;
background-color: @g_Form-Item-BG;
color: @g_Form-Item-FG;
border-bottom-left-radius: .2rem;
border-bottom-right-radius: .2rem;
&:hover {
background-color: @l_Form-Item-hoverBG;
}
&:focus,
&.CodeMirror-focused {
border-color: @g_Accent-BG;
background-color: @l_Form-Item-focusBG;
}
}
.CodeMirror-cursor {
border-left-color: @g_Form-Item-FG !important;
}
/* ==========================================================================
Markdownified
========================================================================== */
.is-markdownified {
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
}
hr {
background: none;
border-top-color: @_base-alpha-6;
}
blockquote {
border-left-color: @_base-alpha-4;
}
code {
background-color: @_base-alpha-7;
box-shadow: inset @_base-alpha-2 0 0 0 1px;
}
pre {
background-color: @_base-alpha-7;
box-shadow: inset @_base-alpha-2 0 0 0 1px;
code {
background-color: transparent;
box-shadow: none;
}
}
table {
background-color: #fff;
border-color: @_base-alpha-4;
box-shadow: 0 2px 4px -2px @_base-shadow-3;
th {
background-color: fade(@_base, 1.5);
}
th,
td {
border-bottom-color: @_base-alpha-2;
}
tr:hover {
td {
background-color: fade(@_base, 1.25);
}
th {
background-color: @_base-alpha-7;
}
}
}
}
/**
* Import Compass and Theme Variables
*/
/******************************************************************************
Color Variables
******************************************************************************/
@g_Border-Outer: contrast(@g_Region-BG, darken(@g_Region-BG, 12%), lighten(@g_Region-BG, 12%), 43%);
.t-MediaList {
border-color: @g_Border-Outer;
background-color: @g_Region-BG;
}
.t-MediaList-item {
border-color: @g_Border-Outer;
}
.t-MediaList-item.is-active {
background-color: @_base-alpha-2;
}
.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, 2%), lighten(@g_Region-BG, 2%), 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 {
background-color: @_base-alpha-2;
}
.t-MediaList-badge,
.t-MediaList-desc {
color: @g_Region-FG-Light;
}
.t-MediaList-icon {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-MediaList--cols {
box-shadow: -1px -1px 0 0 @g_Border-Outer inset;
.t-MediaList-item {
&:before,
&:after {
background-color: contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
}
}
/* ==========================================================================
Modifier: Apply Theme Colors
---
Adds theme colors to the items.
========================================================================== */
.t-MediaList.u-colors {}
/* Variables
========================================================================== */
@l_MegaMenu-BG: @g_NavBarMenu-BG;
@l_MegaMenu-FG: @g_NavBarMenu-FG;
@l_MegaMenu-Active-BG: @g_NavBarMenu-Active-BG;
@l_MegaMenu-Active-FG: @g_NavBarMenu-Active-FG;
/* Mega Menu
========================================================================== */
.a-Menu.t-MegaMenu .a-Menu-item.is-focused,
.a-Menu.t-MegaMenu .a-Menu-item.is-expanded {
background-color: transparent;
color: inherit;
}
.t-MegaMenu-itemBody.is-focused .t-MegaMenu-label,
.t-MegaMenu-itemBody:hover .t-MegaMenu-label {
color: @g_Link-Base;
}
.t-MegaMenu-badge {
background-color: contrast(@l_MegaMenu-BG, darken(@l_MegaMenu-BG, 3%), lighten(@l_MegaMenu-BG, 3%), 43%);
color: contrast(@l_MegaMenu-FG, darken(@l_MegaMenu-FG, 15%), lighten(@l_MegaMenu-FG, 15%), 43%);
}
/* Layout: Stacked
========================================================================== */
.t-MegaMenu--layoutStacked {
.t-MegaMenu-item--top + .t-MegaMenu-item--top {
border-top-color: @_base-alpha-2;
}
}
/* Generic Menu
========================================================================== */
@l_NavBarMenu-BG: @g_NavBarMenu-BG;
@l_NavBarMenu-FG: @g_NavBarMenu-FG;
@l_NavBarMenu-Active-BG: @g_NavBarMenu-Active-BG;
@l_NavBarMenu-Active-FG: @g_NavBarMenu-Active-FG;
:root {
--a-menu-border-radius: 2px;
--a-menu-border-width: ~"0px";
--a-menu-background-color: @l_NavBarMenu-BG;
--a-menu-shadow: 0 8px 16px @_base-shadow-7, 0 0 0 1px @_base-alpha-4;
--a-menu-padding-y: 8px;
--a-menu-scroll-button-background-color: contrast(@l_NavBarMenu-BG, darken(@l_NavBarMenu-BG, 3%), lighten(@l_NavBarMenu-BG, 3%), 43%);
--a-menu-scroll-button-text-color: @l_NavBarMenu-FG;
--a-menu-callout-background-color: @l_NavBarMenu-BG;
--a-menu-callout-border-color: @_base-alpha-4;
--a-menu-callout-border-width: ~"0px";
--a-menu-callout-shadow: 0 0 0 1px @_base-alpha-4;
--a-menu-disabled-focused-text-color: @g_NavBarMenu-FG;
--a-menu-disabled-focused-background-color: @l_NavBarMenu-BG;
}
// .a-Menu-content {
// border-radius: 2px;
// background-color: @l_NavBarMenu-BG;
// border-width: 0;
// box-shadow: 0 8px 16px @_base-shadow-7, 0 0 0 1px @_base-alpha-4;
// padding: 8px 0;
// .a-Menu-scrollBtn--down,
// .a-Menu-scrollBtn--up {
// background-color: contrast(@l_NavBarMenu-BG, darken(@l_NavBarMenu-BG, 3%), lighten(@l_NavBarMenu-BG, 3%), 43%);
// color: @l_NavBarMenu-FG;
// }
// }
.a-Menu {
min-width: 160px;
.a-Menu-item {
line-height: 36px;
color: @l_NavBarMenu-FG;
& > .a-Menu-inner .a-Menu-accel,
& > .a-Menu-inner .a-Menu-subMenuCol {
opacity: .85;
}
&.is-focused,
&.is-expanded {
color: @l_NavBarMenu-Active-FG;
background-color: @l_NavBarMenu-Active-BG;
}
// &.is-disabled.is-focused {
// color: fadeout(@l_NavBarMenu-FG, 50%);
// background-color: @l_NavBarMenu-BG;
// & > .a-Menu-inner .a-Menu-accel {
// opacity: .5;
// }
// }
.a-Menu-subMenuCol {
height: 36px;
padding: 10px 4px 10px 0;
}
.a-Menu-statusCol {
padding: 10px 8px;
}
}
// .a-Menu-inner + .a-Menu > .a-Menu-content {
// transform: translateY(-8px);
// }
}
.a-Menu-hSeparator {
border-color: fadeout(@l_NavBarMenu-FG, 90%);
margin-top: 4px;
padding-top: 2px;
padding-bottom: 2px;
}
/* Menu within Menu Bar
========================================================================== */
// .a-MenuBar {
// .a-Menu.a-Menu--top > .a-Menu-content {
// border: 1px solid @_base-alpha-4;
// }
// .a-Menu-content {
// background-clip: padding-box;
// box-shadow: 0 8px 16px @_base-shadow-7;
// border-color: @_base-alpha-4;
// border-width: 1px;
// }
// .a-Menu-inner + .a-Menu > .a-Menu-content {
// transform: translate(-4px, -9px);
// }
// }
// Callout
// .u-callout {
// &:before {
// background-color: @l_NavBarMenu-BG;
// box-shadow: 0 0 0 1px @_base-alpha-4;
// }
// }
/* Generic Menu Bar
========================================================================== */
.a-MenuBar-label {
display: inline-block;
font-size: 1.4rem;
line-height: 1.6rem;
padding: 12px;
text-decoration: none;
flex-grow: 1;
&:hover {
background-clip: padding-box;
text-decoration: none;
}
& + .a-Menu-subMenuCol {
flex-shrink: 0;
align-self: center;
line-height: 1;
}
}
.a-MenuBar-item {
display: flex;
float: left;
padding: 0;
border-width: 0 1px;
box-shadow: none;
margin-left: 0;
background-clip: content-box;
.u-RTL & {
float: right;
}
&.is-expanded {
outline: none;
}
&:hover {
background-color: transparent;
}
/* First Menu Bar Item */
&:first-child {
border-left-width: 0;
.u-RTL & {
border-right-width: 0;
border-left-width: 1px;
}
}
/* Focus State (also applied on hover) */
&.is-focused {
box-shadow: none;
}
/* Current Menu Item becomes bold */
&.a-Menu--current {
.a-MenuBar-label {
font-weight: bold;
}
}
/* Sub Menu Drop Down Icon */
& > .a-Menu-subMenuCol,
&.a-Menu--split > .a-Menu-subMenuCol {
border-width: 0;
padding: 0 12px 0 0;
.u-RTL & {
padding-right: 0;
padding-left: 12px;
border-right: 0 !important;
}
}
& > .a-Menu-subMenuCol .a-Icon {
border-radius: 12.5%;
&:before {
content: '\e0c2';
}
}
& > button + .a-Menu-subMenuCol {
/* When parent is no target, but has sub menu, then make it appear as single item */
margin-left: -6px;
.u-RTL & {
margin-left: 0;
margin-right: -6px;
}
}
}
/* Header Top Navigation Menu
========================================================================== */
.t-Header-nav-list {
background-color: @g_Nav-BG;
}
.t-Header-nav {
.a-MenuBar-label {
color: @g_Nav-FG;
}
.t-Menu-badge {
padding: 0 6px;
font-size: 11px;
line-height: inherit;
font-weight: 500;
background-color: @g_Nav-Badge-BG;
color: @g_Nav-Badge-FG;
display: inline-block;
vertical-align: top;
margin-left: 4px;
border-radius: 16px;
.u-RTL & {
margin-left: 0;
margin-right: 4px;
}
}
.a-MenuBar-item {
/* First Menu Bar Item */
border-color: mix(@g_Nav-Active-FG, @g_Nav-BG, 7.5%);
/* Focus State (also applied on hover) */
&.is-focused {
background-color: contrast(@g_Nav-Active-BG, darken(@g_Nav-Active-BG, 3%), lighten(@g_Nav-Active-BG, 3%), 43%);
box-shadow: 0 0 0 1px @g_Focus inset;
.a-MenuBar-label {
color: @g_Nav-Active-FG;
}
}
/* Current + Focused, or Current + Expanded */
&.a-Menu--current,
&.a-Menu--current.is-focused,
&.is-expanded,
&.a-Menu--current.is-expanded {
background-color: @g_Nav-Active-BG;
.a-MenuBar-label {
color: @g_Nav-Active-FG;
}
}
& > .a-Menu-subMenuCol .a-Icon {
color: fade(@g_Nav-Active-FG, 80%);
}
&.a-Menu--split > .a-Menu-subMenuCol:hover .a-Icon,
&.is-focused > button + .a-Menu-subMenuCol .a-Icon {
/* Hovering over sub menu icon on menu bar,
or hovering on a non-split menu bar item */
background-color: fade(@g_Nav-Active-FG, 15%);
}
/* Icon when Menu Expanded */
&.is-expanded > .a-Menu-subMenuCol .a-Icon,
&.is-expanded > .a-Menu-subMenuCol:hover .a-Icon {
background-color: @g_Nav-Accent-BG;
border-color: @g_Nav-Accent-BG;
color: @g_Nav-Accent-FG;
}
}
}
/* ==========================================================================
Standalone Menu Bar
========================================================================== */
.t-MenuBar {
background-color: @g_Button-BG;
// border: 1px solid mix(@g_Button-Text, @g_Button-BG, 10%);
.a-MenuBar-label {
color: @g_Button-Text;
}
.a-MenuBar-item {
/* First Menu Bar Item */
border-color: mix(@g_Button-Text, @g_Button-BG, 10%);
/* Focus State (also applied on hover) */
&.is-focused {
background-color: contrast(@g_Button-BG, darken(@g_Button-BG, 3%), lighten(@g_Button-BG, 3%), 43%);
}
/* Current + Focused, or Current + Expanded */
&.a-Menu--current,
&.a-Menu--current.is-focused,
&.is-expanded,
&.a-Menu--current.is-expanded {
background-color: @g_NavBarMenu-Active-BG;
.a-MenuBar-label {
color: @g_NavBarMenu-Active-FG;
}
}
& > .a-Menu-subMenuCol .a-Icon {
color: fade(@g_Button-Text, 80%);
}
&.a-Menu--split > .a-Menu-subMenuCol:hover .a-Icon,
&.is-focused > button + .a-Menu-subMenuCol .a-Icon {
/* Hovering over sub menu icon on menu bar,
or hovering on a non-split menu bar item */
background-color: fade(@g_Button-Text, 15%);
}
/* Icon when Menu Expanded */
&.is-expanded > .a-Menu-subMenuCol .a-Icon,
&.is-expanded > .a-Menu-subMenuCol:hover .a-Icon {
background-color: @g_NavBarMenu-Active-FG;
border-color: @g_NavBarMenu-Active-FG;
color: @g_NavBarMenu-Active-BG;
}
}
}
// @Tabs-BG: @g_Accent-BG;
// @Tabs-FG: contrast(@g_Accent-BG, darken(@g_Accent-BG, 75%), lighten(@g_Accent-BG, 75%), 43%);
// @Tabs-Active-BG: darken(@Tabs-BG,3%);
// @Tabs-Active-FG: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG, 75%), lighten(@Tabs-Active-BG, 75%), 43%);
@Tabs-BG: @g_Nav-BG;
@Tabs-FG: @g_Nav-FG;
@Tabs-Active-BG: @g_Nav-Active-BG;
@Tabs-Active-FG: @g_Nav-Active-FG;
.t-NavTabs {
background-color: @Tabs-BG;
.respond-to(xs-screens) {
box-shadow: 0 -1px 0 @_base-alpha-4;
}
&::-webkit-scrollbar-thumb {
background-color: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG, 3%), lighten(@Tabs-Active-BG, 3%), 43%);
box-shadow: inset 1px 0 0 0 @Tabs-BG;
&:hover {
background-color: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG, 15%), lighten(@Tabs-Active-BG, 15%), 43%);
}
}
&::-webkit-scrollbar-track {
background: @Tabs-BG;
&:hover {
background-color: contrast(@Tabs-BG, darken(@Tabs-BG, 15%), lighten(@Tabs-BG, 15%), 43%);
}
}
}
.t-NavTabs-item {
color: @Tabs-FG;
border-color: contrast(@Tabs-Active-BG, darken(@Tabs-Active-BG, 15%), lighten(@Tabs-Active-BG, 15%), 43%);
&:hover,
&.is-active {
background-color: @Tabs-Active-BG;
color: @Tabs-Active-FG;
}
}
.t-NavTabs-badge {
background-color: @Tabs-Active-FG;
color: @Tabs-Active-BG;
}
/**
* 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;
box-shadow: 0 -1px 0 @_base-alpha-5 inset;
}
.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();
}
.a-PopupLOV-searchBar {
padding: 8px;
}
// Icon List
.a-PopupLOV-results {
.a-IconList-item {
color: inherit;
&:hover {
background-color: @g_Focus;
color: @g_Focus-FG;
box-shadow: 0 0 0 1px darken(@g_Focus, 5%) inset;
a {
color: inherit;
}
}
}
.a-GV-loadMore {
border-top-color: @_base-alpha-5;
}
}
.a-GV-loadMoreButton {
--a-button-border-width: ~"0px";
color: @g_Button-Text;
background-color: @g_Button-BG;
box-shadow: 0 0 0 1px fade(@_base, 12.5) inset;
&:hover {
background-color: lighten(@g_Button-BG, 10%);
box-shadow: 0 0 0 1px @_base-alpha-5 inset;
}
&:focus {
background-color: lighten(@g_Button-BG, 15%);
}
&:active {
background-color: darken(@g_Button-BG, 10%);
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset, 0 0 1px 0 rgba(5, 114, 206, 0.25);
}
}
}
/* ==========================================================================
Popup LOV
========================================================================== */
.apex-item-group--popup-lov {
.apex-item-multi {}
.apex-item-multi-item {
> span {
background-color: @_base-alpha-2;
//border-color: rgba(0, 0, 0, 0.1);
}
&.is-active {
> span {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
}
.apex-item-multi-remove {
background-color: transparent;
&:hover {
background-color: @_base-alpha-2;
}
}
}
// Input Text Styling
.apex-item-text.a-PopupLOV-search,
.apex-item-text.apex-item-popup-lov,
.apex-item-multi {
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,
&.is-focused {
color: @g_Form-Item-FG;
background-color: @l_Form-Item-focusBG !important;
border-color: @g_Focus !important;
// Focus button
& + .a-Button--popupLOV {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
}
// Popup
.ui-dialog .ui-dialog-content.a-PopupLOV-dialog {
background-color: @_base-bg;
}
.a-PopupLOV-doSearch {
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
.a-PopupLOV-searchBar,
.a-PopupLOV-clear {
border-bottom-color: @_base-alpha-4;
}
.a-PopupLOV-clearButton {
background-color: transparent;
color: inherit;
&:hover {
color: @_base-bg;
background-color: @g_Focus;
}
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Region
========================================================================== */
.t-Region {
border-color: @_base-alpha-4;
}
.t-Region,
.t-ContentBlock--lightBG .t-ContentBlock-body {
background-color: @g_Region-BG;
}
.fielddata b {
.text-dark();
}
.regionHeader(@bg, @fg) {
background-color: @bg;
color: @fg;
// border-bottom: 1px solid contrast(@bg, darken(@bg, 10%), lighten(@bg, 10%), 43%);
.t-Button--noUI,
.t-Button--link {
color: @fg;
}
}
.t-Region-header {
border-bottom-color: @_base-alpha-3;
.regionHeader(@g_Region-Header-BG, @g_Region-Header-FG);
.t-Body-actions & {
background: transparent;
color: @g_Actions-Col-Text;
}
}
.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);
}
}
/* Accent 1 */
.t-Region--accent1 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-1, @g_Color-Palette-1-FG);
}
}
.t-Region--accent1.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-1;
}
/* Accent 2 */
.t-Region--accent2 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-2, @g_Color-Palette-2-FG);
}
}
.t-Region--accent2.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-2;
}
/* Accent 3 */
.t-Region--accent3 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-3, @g_Color-Palette-3-FG);
}
}
.t-Region--accent3.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-3;
}
/* Accent 4 */
.t-Region--accent4 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-4, @g_Color-Palette-4-FG);
}
}
.t-Region--accent4.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-4;
}
/* Accent 5 */
.t-Region--accent5 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-5, @g_Color-Palette-5-FG);
}
}
.t-Region--accent5.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-5;
}
/* Accent 6 */
.t-Region--accent6 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-6, @g_Color-Palette-6-FG);
}
}
.t-Region--accent6.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-6;
}
/* Accent 7 */
.t-Region--accent7 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-7, @g_Color-Palette-7-FG);
}
}
.t-Region--accent7.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-7;
}
/* Accent 8 */
.t-Region--accent8 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-8, @g_Color-Palette-8-FG);
}
}
.t-Region--accent8.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-8;
}
/* Accent 9 */
.t-Region--accent9 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-9, @g_Color-Palette-9-FG);
}
}
.t-Region--accent9.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-9;
}
/* Accent 10 */
.t-Region--accent10 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-10, @g_Color-Palette-10-FG);
}
}
.t-Region--accent10.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-10;
}
/* Accent 11 */
.t-Region--accent11 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-11, @g_Color-Palette-11-FG);
}
}
.t-Region--accent11.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-11;
}
/* Accent 12 */
.t-Region--accent12 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-12, @g_Color-Palette-12-FG);
}
}
.t-Region--accent12.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-12;
}
/* Accent 13 */
.t-Region--accent13 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-13, @g_Color-Palette-13-FG);
}
}
.t-Region--accent13.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-13;
}
/* Accent 14 */
.t-Region--accent14 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-14, @g_Color-Palette-14-FG);
}
}
.t-Region--accent14.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-14;
}
/* Accent 15 */
.t-Region--accent15 {
& > .t-Region-header {
.regionHeader(@g_Color-Palette-15, @g_Color-Palette-15-FG);
}
}
.t-Region--accent15.t-Region--textContent > .t-Region-header {
color: @g_Color-Palette-15;
}
.t-Region-header {}
.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 {}
.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 {
.a-Tabs-button {
border-radius: 2px;
background-color: @_base-shadow-8;
color: @g_Accent-FG;
box-shadow: 0 0 0 1px @_base-shadow-4 inset;
&:hover {
box-shadow: 0 0 0 1px @_base-shadow-4 inset, 0 1px 1px @_base-shadow-2;
background-color: @_base-shadow-9;
}
&:active,
&:active:focus {
opacity: 1;
box-shadow: 0 0 0 1px @_base-shadow-4 inset, 0 1px 1px @_base-shadow-2 inset;
background-color: @_base-shadow-11;
}
}
.a-Tabs-next-region {
border-radius: 2px 0 0 2px;
}
.a-Tabs-previous-region {
border-radius: 0 2px 2px 0;
}
.a-Region-carouselNavItem {
&.a-Tabs-selected .a-Region-carouselLink {
// background-color: rgba(0, 0, 0, .45);
background-color: @_base-shadow-8;
&:focus {
background-color: @g_Accent-BG;
}
}
}
.a-Region-carouselLink {
background-color: @_base-shadow-5;
border-radius: 100%;
box-shadow: 0 0 0 1px @_base-shadow-4 inset;
}
}
/* ==========================================================================
.t-Report
---
Standard Report (Bordered)
========================================================================== */
.t-Report-cell,
.t-Report-colHead {
border: 1px solid contrast(@g_Region-BG, darken(@g_Region-BG, 10%), lighten(@g_Region-BG, 10%), 43%);
}
.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%);
.u-RTL & {
border-left: 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: fadeout(@g_Region-BG, 5%);
-webkit-backdrop-filter: blur(4px);
}
/* ==========================================================================
.t-Report--inline
---
========================================================================== */
.t-Region--noPadding .t-Report--horizontalBorders,
.t-Report--inline {
.is-stuck .t-Report-colHead {
background-color: @_base-bg-alpha-12;
border-bottom-color: @_base-alpha-2;
}
}
.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%);
background-color: @_base-alpha-2;
}
}
/* ==========================================================================
.t-Report--pagination
========================================================================== */
.t-Report-paginationText b,
.t-Report-paginationText a:hover {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-Report-links {
border-color: @_base-alpha-3;
background-color: @_base-alpha-1;
}
.t-SearchResults-desc {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 85%), 100%), desaturate(lighten(@g_Body-BG, 85%), 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, 85%), 100%), desaturate(lighten(@g_Region-BG, 85%), 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%);
}
}
/* Star Rating
========================================================================== */
.a-StarRating-stars {
--a-starrating-stars-bg-color: @_base-alpha-5;
color: @_base-alpha-5;
}
.a-StarRating-stars.is-focused {
box-shadow: 0 0 0 1px currentColor inset;
.a-StarRating-stars-fg .a-StarRating-star {
text-shadow: 0 0 2px currentColor;
}
}
.a-GV-cell.is-active .a-StarRating-stars.is-focused {
box-shadow: none;
}
.a-StarRating-stars-fg {
color: @g_Accent-BG;
}
.a-StarRating-value {
color: @g_Body-Text;
}
.a-StarRating-clear {
&:focus {
box-shadow: inset @g_Accent-BG 0 0 0 1px;
}
}
.a-StarRating--disabled .a-StarRating-stars-fg {
color: initial;
}
.t-StatusList-blockHeader {
// .text-dark();
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 85%), 100%), desaturate(lighten(@g_Region-BG, 85%), 50%)), 100%);
background-color: @g_Region-Header-BG;
border-bottom-color: @_base-alpha-2;
border-top-color: @_base-alpha-2;
}
.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, 85%), 100%), desaturate(lighten(@g_Region-BG, 85%), 50%)), 100%);
// .text-dark();
}
.t-StatusList--dates {
.t-StatusList-marker {
color: @_base-alpha-9;
border-radius: 2px;
background-color: @_base-bg-alpha-13;
box-shadow: 0 0 0 1px @_base-alpha-4 inset;
&:after {
background-color: @_base-alpha-6;
border-radius: 2px 2px 0 0;
}
}
.t-StatusList-item.is-null {
.t-StatusList-marker {
box-shadow: 0 0 0 1px @_base-alpha-2 inset;
}
}
}
.t-StatusList--bullets {
.t-StatusList-marker {
border-radius: 24px;
background-color: #fff;
color: #404040;
border-color: @_base-alpha-5;
}
.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: @_base-alpha-12;
color: @_base-bg-alpha-11;
box-shadow: 0 0 0 1px @_base-alpha-2 inset;
}
}
}
.t-StatusList-itemIcon {
color: @_base-alpha-8;
box-shadow: 0 0 0 @_base-alpha-6 inset;
background-color: @_base-bg-alpha-13;
}
/**
* Import Compass and Theme Variables
*/
/* ==========================================================================
Table
========================================================================== */
.a-Table {}
/* Stroke Modifier
========================================================================== */
.a-Table.u-Report {
td,
th {
border-color: transparent;
}
&.table-stroke {
td,
th {
border-color: @_base-alpha-4;
}
}
}
/* Stripe Modifier
========================================================================== */
.a-Table.u-Report {
tr:nth-child(even) td,
tr:nth-child(even) th[scope="row"] {
background-color: @_base-bg;
}
&.table-stripe {
tr:nth-child(even) td,
tr:nth-child(even) th[scope="row"] {
background-color: @_base-alpha-1;
}
}
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
@media (max-width: 560px) {
.a-Table--reflow.ui-responsive td,
.a-Table--reflow.ui-responsive th {
border-bottom-color: @_base-alpha-2;
}
}
/* ==========================================================================
Report Utilities
========================================================================== */
.u-Report {
.u-Report-header,
th {
background-color: @_base-alpha-1;
color: @_base;
}
th[scope="rowgroup"] {
background-color: @_base-alpha-2;
}
th[scope="row"] {
background-color: @_base-bg;
}
td {
color: @_base;
background-color: @_base-bg;
}
tr:nth-child(even) td,
tr:nth-child(even) th[scope="row"] {
background-color: @_base-alpha-1;
}
td,
th {
border-color: @_base-alpha-4;
}
}
.u-Report--staticBG {
tr:nth-child(even) td,
tr:nth-child(even) th[scope="row"] {
border-color: @_base-alpha-1;
}
}
/**
* 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 {
box-shadow: 0 -2px 0 @g_Focus inset;
}
.t-Tabs--simple .t-Tabs-link:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
.t-Tabs--pill {
background-color: darken(@g_Region-BG, 2.5%);
border-radius: 2px;
border-color: @_base-alpha-4;
box-shadow: 0 1px 2px @_base-shadow-2;
.t-Icon {
color: @g_Region-FG;
}
.t-Tabs-link {
color: @g_Region-FG;
border-left-color: @_base-alpha-4;
.u-RTL & {
border-right-color: @_base-alpha-4;
}
&:hover {
background-color: @g_Region-BG;
}
&:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
&:active {
background-color: @g_Region-BG;
box-shadow: 0 2px 1px @_base-shadow-2 inset;
}
}
.t-Tabs-item:first-child .t-Tabs-link {
border-radius: 2px 0 0 2px;
.u-RTL & {
border-radius: 0 2px 2px 0;
}
}
.t-Tabs-item:last-child .t-Tabs-link {
border-right-color: @_base-alpha-4;
.u-RTL & {
border-left-color: @_base-alpha-4;
}
}
.t-Tabs-item.is-active {
.t-Tabs-link {
background-color: @g_Region-BG;
}
}
}
.t-Tabs--simple .t-Icon {
color: @g_Region-FG;
}
.t-Tabs--simple .t-Tabs-link {
color: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG, 85%), 100%), desaturate(lighten(@g_Body-Title-BG, 85%), 50%)), 100%);
&:hover {
background-color: @_base-alpha-1;
}
&:active {
background-color: @_base-alpha-5;
}
.t-Body & {
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 85%), 100%), desaturate(lighten(@g_Body-BG, 85%), 50%)), 100%);
}
.t-Body-title & {
color: @g_Body-Title-FG;
}
.t-Region & {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 85%), 100%), desaturate(lighten(@g_Region-BG, 85%), 50%)), 100%);
}
}
/* ==========================================================================
Region Display Selector
========================================================================== */
.apex-rds .apex-rds-selected span {
box-shadow: 0 -2px 0 @g_Focus inset;
}
.apex-rds a:focus {
box-shadow: 0 0 0 1px @g_Focus inset;
}
.apex-rds a {
.t-Body-title &,
.t-Body-info & {
color: @g_Body-Title-FG;
}
.t-Region & {
color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG, 85%), 100%), desaturate(lighten(@g_Region-BG, 85%), 50%)), 100%);
}
color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG, 85%), 100%), desaturate(lighten(@g_Body-BG, 85%), 50%)), 100%);
&:hover {
color: @g_Link-Base;
}
}
.apex-rds .apex-rds-selected a {
color: @g_Link-Base;
}
.apex-rds-hover.left {
a {
background: linear-gradient(to right, @g_Body-Title-BG 50%, @_base-bg-alpha-0 100%);
}
}
.apex-rds-hover.right {
a {
background: linear-gradient(to right, @g_Body-Title-BG 0%, @_base-bg-alpha-0 1%, @g_Body-Title-BG 50%);
}
}
.apex-rds-item--hint a span {
box-shadow: 0 -2px 0 @_base-alpha-6 inset;
}
/* Vertical RDS
========================================================================== */
.vertical-rds,
.t-Body-side {
.apex-rds .apex-rds-selected span {
box-shadow: 4px 0 0 @g_Focus inset;
.u-RTL & {
box-shadow: -4px 0 0 @g_Focus inset;
}
}
}
/**
* 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: 500;
}
.t-Timeline {
color: @g_Region-FG;
}
.t-Timeline-item {
border-bottom-color: @_base-alpha-4;
// background-color: @g_Region-BG;
}
.t-Timeline-username,
.t-Timeline-date,
.t-Timeline-desc {
color: @g_Region-FG-Light;
}
.t-Timeline-avatar {
background-color: @g_Accent-BG;
color: @g_Accent-FG;
}
.t-Timeline-wrap {
color: @g_Region-FG;
}
a.t-Timeline-wrap {
&:hover,
&:focus {
background-color: @_base-alpha-2;
box-shadow: 0 8px 8px -4px @_base-shadow-2, 0 2px 8px -2px @_base-shadow-4;
}
}
.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;
}
.t-Timeline + .t-Report-pagination {
border-top-color: @_base-alpha-4;
}
.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 @g_Focus inset;
background-color: transparent;
}
.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;
&:before {
color: inherit;
}
}
}
.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;
}
}
}
@media (min-width: 769px) {
.t-Body-nav {
background-color: @g_Nav-BG;
border-right: 1px solid @_base-alpha-4;
.u-RTL & {
border-right: 0;
border-left: 1px solid @_base-alpha-4;
}
}
}
.t-TreeNav {
background-color: @g_Nav-BG;
}
.t-PageBody--leftNav {
.t-Body-nav::-webkit-scrollbar-thumb {
background-color: contrast(@g_Nav-Active-BG, darken(@g_Nav-Active-BG, 3%), lighten(@g_Nav-Active-BG, 3%), 43%);
box-shadow: inset 1px 0 0 0 @g_Nav-BG;
&:hover {
background-color: contrast(@g_Nav-Active-BG, darken(@g_Nav-Active-BG, 15%), lighten(@g_Nav-Active-BG, 15%), 43%);
}
}
.t-Body-nav::-webkit-scrollbar-track {
background: @g_Nav-BG;
&:hover {
background-color: contrast(@g_Nav-BG, darken(@g_Nav-BG, 15%), lighten(@g_Nav-BG, 15%), 43%);
}
}
}
.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;
}
.js-navCollapsed & .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label .a-TreeView-badge {
background: darken(@g_Nav-BG, 15%);
color: @g_Nav-Active-FG;
}
.a-TreeView-badge {
box-shadow: 0 0 0 1px fadeout(@g_Nav-Active-FG, 90%);
font-weight: 400;
}
.a-TreeView-content.is-current,
.a-TreeView-content.is-current--top {
.a-TreeView-label {
font-weight: 500;
}
}
}
/* Style A
========================================================================== */
.t-TreeNav--styleA {
.a-TreeView-node--topLevel {
border-bottom: 1px solid fadeout(@g_Nav-Accent-FG, 92.5%);
.a-TreeView-row.is-current--top,
.a-TreeView-row.is-current--top ~ ul .a-TreeView-row {
box-shadow: inset @g_Nav-Accent-BG 4px 0 0;
.u-RTL & {
box-shadow: inset @g_Nav-Accent-BG -4px 0 0;
}
}
.a-TreeView-row.is-current--top.is-focused,
.a-TreeView-row.is-current--top ~ ul .a-TreeView-row.is-focused {
box-shadow: inset @g_Nav-Accent-BG 4px 0 0, 0 0 0 1px @g_Nav-Accent-BG inset;
.u-RTL & {
box-shadow: inset @g_Nav-Accent-BG -4px 0 0, 0 0 0 1px @g_Nav-Accent-BG inset;
}
}
}
.a-TreeView-badge {
background-color: @g_Nav-Badge-BG;
color: @g_Nav-Badge-FG;
}
}
.js-navCollapsed .t-TreeNav--styleA .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label .a-TreeView-badge {
background-color: @g_Nav-Badge-BG;
color: @g_Nav-Badge-FG;
box-shadow: none;
}
/* Style B
========================================================================== */
.t-TreeNav--styleB {
.a-TreeView-node--topLevel {
ul {
background-color: transparent;
}
.a-TreeView-row.is-current--top,
.a-TreeView-row.is-current--top.is-selected {
background-color: @g_Nav-Accent-BG;
}
.a-TreeView-row.is-current--top.is-selected + .a-TreeView-toggle,
.a-TreeView-content.is-current--top {
color: @g_Nav-Accent-FG;
}
.a-TreeView-content.is-current--top.is-hover {
color: @g_Nav-Accent-FG !important;
}
.a-TreeView-row.is-current--top.is-hover {
background-color: lighten(@g_Nav-Accent-BG, 1%) !important;
}
}
.a-TreeView-badge {
background-color: @g_Nav-Badge-BG;
color: @g_Nav-Badge-FG;
box-shadow: none;
}
}
/* ==========================================================================
Validation Pugin
========================================================================== */
.t-Validation-date {
color: @g_Region-FG;
}
.t-Validation-user {
color: contrast(@g_Region-FG, darken(@g_Region-FG, 10%), lighten(@g_Region-FG, 10%), 43%);
}
.t-Body-actions {
.t-Validation-date {
color: @g_Actions-Col-Text;
}
.t-Validation-user {
color: contrast(@g_Actions-Col-Text, darken(@g_Actions-Col-Text, 10%), lighten(@g_Actions-Col-Text, 10%), 43%);
}
}
/* ====== scss/compiled/core_removed/Wizard.scss ====== */
@l_Wizard-BG: @g_Region-BG;
.t-Dialog-page--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: @g_Container-BorderRadius;
border-color: contrast(@l_Wizard-BG, darken(@l_Wizard-BG, 10%), lighten(@l_Wizard-BG, 10%), 43%);
box-shadow: 0 1px 2px @_base-shadow-2;
.t-Wizard-title {
color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG, 85%), 100%), desaturate(lighten(@l_Wizard-BG, 85%), 50%)), 100%);
}
.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;
}
.t-WizardSteps-label {
color: fade(contrast(@l_Wizard-BG, desaturate(darken(@l_Wizard-BG, 85%), 100%), desaturate(lighten(@l_Wizard-BG, 85%), 50%)), 100%);
}
a.t-WizardSteps-wrap[href]:hover,
a.t-WizardSteps-wrap[href]:focus {
.t-WizardSteps-label {
color: @g_Link-Base;
text-decoration: underline;
}
}
a.t-WizardSteps-wrap[href]:focus .t-WizardSteps-marker {
box-shadow: 0 0 0 1px @g_Region-BG, 0 0 0 2px @g_Focus, 0 0 1px 2px fade(@g_Focus, 25%);
}
/**
* 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;
/* Overlay
----------------------------------*/
.ui-widget-overlay {
--jui-overlay-background-color: @g_Overlay-bg;
// opacity: 1;
}
/* Component containers
----------------------------------*/
.ui-widget {
// font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 12px;
}
.ui-widget .ui-widget {
font-size: 12px;
}
/* Component containers
----------------------------------*/
body .ui-widget-content,
body .ui-widget.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;
box-shadow: 0 0 0 1px fade(@_base, 1.25) inset;
}
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-active,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active {
box-shadow: 0 0 0 1px @_base-alpha-6 inset, 0 1px 2px @_base-shadow-7 inset;
}
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;
box-shadow: 0 2px 1px @_base-shadow-2, 0 0 0 1px fade(@_base, 1.25) inset;
}
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, 85%), 100%), desaturate(lighten(@g_Accent-FG, 85%), 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, 85%), 100%), desaturate(lighten(@g_Accent-FG, 85%), 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
----------------------------------*/
.ui-datepicker {
--jui-datepicker-shadow: 0 2px 6px @_base-shadow-2;
}
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;
color: @g_Accent-FG;
}
}
&.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%);
color: @ui-Body-FG;
}
body .ui-datepicker th {
color: contrast(@ui-Body-FG, darken(@ui-Body-FG, 25%), lighten(@ui-Body-FG, 25%), 43%);
border-bottom-color: @_base-alpha-4;
}
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;
}
body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
&:active {
box-shadow: 0 2px 1px @_base-shadow-2 inset, 0 0 0 1px fade(@_base, 1.25) inset;
}
}
/* Dialogs
----------------------------------*/
.ui-dialog {
--jui-dialog-title-close-border-radius: 100%;
--jui-dialog-shadow: 0 4px 16px -4px @_base-shadow-6, 0 8px 24px 0 @_base-shadow-5, 0 0 0 1px @_base-alpha-6;
// box-shadow: 0 4px 16px -4px @_base-shadow-6, 0 8px 24px 0 @_base-shadow-5, 0 0 0 1px @_base-alpha-6;
--jui-dialog-titlebar-border-width: 1px;
--jui-dialog-titlebar-border-color: @_base-alpha-2;
--jui-dialog-titlebar-background-color: @ui-Header-BG;
--jui-dialog-titlebar-text-color: @ui-Body-FG;
--jui-dialog-buttonpane-border-color: contrast(@g_Region-BG, darken(@g_Region-BG, 8%), lighten(@g_Region-BG, 8%), 43%);
}
.ui-dialog-titlebar {
// background-color: @ui-Header-BG;
// border-bottom: 1px solid @_base-alpha-2;
}
.ui-dialog.t-Dialog-page--wizard .ui-dialog-titlebar {
background-color: @ui-Body-BG;
}
.ui-dialog .ui-dialog-title {
// color: @ui-Header-FG;
}
.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;
}
.ui-dialog-titlebar-close {
// border-radius: 100%;
}
.ui-dialog-buttonpane {
// border-top-color: contrast(@g_Region-BG, darken(@g_Region-BG, 8%), lighten(@g_Region-BG, 8%), 43%);
}
/* ==========================================================================
Color Utility Classes
========================================================================== */
@l_Button-Hot-BG: @g_Accent-BG;
@l_Button-Hot-Text: contrast(@l_Button-Hot-BG, darken(@l_Button-Hot-BG, 85%), lighten(@l_Button-Hot-BG, 85%), 43%);
/* Warning State
========================================================================== */
.u-warning {
background-color: @g_Warning-BG !important;
color: @g_Warning-FG;
&-text {
color: @g_Warning-BG !important;
}
&-bg {
background-color: @g_Warning-BG !important;
}
&-border {
border-color: @g_Warning-BG !important;
}
}
/* Success State
========================================================================== */
.u-success {
background-color: @g_Success-BG !important;
color: @g_Success-FG;
&-text {
color: @g_Success-BG !important;
}
&-bg {
background-color: @g_Success-BG !important;
}
&-border {
border-color: @g_Success-BG !important;
}
}
/* Danger State
========================================================================== */
.u-danger {
background-color: @g_Danger-BG !important;
color: @g_Danger-FG;
&-text {
color: @g_Danger-BG !important;
}
&-bg {
background-color: @g_Danger-BG !important;
}
&-border {
border-color: @g_Danger-BG !important;
}
}
/* Info State
========================================================================== */
.u-info {
background-color: @g_Info-BG !important;
color: @g_Info-FG;
&-text {
color: @g_Info-BG !important;
}
&-bg {
background-color: @g_Info-BG !important;
}
&-border {
border-color: @g_Info-BG !important;
}
}
/* Hot State
========================================================================== */
.u-hot {
background-color: @l_Button-Hot-BG !important;
color: @l_Button-Hot-Text;
&-text {
color: @l_Button-Hot-BG !important;
}
&-bg {
background-color: @l_Button-Hot-BG !important;
}
&-border {
border-color: @l_Button-Hot-BG !important;
}
}
/* Normal State
========================================================================== */
.u-normal {
background-color: @g_Body-BG !important;
color: @g_Body-Text;
&-text {
color: @g_Body-Text !important;
}
&-bg {
background-color: @g_Body-Text !important;
}
&-border {
border-color: @g_Body-Text !important;
}
}
// /* ==========================================================================
// Cycle Colors for Lists
// ========================================================================== */
// .color-cycle(@counter) when (@counter > 0) {
// .color-cycle(@counter - 1);
// li:nth-child(@{i}) {
// color: @color@{i};
// }
// }
// .u-color-cycle {
// .color-cycle(30);
// }
/* ==========================================================================
Cycle Colors for Lists
========================================================================== */
.color-cycle(@n, @i: 1) when (@i =< @n) {
& > :nth-child(45n+@{i}) {
.u-color {
--u-color-bg: extract(@_colors, @i);
--u-color-fg: extract(@_colors_FG, @i);
background-color: extract(@_colors, @i);
fill: extract(@_colors, @i);
color: extract(@_colors_FG, @i);
}
.u-color-bg,
.u-color-background {
--u-color-bg: extract(@_colors, @i);
background-color: extract(@_colors, @i);
}
.u-color-txt,
.u-color-text {
--u-color-fg: extract(@_colors, @i);
color: extract(@_colors, @i);
}
.u-color-bd,
.u-color-border {
--u-color-bd: extract(@_colors, @i);
border-color: extract(@_colors, @i);
stroke: extract(@_colors, @i);
}
}
.color-cycle(@n, (@i + 1));
}
.u-colors {
&,
.a-CardView-items {
.color-cycle(45);
}
}
/* Color Parents (used in Lists and other places as template options)
========================================================================== */
// .color-parents(@n, @i: 1) when (@i =< @n) {
// .u-colors-accent-@{i} {
// .u-color {
// background-color: extract(@_colors, @i);
// fill: extract(@_colors, @i);
// color: extract(@_colors_FG, @i);
// }
// .u-color-bg,
// .u-color-background {
// background-color: extract(@_colors, @i);
// }
// .u-color-txt,
// .u-color-text {
// color: extract(@_colors, @i);
// }
// .u-color-bd,
// .u-color-border {
// border-color: extract(@_colors, @i);
// stroke: extract(@_colors, @i);
// }
// }
// .color-parents(@n, (@i + 1));
// }
// .color-parents(15);
/* ==========================================================================
Pallete Colors
========================================================================== */
.color-palette(@n, @i: 1) when (@i =< @n) {
.u-color-@{i} {
--u-color-bg: extract(@_colors, @i) !important;
--u-color-fg: extract(@_colors_FG, @i) !important;
background-color: extract(@_colors, @i) !important;
fill: extract(@_colors, @i) !important;
color: extract(@_colors_FG, @i) !important;
}
.u-color-@{i}-bg,
.u-color-@{i}-background {
--u-color-bg: extract(@_colors, @i) !important;
background-color: extract(@_colors, @i) !important;
fill: extract(@_colors, @i) !important;
}
.u-color-@{i}-txt,
.u-color-@{i}-text {
--u-color-fg: extract(@_colors, @i) !important;
color: extract(@_colors, @i) !important;
}
.u-color-@{i}-bd,
.u-color-@{i}-border {
--u-color-bd: extract(@_colors, @i) !important;
border-color: extract(@_colors, @i) !important;
stroke: extract(@_colors, @i) !important;
}
.color-palette(@n, (@i + 1));
}
.color-palette(45);
/* Transparent Colors
========================================================================== */
.u-color-transparent {
--u-color-bg: transparent !important;
--u-color-fg: transparent !important;
background-color: transparent !important;
color: transparent !important;
}
.u-color-transparent-bg {
--u-color-bg: transparent !important;
background-color: transparent !important;
}
.u-color-transparent-txt,
.u-color-transparent-text {
--u-color-fg: transparent !important;
color: transparent !important;
}
.u-color-transparent-bd,
.u-color-transparent-border {
--u-color-bd: transparent !important;
border-color: transparent !important;
}