com.phloxui/styles/variables.less

PhloxUI Ng2+ Framework

@import "defaults";

// ======= Colors =======
@CLR_A: #292222, #332a2a, #403535, #504242, #645252, #837575, #9c9191, #b0a7a7, #b0a7a7;
@CLR_B: #35191b, #421f22, #52272b, #663136, #7f3d44, #996469, #ad8387, #bd9c9f, #cab0b2;
@CLR_C: #350215, #42021a, #530221, #680229, #820333, #9b355c, #9b355c, #bf7d97, #cc97ac;
@CLR_D: #4b181e, #5e1e25, #75262e, #922f3a, #b73b48, #c5626d, #d1818a, #da9aa1, #e1aeb4;
@CLR_E: #582d13, #6e3818, #89461e, #ab5826, #d66e30, #de8b59, #e5a27a, #eab595, #eec4aa;
@CLR_F: #634a28, #7c5d32, #9b743e, #c2914e, #f3b562, #f5c481, #f7d09a, #f9d9ae, #fae1be;
@CLR_G: #655320, #7e6828, #9e8232, #c6a23e, #f8ca4d, #f9d571, #fadd8d, #fbe4a4, #fce9b6;
@CLR_H: #3c4128, #3c4128, #5e653e, #767e4d, #939e60, #a9b180, #bac199, #c8cdad, #d3d7bd;
@CLR_I: #29301c, #333c23, #404b2c, #505e37, #647545, #83916a, #9ca788, #b0b9a0, #c0c7b3;
@CLR_J: #222f0d, #222f0d, #344a14, #415c19, #51731f, #748f4c, #90a570, #a6b78d, #b8c5a4;
@CLR_K: #2c3a13, #374818, #455a1e, #567026, #6b8c30, #89a359, #a1b57a, #b4c495, #c3d0aa;
@CLR_L: #18362c, #1e4337, #255445, #2e6956, #3a836c, #619c89, #81b0a1, #9ac0b4, #aecdc3;
@CLR_M: #163a3b, #1b484a, #225a5d, #2b7074, #368c91, #5ea3a7, #7eb5b9, #98c4c7, #add0d2;
@CLR_N: #1e3c3f, #254b4f, #2e5e63, #39757c, #47929b, #6ca8af, #89b9bf, #a1c7cc, #b4d2d6;
@CLR_O: #2d4d5a, #386070, #46788c, #5796af, #6dbcdb, #8ac9e2, #a1d4e8, #b4dded, #c3e4f1;
@CLR_P: #004968, #005b82, #0072a3, #008ecc, #00b1ff, #33c1ff, #5ccdff, #7dd7ff, #97dfff;
@CLR_Q: #162f3e, #1b3b4d, #224a60, #2a5c78, #357396, #5d8fab, #7da5bc, #97b7c9, #acc5d4;
@CLR_R: #0a1b2b, #0c2236, #0f2a43, #133454, #184169, #466787, #6b859f, #899db2, #a1b1c1;
@CLR_S: #121a21, #162029, #1c2833, #233240, #2c3e50, #566573, #78848f, #939da5, #a9b1b7;
@CLR_T: #1a181f, #201e27, #282631, #322f3d, #3e3b4c, #656270, #84818d, #9d9aa4, #b1aeb6;
@CLR_U: #251628, #2e1b32, #3a223e, #482b4e, #5a3662, #7b5e81, #957e9a, #aa98ae, #bbadbe;
@CLR_V: #371e38, #452646, #562f58, #6b3b6e, #864a89, #9e6ea1, #b18bb4, #c1a2c3, #cdb5cf;
@CLR_W: #441e30, #55263c, #6a304b, #853c5e, #a64b75, #b86f91, #c68ca7, #d1a3b9, #dab5c7;
@CLR_0: #000000, #141414, #292929, #3d3d3d, #525252, #666666, #7a7a7a, #8f8f8f, #a3a3a3;
@CLR_1: #a3a3a3, #b8b8b8, #c2c2c2, #cccccc, #d6d6d6, #e0e0e0, #ededed, #f5f5f5, #ffffff;

@CLR_BRAND_HUE_LEFT: @CLR_E;
@CLR_BRAND_HUE: @CLR_F;
@CLR_BRAND_HUE_RIGHT: @CLR_G;
@CLR_BRAND: extract(@CLR_BRAND_HUE, 5);
@CLR_BRAND_FONT: extract(@CLR_1, 9);
@CLR_FIXED_FONT: extract(@CLR_0, 4);
@CLR_BORDER_COLOR: extract(@CLR_1, 5);
@CLR_DISABLED_FONT: extract(@CLR_1, 4);
@CLR_DISABLED_BG: extract(@CLR_1, 8);
@CLR_ERROR: red;

// Override default ripple effect value
@DEFAULT_RIPPLE_EFFECT_BG: extract(@CLR_BRAND_HUE, 7);

// Constants
@FONT_SIZE_BASE: 11pt;
@FONT_SIZE_LARGE_FACTOR: 1.61;
@FONT_SIZE_SMALL_FACTOR: 0.62;
@FONT_SIZE_VSMALL_FACTOR: 0.38;
@FONT_SIZE_H1_FACTOR: 2.6;
@FONT_SIZE_H2_FACTOR: 2.15;
@FONT_SIZE_H3_FACTOR: 1.7;
@FONT_SIZE_H4_FACTOR: 1.25;
@FONT_SIZE_H5_FACTOR: 1;
@FONT_SIZE_H6_FACTOR: 0.85;

@FONT_SIZE_L0: @FONT_SIZE_BASE *  0.81;
@FONT_SIZE_L1: @FONT_SIZE_BASE *  1;
@FONT_SIZE_L2: @FONT_SIZE_BASE *  1.43;
@FONT_SIZE_L3: @FONT_SIZE_BASE *  1.86;
@FONT_SIZE_L4: @FONT_SIZE_BASE *  2.29;
@FONT_SIZE_L5: @FONT_SIZE_BASE *  2.27;
@FONT_SIZE_L6: @FONT_SIZE_BASE *  3.15;
@FONT_SIZE_L7: @FONT_SIZE_BASE *  3.85;
@FONT_SIZE_L8: @FONT_SIZE_BASE *  4.01;
@FONT_SIZE_L9: @FONT_SIZE_BASE *  4.44;
@FONT_SIZE_L10: @FONT_SIZE_BASE *  4.87;

@ASSETS_ROOT_PATH: '..';
@FONT_ROOT_PATH: '@{ASSETS_ROOT_PATH}/fonts';
@FONT_PHLOX_GLYPHICONS_NAME: 'phlox-glyphicons';
@FONT_PHLOX_GLYPHICONS_RELATIVE_PATH: '@{FONT_PHLOX_GLYPHICONS_NAME}.woff2';
@FONT_PHLOX_GLYPHICONS_FORMAT: 'woff2';

@IMAGE_ROOT_PATH: @ASSETS_ROOT_PATH + "/images";

@FONT_DISPLAY_STYLE_IMPORT_URL: "https://fonts.googleapis.com/css?family=Slabo+27px";
@FONT_DISPLAY_FAMILY: 'Slabo 27px', serif;
@FONT_HEADLINE_STYLE_IMPORT_URL: "https://fonts.googleapis.com/css?family=Muli";
@FONT_HEADLINE_FAMILY: Muli, Kanit, sans-serif;
@FONT_CONTENT_STYLE_IMPORT_URL: "https://fonts.googleapis.com/css?family=Kanit:200,300,700";
@FONT_CONTENT_FAMILY: Muli, Kanit, sans-serif;

// Disabled
@DISABLED_FILTER: grayscale(100%);
@DISABLED_OVERLAY_BG: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC) repeat;

/* Commons */
@BORDER_COLOR_SUCCESS: extract(@CLR_K, 5);
@BORDER_COLOR_WARNING: extract(@CLR_E, 5);
@BORDER_COLOR_ERROR: extract(@CLR_D, 5);

/* Form Controls */
@FORM_CONTROL_FONT_COLOR: extract(@CLR_1, 1);
@FORM_CONTROL_FONT_COLOR_NORMAL: extract(@CLR_1, 5);
@FORM_CONTROL_FONT_COLOR_SUCCESS: @BORDER_COLOR_SUCCESS;
@FORM_CONTROL_FONT_COLOR_WARNING: @BORDER_COLOR_WARNING;
@FORM_CONTROL_FONT_COLOR_ERROR: @BORDER_COLOR_ERROR;
@FORM_CONTROL_FONT_COLOR_HELP: @CLR_FIXED_FONT;
@FORM_CONTROL_POPUP_BG_COLOR: extract(@CLR_1, 9);

/* Page Commons */
@PAGE_LOGO_SIZE: 38pt;
@PAGE_PANE_LABEL_WIDTH: 140pt;
@PAGE_PANE_PADDING_X: 8pt;
@PAGE_PANE_PADDING_Y: 6pt;
@PAGE_PANE_WIDTH: @PAGE_LOGO_SIZE + @PAGE_PANE_LABEL_WIDTH + 3 * @PAGE_PANE_PADDING_X;
@PAGE_PANE_HEIGHT: @PAGE_LOGO_SIZE + 2 * @PAGE_PANE_PADDING_Y;
@PAGE_LABEL_PADDING_TOP: (@PAGE_LOGO_SIZE - @font-size-h3 - @font-size-h3 * @FONT_SIZE_VSMALL_FACTOR - 5pt) / 2;
@PAGE_BORDER_THICKNESS: 0.25pt;
@PAGE_PANE_SHADOW_VLEN: 2;
@PAGE_PANE_SHADOW_BLUR: 3;

// editor page menu
@EDITOR_PAGE_ACTION_BUTTON_HEIGHT: @PAGE_PANE_HEIGHT;
@EDITOR_PAGE_ACTION_BUTTON_WIDTH: 80pt;
@EDITOR_PAGE_ACTION_BUTTON_FONT_SIZE: 9pt;
@EDITOR_PAGE_VIEW_BUTTON_HEIGHT: @PAGE_PANE_HEIGHT;
@EDITOR_PAGE_VIEW_BUTTON_WIDTH: 40pt;
@EDITOR_PAGE_VIEW_BUTTON_IMAGE_MARGIN_TOP: 15pt;
@EDITOR_PAGE_VIEW_BUTTON_IMAGE_MARGIN_LEFT: 9pt;
@EDITOR_PAGE_VIEW_BUTTON_IMAGE_OPACITY: 0.5;
@EDITOR_PAGE_VIEW_ACTIVE_BUTTON_IMAGE_OPACITY: 1;
@EDITOR_PAGE_SEARCH_BUTTON_HEIGHT: @PAGE_PANE_HEIGHT;
@EDITOR_PAGE_SEARCH_BUTTON_WIDTH: @EDITOR_PAGE_VIEW_BUTTON_WIDTH;
@EDITOR_PAGE_SEARCH_BUTTON_PADDING_TOP: 10pt;
@EDITOR_PAGE_SEARCH_BUTTON_BORDER_HEIGHT: 30pt;
@EDITOR_PAGE_SEARCH_BUTTON_BORDER_PADDING: 10pt;
@EDITOR_PAGE_SEARCH_BUTTON_BORDER: @PAGE_BORDER_THICKNESS solid rgba(255, 255, 255, 0.5);
@EDITOR_VIEW_ANIMATION_TRANSITION_DURATION: 450ms;
@EDITOR_CONTENT_PADDING_LEFT: 10pt;
@EDITOR_CONTENT_PADDING_RIGHT: @EDITOR_CONTENT_PADDING_LEFT;
@EDITOR_CONTENT_PADDING_BOTTOM: @EDITOR_PAGE_ACTION_BUTTON_HEIGHT;
@EDITOR_CONTENT_BORDER_THICKNESS: 1pt;
@EDITOR_CONTENT_SHADOW_VLEN: @PAGE_PANE_SHADOW_VLEN;
@EDITOR_CONTENT_SHADOW_BLUR: 10;
@EDITOR_CONTENT_SHADOW_SPREAD: 1; 
@HEADER_PADDING_LEFT: 80pt;
@HEADER_PADDING_RIGHT: 130pt;

// record view
@RECORD_VIEW_HEADER_HEIGHT: 45pt;
@RECORD_VIEW_HEADER_BORDER_THICKNESS: @PAGE_BORDER_THICKNESS;
@RECORD_HEADER_PADDING_TOP: 7pt;
@RECORD_HEADER_PADDING_BOTTOM: @RECORD_HEADER_PADDING_TOP;
@RECORD_HEADER_SWITCH_TITLE_CONTAINER_WIDTH: 100pt;
@RECORD_HEADER_SWITCH_CONTAINER_WIDTH: 60pt;
@RECORD_HEADER_SWITCH_CONTAINER_PADDING_TOP: 8pt;
@RECORD_HEADER_SWITCH_CONTAINER_PADDING_TOP_CHROME: 10pt;
@RECORD_HEADER_SWITCH_WIDTH: 30pt;
@RECORD_HEADER_SWITCH_HEIGHT: 14.25pt;
@RECORD_HEADER_SWITCH_AFTER_TOGGLE_LEFT: 15.05pt; 
@RECORD_HEADER_SWITCH_LABEL_MARGIN_LEFT: 12pt;
@RECORD_HEADER_SWITCH_LABEL_MARGIN_TOP: 8pt;
@RECORD_HEADER_BTN_LABEL_MARGIN_LEFT: 10pt;
@RECORD_HEADER_BTN_LABEL_MARGIN_RIGHT: @RECORD_HEADER_BTN_LABEL_MARGIN_LEFT;
@RECORD_HEADER_CREATE_CONTAINER_WIDTH: 90pt;
@RECORD_HEADER_REDO_UNDO_CONTAINER_WIDTH: @RECORD_HEADER_CREATE_CONTAINER_WIDTH;
@RECORD_HEADER_SAVE_CONTAINER_WIDTH: @RECORD_HEADER_CREATE_CONTAINER_WIDTH;
@RECORD_HEADER_SORTING_CONTAINER_WIDTH: 120pt;
@RECORD_HEADER_BTN_LABEL_MARGIN_LEFT_ICON: 5pt;
@RECORD_HEADER_CREATE_ICON_TOP: 9pt;
@RECORD_HEADER_CREATE_ICON_LEFT: 5pt;
@RECORD_HEADER_CREATE_LABEL_TOP: 8pt;
@RECORD_HEADER_CREATE_LABEL_LEFT: 23pt;  
@RECORD_HEADER_SORT_ICON_TOP: 8pt;
@RECORD_HEADER_SORT_ICON_LEFT: 10pt;
@RECORD_HEADER_SETTING_ICON_TOP: 5pt;
@RECORD_HEADER_SETTING_ICON_LEFT: 32pt;
@RECORD_HEADER_TOP_LABEL_TOP: @RECORD_HEADER_CREATE_LABEL_TOP;
@RECORD_HEADER_TOP_LABEL_LEFT: 62pt;
@RECORD_HEADER_UNDO_HINT_TOP: @RECORD_VIEW_HEADER_HEIGHT - @RECORD_HEADER_PADDING_TOP - @RECORD_HEADER_PADDING_BOTTOM;
@RECORD_HEADER_REDO_HINT_TOP: @RECORD_HEADER_UNDO_HINT_TOP;
@RECORD_HEADER_REDO_HINT_LEFT: (@RECORD_HEADER_REDO_UNDO_CONTAINER_WIDTH / 2) + 2;
@RECORD_TABLE_HEADER_HEIGHT: 35pt;
@RECORD_TABLE_LOADING_TOP: -100pt; 

// calendar view
@CALENDAR_VIEW_HEADER_HEIGHT: 45pt;
@CALENDAR_VIEW_HEADER_PADDING_TOP: @RECORD_HEADER_PADDING_TOP;
@CALENDAR_VIEW_DAY_MONTH_HEADER_HEIGHT: 35pt;
@CALENDAR_VIEW_DAY_MONTH_HEIGHT: 20%;
@CALENDAR_VIEW_DAY_MONTH_ENTRY_WIDTH: 14.285714285714285714285714285714%;
@CALENDAR_VIEW_DAY_MONTH_ENTRY_HEIGHT: 15pt;
@CALENDAR_VIEW_DAY_MONTH_ENTRY_PADDING: 1pt;
@CALENDAR_VIEW_DAY_MONTH_ENTRY_BORDER_RADIUS: 6.5pt; // (height - (padding * 2)) / 2
@CALENDAR_VIEW_BODY_HEIGHT: 100%;
@CALENDAR_VIEW_BORDER_THICKNESS: 1pt;
@CALENDAR_VIEW_DAY_ROW_HEIGHT: 46pt;
@CALENDAR_VIEW_DAY_ROW_PADDING_LEFT: 5pt;
@CALENDAR_VIEW_DAY_ROW_PADDING_RIGHT: @CALENDAR_VIEW_DAY_ROW_PADDING_LEFT;
@CALENDAR_VIEW_DAY_ROW_BORDER_WIDTH: 1pt;
@CALENDAR_VIEW_DAY_RIGHT_PANEL_WIDTH: 220pt;
@CALENDAR_VIEW_DAY_LEFT_TIME_PANEL_WIDTH: 60pt;
@CALENDAR_VIEW_DAY_ENTRY_SHADOW: 0px 3px 6px 0px rgba(0,0,0,0.14);;
@CALENDAR_VIEW_WEEK_HEADER_HEIGHT: 45pt;
@CALENDAR_VIEW_WEEK_TITLE_WIDTH: 60pt;
@CALENDAR_VIEW_WEEK_SCROLL_WIDTH: 11pt;
@CALENDAR_VIEW_WEEK_ROW_HEIGHT: 46pt;
@CALENDAR_VIEW_WEEK_ENTRY_PADDING: 1.3pt;
@CALENDAR_VIEW_AGENDA_RIGHT_PANEL_WIDTH: @CALENDAR_VIEW_DAY_RIGHT_PANEL_WIDTH;
@CALENDAR_VIEW_AGENDA_ROW_DAY_LABEL_WIDTH: 60pt;
@CALENDAR_VIEW_AGENDA_ROW_TIME_LABEL_WIDTH: 80pt;
@CALENDAR_VIEW_AGENDA__TIMELINE_HEADER_HEIGHT: 45pt;
@CALENDAR_VIEW_ENTRY_WIDTH: 140pt;
@CALENDAR_VIEW_ENTRY_LINE_WIDTH: 4pt;
@CALENDAR_VIEW_MONTH_NUMBER_PADDING: 5pt;
@CALENDAR_VIEW_MINI_CALENDAR_TODAY_BORDER: 2px;
@CALENDAR_VIEW_MINI_CALENDAR_HEIGHT: 150pt;
@CALENDAR_VIEW_MINI_CALENDAR_NUMBER_DIV_HEIGHT: 20pt;
@CALENDAR_VIEW_SELECTED_BORDER_THICKNESS: 1.5pt;
@CALENDAR_HEADER_SWITCH_WIDTH: 30pt;
@CALENDAR_HEADER_SWITCH_HEIGHT: 14.25pt;
@CALENDAR_HEADER_SWITCH_CONTAINER_WIDTH: 50pt;
@CALENDAR_HEADER_SWITCH_AFTER_TOGGLE_LEFT: 15.05pt;
@CALENDAR_HEADER_SWITCH_MARGIN_TOP: 13pt;
@CALENDAR_HEADER_SWITCH_MARGIN_LEFT: 12pt;
@CALENDAR_HEADER_SWITCH_MARGIN_TOP_WINDOW: 2pt;
@CALENDAR_HEADER_LIST_BOX_WIDTH: 200pt;
@CALENDAR_HEADER_LIST_BOX_HEIGHT: 20pt;

// phlox table
@PHLOX_TABLE_THEAD_BORDER_THICKNESS: 0.25pt;
@PHLOX_TABLE_ROW_DRAGGING_OPACITY: 0.3;
@PHLOX_TABLE_ICON_FONT_SIZE: 10pt;
@PHLOX_TABLE_ICON_PADDING: 4pt;
@PHLOX_TABLE_ICON_MOVE_FONT_SIZE: @PHLOX_TABLE_ICON_FONT_SIZE + 10pt;
@PHLOX_TABLE_ICON_SAVE_FONT_SIZE: @PHLOX_TABLE_ICON_FONT_SIZE + 5pt;

@PHLOX_TABLE_ROW_COLUMN_WIDTH: 40pt;
@PHLOX_TABLE_ROW_COLUMN_CONTROL_WIDTH: 66pt;//1px;
@PHLOX_TABLE_ROW_COLUMN_PADDING_LEFT: 10pt;
@PHLOX_TABLE_ROW_COLUMN_COA_PADDING_LEFT: 5pt;

// phlox dropdown
@PHLOX_DROPDOWN_BORDER_THICKNESS: 1pt;
@PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS: 1.5pt;
@PHLOX_DROPDOWN_LABEL_PADDING_LEFT: 10pt;
@PHLOX_DROPDOWN_LABEL_PADDING_RIGHT: 25pt;
@PHLOX_DROPDOWN_ARROW_PADDING_RIGHT: 8pt;
@PHLOX_DROPDOWN_ARROW_PADDING_TOP: @PHLOX_DROPDOWN_ARROW_PADDING_RIGHT - 2;
@PHLOX_DROPDOWN_LIST_LABEL_PADDING_TOP: 5pt;
@PHLOX_DROPDOWN_MIN_HEIGHT: 25pt;
@PHLOX_DROPDOWN_MIN_WIDTH: 130pt;
@PHLOX_DROPDOWN_LIST_SHADOW_HLEN: 0;
@PHLOX_DROPDOWN_LIST_SHADOW_VLEN: 3;
@PHLOX_DROPDOWN_LIST_SHADOW_BLUR: 3;
@PHLOX_DROPDOWN_LIST_SHADOW_SPREAD: 3;
@PHLOX_DROPDOWN_POPUP_TRANSITION: all 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275);


// phlox button
@PHLOX_BUTTON_MARGIN_LEFT: 5pt;
@PHLOX_BUTTON_MARGIN_RIGHT: @PHLOX_BUTTON_MARGIN_LEFT;
@PHLOX_BUTTON_WIDTH: 70pt;
@PHLOX_BUTTON_HEIGHT: 20pt;
@PHLOX_BUTTON_BORDER_RADIUS: 2px 2px 2px 2px;

// dialog
@PHLOX_DIALOG_BACKGROUND: rgba(0,0,0,0.2);
@PHLOX_DIALOG_Z_INDEX: 500;
@PHLOX_DIALOG_WIDTH: 300pt;
@PHLOX_DIALOG_HEIGHT: @CONFIRM_DIALOG_HEADER_HEIGHT + @CONFIRM_DIALOG_BODY_HEIGHT + @CONFIRM_DIALOG_BODY_FOOTER;
@CONFIRM_DIALOG_HEADER_HEIGHT: 50pt;
@CONFIRM_DIALOG_BODY_HEIGHT: 90pt;
@CONFIRM_DIALOG_BODY_FOOTER: 40pt;
@CONFIRM_DIALOG_BUTTON_MARGIN_LEFT: 5pt;
@CONFIRM_DIALOG_BUTTON_MARGIN_RIGHT: @CONFIRM_DIALOG_BUTTON_MARGIN_LEFT;
@CONFIRM_DIALOG_BUTTON_WIDTH: 70pt;
@CONFIRM_DIALOG_BUTTON_HEIGHT: 20pt;
@CONFIRM_DIALOG_BUTTON_BORDER_RADIUS: 2px 2px 2px 2px;
@CONFIRM_DIALOG_CANCEL_BUTTON_BORDER_WIDTH: 1pt 1pt;
@MESSAGE_DIALOG_HEADER_HEIGHT: @CONFIRM_DIALOG_HEADER_HEIGHT;
@MESSAGE_DIALOG_BODY_HEIGHT: @CONFIRM_DIALOG_BODY_HEIGHT;
@MESSAGE_DIALOG_BODY_FOOTER: @CONFIRM_DIALOG_BODY_FOOTER;
@MESSAGE_DIALOG_BUTTON_MARGIN_LEFT: @CONFIRM_DIALOG_BUTTON_MARGIN_LEFT;
@MESSAGE_DIALOG_BUTTON_MARGIN_RIGHT: @MESSAGE_DIALOG_BUTTON_MARGIN_LEFT;
@MESSAGE_DIALOG_BUTTON_WIDTH: @CONFIRM_DIALOG_BUTTON_WIDTH;
@MESSAGE_DIALOG_BUTTON_HEIGHT: @CONFIRM_DIALOG_BUTTON_HEIGHT;
@MESSAGE_DIALOG_BUTTON_BORDER_RADIUS: @CONFIRM_DIALOG_BUTTON_BORDER_RADIUS;
@MESSAGE_DIALOG_CANCEL_BUTTON_BORDER_WIDTH: @CONFIRM_DIALOG_CANCEL_BUTTON_BORDER_WIDTH;
@COMPONENT_DIALOG_WIDTH: 500pt;
@COMPONENT_DIALOG_HEIGHT: 400pt;
@COMPONENT_DIALOG_HEADER_XBTN_PADDING_RIGHT: 15pt;
@COMPONENT_DIALOG_HEADER_HEIGHT: 50pt;
@COMPONENT_DIALOG_BODY_HEIGHT: 90pt;
@COMPONENT_DIALOG_FOOTER_HEIGHT: 40pt;
// @COMPONENT_DIALOG_BODY_HEIGHT: @COMPONENT_DIALOG_HEIGHT - (@COMPONENT_DIALOG_HEADER_HEIGHT + @COMPONENT_DIALOG_FOOTER_HEIGHT);
@COMPONENT_DIALOG_BUTTON_MARGIN_LEFT: @CONFIRM_DIALOG_BUTTON_MARGIN_LEFT;
@COMPONENT_DIALOG_BUTTON_MARGIN_RIGHT: @COMPONENT_DIALOG_BUTTON_MARGIN_LEFT;
@COMPONENT_DIALOG_BUTTON_WIDTH: @CONFIRM_DIALOG_BUTTON_WIDTH;
@COMPONENT_DIALOG_BUTTON_HEIGHT: @CONFIRM_DIALOG_BUTTON_HEIGHT;
@COMPONENT_DIALOG_BUTTON_BORDER_RADIUS: @CONFIRM_DIALOG_BUTTON_BORDER_RADIUS;
@COMPONENT_DIALOG_CANCEL_BUTTON_BORDER_WIDTH: @CONFIRM_DIALOG_CANCEL_BUTTON_BORDER_WIDTH;
@COMPONENT_DIALOG_BORDER_THICKNESS: 1pt;
@COMPONENT_DIALOG_WRAPPER_PADDING: 20pt;

// tab
@PHLOX_TAB_PADDING_LEFT: 32pt; // 10
@PHLOX_TAB_PADDING_RIGHT: 10pt; // 10
@TAB_ADD_BUTTON_PADDING_TOP: 5pt;
@TAB_BORDER_THICKNESS: 0.5pt;
@TAB_INSERT_BORDER_THICKNESS: 1pt;
@TAB_BAR_BORDER_TOP_THICKNESS: 0.55pt;
@TAB_HEADER_HEIGHT: 45pt;

// context menu
@CONTEXT_MENU_Z_INDEX: 10001;
@CONTEXT_MENU_FONT_SIZE: 9pt;
@CONTEXT_MENU_VERTICAL_BORDER_WIDTH: 1px;
// @CONTEXT_MENU_VERTICAL_ITEM_PADDING: 10px 38px;
@CONTEXT_MENU_VERTICAL_ITEM_PADDING: 0 30px;
@CONTEXT_MENU_VERTICAL_ITEM_GROUP_PADDING: 0px;
@CONTEXT_MENU_VERTICAL_FIRST_ITEM_BORDER_TOP: 0px;
@CONTEXT_MENU_MORE_INDICATOR_HEIGHT: 15pt;
@CONTEXT_MENU_ITEM_HEIGHT: 25pt;

// default menu
@DEFAULT_MENU_ITEM_GROUP_LEFT: 100%;
@DEFAULT_MENU_ITEM_GROUP_TOP: -100%;
@DEFAULT_MENU_ITEM_GROUP_RIGHT: 100%;
@DEFAULT_MENU_ITEM_GROUP_MARGIN: 6px 20px;
@DEFAULT_MENU_ITEM_GROUP_BORDER_WIDTH: 1px;
@MENU_BADGE_PADDING_LEFT: 15pt;
@MENU_BADGE_PADDING_RIGHT: -5pt;

// wizard
@WIZARD_STEP_MENU_HEADER_HEIGHT: 150pt;
@WIZARD_STEP_MENU_FOOTER_HEIGHT: 50pt;
@WIZARD_STEP_HEIGHT: 30pt;
@WIZARD_STEP_LINE_HEIGHT: 30pt;

// calendar popover
@CALENDAR_ENTRY_POPOVER_WIDTH: 170pt;
@CALENDAR_ENTRY_POPOVER_HEIGHT: 250pt;
@CALENDAR_ENTRY_POPOVER_BORDER: 1px solid @CLR_BORDER_COLOR;
@CALENDAR_ENTRY_POPOVER_BOX_SHADOW: 0pt 2px 5px 0px rgba(185,189,190,1);
@CALENDAR_ENTRY_POPOVER_BG_HILIGHT_HEIGHT: 30pt;
@CALENDAR_ENTRY_POPOVER_PADDING_BG: 5pt;

// default calendar popover
@DEFAULT_CALENDAR_ENTRY_POPOVER_PADDING: 15pt;
@DEFAULT_CALENDAR_ENTRY_POPOVER_TITLE_FONT_WEIGHT: 500;
@DEFAULT_CALENDAR_ENTRY_POPOVER_TITLE_FONT_SIZE: 130%;
@DEFAULT_CALENDAR_ENTRY_POPOVER_DATETIME_FONT_SIZE: 90%;

// default list popover
@DEFAULT_CALENDAR_ENTRY_LIST_POPOVER_PADDING: 10pt;
@DEFAULT_CALENDAR_ENTRY_HEADER_HEIGHT: 40pt;
@DEFAULT_CALENDAR_ENTRY_BODY_HEIGHT: 170pt;

//default component popoverWidth
@DEFAULT_COMP_CALENDAR_POPOVER_DESC_PADDING_TOP: 10pt;
@DEFAULT_COMP_CALENDAR_POPOVER_HEADER_PADDING_BOTTOM: 6pt;

// component popover
@COMPONENT_POPOVER_WIDTH: 170pt;
@COMPONENT_POPOVER_HEIGHT: 120pt;
@COMPONENT_POPOVER_BORDER: 1px solid @CLR_BORDER_COLOR;
@COMPONENT_POPOVER_BOX_SHADOW: 0pt 0pt 8px 2px rgba(185,189,190,1);
@COMPONENT_POPOVER_PADDING_BG: 5pt;
@COMPONENT_POPOVER_BELOW_ARROW_TOP: @COMPONENT_POPOVER_HEIGHT - 2pt;

// text circle
@TEXT_CIRCLE_WIDTH: 20px;
@TEXT_CIRCLE_HEIGHT: 20px;
@TEXT_CIRCLE_RADIUS: 50%;
@TEXT_BORDER_WIDTH: 1px;

// exclamation sign
@EXCLAMATION_CIRCLE_WIDTH: 15px;
@EXCLAMATION_CIRCLE_HEIGHT: 15px;

// toast notification
@TOAST_NOTIFICATION_WIDTH: 210pt;
@TOAST_NOTIFICATION_ROW_HEIGHT: 60pt;
@TOAST_NOTIFICATION_ROW_CONTENT_LEFT_PADDING: 5pt;
@TOAST_NOTIFICATION_ROW_CONTENT_RIGHT_PADDING: @TOAST_NOTIFICATION_ROW_CONTENT_LEFT_PADDING;
@TOAST_NOTIFICATION_ROW_CONTENT_TOP_PADDING: @TOAST_NOTIFICATION_ROW_CONTENT_LEFT_PADDING;
@TOAST_NOTIFICATION_ROW_CONTENT_BOTTOM_PADDING: @TOAST_NOTIFICATION_ROW_CONTENT_LEFT_PADDING;
@TOAST_NOTIFICATION_ROW_PADDING_BOTTOM: 10pt;
@TOAST_NOTIFICATION_CELL_WIDTH_LEFT: 50pt;
@TOAST_NOTIFICATION_CELL_WIDTH_RIGHT: 15pt;
@TOAST_NOTIFICATION_CELL_WIDTH_CENTER: (@TOAST_NOTIFICATION_WIDTH - @TOAST_NOTIFICATION_ROW_CONTENT_LEFT_PADDING - @TOAST_NOTIFICATION_ROW_CONTENT_RIGHT_PADDING) - (@TOAST_NOTIFICATION_CELL_WIDTH_LEFT + @TOAST_NOTIFICATION_CELL_WIDTH_RIGHT);
@TOAST_NOTIFICATION_ICON_WIDTH: 35pt;
@TOAST_NOTIFICATION_ICON_HEIGHT: 35pt;
@TOAST_NOTIFICATION_ANIMATE_IN_TRANSITION: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
@TOAST_NOTIFICATION_ANIMATE_OUT_TRANSITION: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
@TOAST_NOTIFICATION_ANIMATE_CLOSE_TRANSITION: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
@TOAST_NOTIFICATION_ANIMATE_MOVEUP_TRANSITION: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
@TOAST_NOTIFICATION_ANIMATE_REMOVE_TRANSITION: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
@TOAST_NOTIFICATION_ANIMATE_SHOW_BODY_TRANSITION: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
@TOAST_NOTIFICATION_ANIMATE_SHOW_ACITON_BAR_TRANSITION: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
@TOAST_NOTIFICATION_ACTION_BUTTON_WIDTH: 100%;
@TOAST_NOTIFICATION_ACTION_BUTTON_HEIGHT: 15pt;
@TOAST_NOTIFICATION_ACTION_BUTTON_BORDER_RADIUS: 50px 50px;
@TOAST_NOTIFICATION_ACTION_BUTTON_BORDER_WIDTH: 1pt 1pt;
@TOAST_NOTIFICATION_ACTION_BUTTON_FONT_SIZE: 80%;
@TOAST_NOTIFICATION_CLOCK_WIDTH: 12px;
@TOAST_NOTIFICATION_CLOCK_HEIGHT: @TOAST_NOTIFICATION_CLOCK_WIDTH;
@TOAST_NOTIFICATION_ACTION_BAR_PADDING_TOP: 2pt;
@TOAST_NOTIFICATION_ACTION_BAR_HEIGHT: 20pt + @TOAST_NOTIFICATION_ACTION_BAR_PADDING_TOP;

// notification container
@NOTIFICATION_CONTAINER_Z_INDEX: 100;
@NOTIFICATION_CONTAINER_WIDTH: @TOAST_NOTIFICATION_WIDTH + 10pt;

/* Lang Selector */
@DATA_LANG_SELECTOR_PANE_WIDTH: 25pt;
@DATA_LANG_SELECTOR_BORDER_THICKNESS: 0.5pt;
@DATA_LANG_SELECTOR_BUTTON_BORDER_THICKNESS: 1pt;
@DATA_LANG_SELECTOR_BUTTON_WIDTH: @DATA_LANG_SELECTOR_PANE_WIDTH;
@DATA_LANG_SELECTOR_BUTTON_HEIGHT: 30pt;
@DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT: 80pt;
@DATA_LANG_SELECTOR_LEFT_PADDING: @DATA_LANG_SELECTOR_PANE_WIDTH - 0pt;

// component radio
@COMPONENT_RADIO_ITEM_MARGIN_RIGHT: -10pt;
@COMPONENT_RADIO_LABEL_PADDING_RIGHT: 15pt;

// simple radio
@SIMPLE_RADIO_WIDTH: 10pt;
@SIMPLE_RADIO_HEIGHT: @SIMPLE_RADIO_WIDTH;
@SIMPLE_RADIO_MARGIN_RIGHT: 8pt;
@SIMPLE_RADIO_BORDER_RADIUS: 8pt;
@SIMPLE_RADIO_POINT_SIZE: 10pt;
@SIMPLE_RADIO_POINT_LINE_HEIGHT: 8pt;
@SIMPLE_RADIO_BORDER_THICKNESS: 1pt;
@SIMPLE_RADIO_POINT_TOP_GOOGLE: 1pt;
@SIMPLE_RADIO_POINT_LEFT_FIREFOX: 0.5pt;
@SIMPLE_RADIO_FONT_SIZE: 20pt;

// checkbox
@CHECKBOX_WIDTH: 10pt;
@CHECKBOX_HEIGHT: @CHECKBOX_WIDTH;
@CHECKBOX_MARGIN_RIGHT: 8pt;
@CHECKBOX_BORDER_RADIUS: 2pt;
@CHECKBOX_POINT_SIZE: 9pt;
@CHECKBOX_LINE_HEIGHT: 8pt;
@CHECKBOX_BORDER_THICKNESS: 1pt;
@CHECKBOX_POINT_SIZE_GOOGLE: @CHECKBOX_POINT_SIZE - 3pt;
@CHECKBOX_POINT_TOP_GOOGLE: 1pt;

// connection status
@CONNECTION_STATUS_WIDTH: 20pt;
@CONNECTION_STATUS_HEIGHT: 20pt;
@CONNECTION_STATUS_PADDING_LEFT: 2.5pt;

// datetime-picker
@DATE_PICKER_BORDER_RADIUS: 5px;
@DATE_PICKER_LINE_HEIGHT: 2em;

// component accordion
@COMPONENT_ACCORDION_HEADER_HEIGHT: 40pt;
@COMPONENT_ACCORDION_HEADER_PADDING_TOP: 8pt;
@COMPONENT_ACCORDION_HEADER_BORDER_THICKNESS: 0.5pt;
@COMPONENT_ACCORDION_HEADER_PADDING_LEFT: 10pt;
@COMPONENT_ACCORDION_HEADER_PADDING_RIGHT: @COMPONENT_ACCORDION_HEADER_PADDING_LEFT;
@COMPONENT_ACCORDION_BODY_PADDING_LEFT: @COMPONENT_ACCORDION_HEADER_PADDING_LEFT;
@COMPONENT_ACCORDION_BODY_PADDING_RIGHT: @COMPONENT_ACCORDION_HEADER_PADDING_RIGHT;

// color dropdown
@COLOR_DROPDOWN_BOX_SIZE: 8pt;

// color swatch
@COLOR_SWATCH_BOX_SIZE: 8pt;
@COLOR_SWATCH_BOX_PADDTING_BOTTOM: @COLOR_SWATCH_BOX_SIZE - 1;
@COLOR_SWATCH_BOX_BORDER_THICKNESS: 0.5pt;

// phlox table
@EXPANDABLE_TABLE_ROW_ANIMATION_DURATION: @DEFAULT_TRANSITION_DURATION;
@EXPANDABLE_TABLE_ROW_ANIMATION_TIMING_FUNCTION: @DEFAULT_SIDE_NAV_TRANSITION_TIMING_FUNCTION;

// toggle switch
@TOGGLE_SWITCH_WIDTH: 33.88pt;
@TOGGLE_SWITCH_HEIGHT: 18.82pt;
@TOGGLE_SWITCH_AFTER_TOGGLE_LEFT: 15.06pt;

// simple ripple botton
@SIMPLE_RIPPLE_BTN_BORDER_THICKNESS: 0.25pt;

// signals-indicator
@SIGNAL_INDICATOR_WIDTH: 15pt;
@SIGNAL_INDICATOR_HEIGHT: 10pt;
@SIGNAL_INDICATOR_BAR_WIDTH: 2.3pt;
@SIGNAL_INDICATOR_BAR_SPACE: 0.8pt;
@SIGNAL_INDICATOR_BAR_RADIAN: @SIGNAL_INDICATOR_BAR_WIDTH / 2;
@SIGNAL_INDICATOR_FIRST_BAR_HEIGHT: @SIGNAL_INDICATOR_HEIGHT * 0.25;
@SIGNAL_INDICATOR_SECOND_BAR_HEIGHT: @SIGNAL_INDICATOR_HEIGHT * 0.50;
@SIGNAL_INDICATOR_THIRD_BAR_HEIGHT: @SIGNAL_INDICATOR_HEIGHT * 0.75;
@SIGNAL_INDICATOR_FOURTH_BAR_HEIGHT: @SIGNAL_INDICATOR_HEIGHT * 1;

// multiple state checkbox
@MULTIPLE_STATE_CHECKBOX: 8pt;

// hint shortcuts
@SC_SERVICE_HINT_SHADOW_HLEN: 0;
@SC_SERVICE_HINT_SHADOW_VLEN: 4;
@SC_SERVICE_HINT_SHADOW_BLUR: 2;
@SC_SERVICE_HINT_SHADOW_SPREAD: 0;
@SC_SERVICE_HINT_SHADOW_COLOR: extract(@CLR_0, 5);
@SC_SERVICE_HINT_SHADOW_OPACITY: 0.1;
@SC_SERVICE_HINT_SHADOW_RADIUS: 5px;
@SC_SERVICE_HINT_TEXT_PADDING: 4px 7px 5px 7px;
@SC_SERVICE_HINT_BRAND_BG: hsl(hue(@SC_SERVICE_HINT_SHADOW_COLOR), 13%, 85%);

// Action button
@ACTION_BUTTON_FOCUS_BORDER_THICKNESS: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS;
@ACTION_BUTTON_MORE_PADDING: 10pt;

// Scroll Styles
@SCROLL_WIDTH_HEIGHT: 6px;

// Scroll Load
@SCROLL_LOAD_BORDER_BOTTOM: 0.7px solid extract(@CLR_1, 7);
@SCROLL_LOAD_MAIN_COLOR: #EB3349;
@SCROLL_LOAD_FONT_COLOR: extract(@CLR_1, 1);
@SCROLL_LOAD_WHITE_COLOR: extract(@CLR_1, 9);
@SCROLL_LOAD_ROTATE_Z: rotateZ(180deg);
@SCROLL_LOAD_ROTATE: rotateZ(360deg);

//