UNPKG

com.phloxui

Version:

PhloxUI Ng2+ Framework

131 lines (130 loc) • 7.05 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
@import "defaults"; /* === COMMONS === */ @MATERIAL_FIXED_FONT: @CLR_FIXED_FONT; @MATERIAL_BORDER_COLOR: @CLR_BORDER_COLOR; @MATERIAL_DISABLED_FONT: @CLR_DISABLED_FONT; @MATERIAL_DISABLED_BG_COLOR: rgba(red(extract(@CLR_1, 4)), green(extract(@CLR_1, 4)), blue(extract(@CLR_1, 4)), 0.38); @MATERIAL_BORDER_COLOR_FOCUS: extract(@CLR_0, 1); @MATERIAL_BORDER_COLOR_SUCCESS: @BORDER_COLOR_SUCCESS; @MATERIAL_BORDER_COLOR_WARNING: @BORDER_COLOR_WARNING; @MATERIAL_BORDER_COLOR_ERROR: @BORDER_COLOR_ERROR; @MATERIAL_POPUP_SHADOW_H: 0; @MATERIAL_POPUP_SHADOW_V: 3px; @MATERIAL_POPUP_SHADOW_BLUR: 5px; @MATERIAL_POPUP_SHADOW_SPREAD: 0; @MATERIAL_POPUP_SHADOW_COLOR: rgba(red(extract(@CLR_0, 3)), green(extract(@CLR_0, 3)), blue(extract(@CLR_0, 3)), 0.2); @MATERIAL_CONTEXT_MENU_FONT_SIZE: @CONTEXT_MENU_FONT_SIZE; /* Form Controls */ @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH: 1px; @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS: 2px; @MATERIAL_FORM_CONTROL_TEXT_ICON_SIZE: @font-size-base * 1.27; @MATERIAL_FORM_CONTROL_FONT_COLOR: extract(@CLR_1, 1); @MATERIAL_FORM_CONTROL_FONT_COLOR_NORMAL: @FORM_CONTROL_FONT_COLOR_NORMAL; @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS: @FORM_CONTROL_FONT_COLOR_SUCCESS; @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING: @FORM_CONTROL_FONT_COLOR_WARNING; @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR: @FORM_CONTROL_FONT_COLOR_ERROR; @MATERIAL_FORM_CONTROL_FONT_COLOR_HELP: @MATERIAL_FIXED_FONT; @MATERIAL_FORM_CONTROL_POPUP_BG_COLOR: extract(@CLR_1, 9); /* === COMMONS === */ /* Bar Loader */ @MATERIAL_BAR_LOADER_COLOR: @CLR_BRAND; @MATERIAL_BAR_LOADER_COLOR_DISBLE: extract(@CLR_1, 8); @MATERIAL_BAR_LOADER_POINT_WIDTH: 3pt; @MATERIAL_BAR_LOADER_POINT_COLOR: @CLR_BRAND_FONT; /* Lang Selector */ @MATERIAL_DATA_LANG_SELECTOR_PANE_WIDTH: @DATA_LANG_SELECTOR_PANE_WIDTH; @MATERIAL_DATA_LANG_SELECTOR_LEFT_PADDING: @DATA_LANG_SELECTOR_PANE_WIDTH - 0pt; @MATERIAL_DATA_LANG_SELECTOR_BORDER_THICKNESS: @DATA_LANG_SELECTOR_BORDER_THICKNESS; @MATERIAL_DATA_LANG_SELECTOR_BUTTON_BORDER_THICKNESS: @DATA_LANG_SELECTOR_BUTTON_BORDER_THICKNESS; @MATERIAL_DATA_LANG_SELECTOR_BUTTON_WIDTH: @DATA_LANG_SELECTOR_PANE_WIDTH; @MATERIAL_DATA_LANG_SELECTOR_BUTTON_HEIGHT: @DATA_LANG_SELECTOR_BUTTON_HEIGHT; @MATERIAL_DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT: @DATA_LANG_SELECTOR_DEFAULT_BUTTON_HEIGHT; /* Time Picker */ @MATERIAL_TIME_PICKER_ICON_PADDING: 6pt; @MATERIAL_TIME_PICKER_ICON_SIZE: @MATERIAL_FORM_CONTROL_TEXT_ICON_SIZE; @MATERIAL_TIME_PICKER_ICON_FONT_FAMILY: "Glyphicons Halflings"; // ! We should edit this to use PhloxGlyphicons @MATERIAL_TIME_PICKER_ICON: "\e023"; @MATERIAL_TIME_PICKER_TEXT_ALIGN: left; @MATERIAL_TIME_PICKER_DESC_PADDING: 2pt; @MATERIAL_TIME_PICKER_HELP_PADDING: 0pt; @MATERIAL_TIME_PICKER_POPUP_BG_COLOR: @MATERIAL_FORM_CONTROL_POPUP_BG_COLOR; @MATERIAL_TIME_PICKER_POPUP_PADDING_V: 5pt; @MATERIAL_TIME_PICKER_POPUP_PADDING_H: 10pt; @MATERIAL_TIME_PICKER_POPUP_COL_PADDING: 1px; @MATERIAL_TIME_PICKER_ARROW_ICON_FONT_FAMILY: "PhloxGlyphicons"; @MATERIAL_TIME_PICKER_ARROW_ICON_UP: "A"; @MATERIAL_TIME_PICKER_ARROW_ICON_DOWN: "k"; @MATERIAL_TIME_PICKER_NUMBER_BORDER_RADIUS: 5px; @MATERIAL_TIME_PICKER_NUMBER_MIN_WIDTH: 25pt; @MATERIAL_TIME_PICKER_NUMBER_PADDING_V: 3pt; @MATERIAL_TIME_PICKER_NUMBER_COLOR: extract(@CLR_0, 1); @MATERIAL_TIME_PICKER_NUMBER_SELECTED_BG_COLOR: @CLR_BRAND; @MATERIAL_TIME_PICKER_NUMBER_SELECTED_COLOR: @CLR_BRAND_FONT; @MATERIAL_TIME_PICKER_TOP_MARGIN: 5pt + @FONT_SIZE_L0; // Used for positioning the line to match other component having label like material-text-box etc. /* Text Box */ @MATERIAL_TEXT_BOX_LABEL_FONT_SIZE_ACTIVE: @FONT_SIZE_L0; @MATERIAL_TEXT_BOX_LABEL_PADDING_BOTTOM: 0pt; @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN: 5pt; @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN_ACTIVE: -(@MATERIAL_TEXT_BOX_LABEL_FONT_SIZE_ACTIVE + @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN + @MATERIAL_TEXT_BOX_LABEL_PADDING_BOTTOM); @MATERIAL_TEXT_BOX_LABEL_COLOR: @MATERIAL_FIXED_FONT; @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE: extract(@CLR_1, 1); @MATERIAL_TEXT_BOX_DESC_PADDING: 2pt; @MATERIAL_TEXT_BOX_HELP_PADDING: 0pt; /* Text Area */ @MATERIAL_TEXT_AREA_LABEL_FONT_SIZE_ACTIVE: @FONT_SIZE_L0; @MATERIAL_TEXT_AREA_LABEL_PADDING_BOTTOM: 0pt; @MATERIAL_TEXT_AREA_LABEL_TOP_MARGIN: 5pt; @MATERIAL_TEXT_AREA_LABEL_TOP_MARGIN_ACTIVE: -(@MATERIAL_TEXT_BOX_LABEL_FONT_SIZE_ACTIVE + @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN + @MATERIAL_TEXT_BOX_LABEL_PADDING_BOTTOM); @MATERIAL_TEXT_AREA_LABEL_COLOR: @MATERIAL_FIXED_FONT; @MATERIAL_TEXT_AREA_LABEL_COLOR_ACTIVE: extract(@CLR_1, 1); @MATERIAL_TEXT_AREA_DESC_PADDING: 2pt; @MATERIAL_TEXT_AREA_HELP_PADDING: 0pt; @MATERIAL_TEXT_AREA_TEXT_BOX_PADDING_TOP: 5pt; /* Simple Dropdown */ @MATERIAL_DROPDOWN_LABEL_PADDING_BOTTOM: 0pt; @MATERIAL_DROPDOWN_LABEL_TOP_MARGIN: 5pt + @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS; @MATERIAL_DROPDOWN_LABEL_TOP_MARGIN_ACTIVE: -(@MATERIAL_TEXT_BOX_LABEL_FONT_SIZE_ACTIVE + @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN + @MATERIAL_TEXT_BOX_LABEL_PADDING_BOTTOM); @MATERIAL_DROPDOWN_LABEL_COLOR: @MATERIAL_FIXED_FONT; @MATERIAL_DROPDOWN_DESC_PADDING: 2pt; @MATERIAL_DROPDOWN_HELP_PADDING: 0pt; @MATERIAL_DROPDOWN_FOCUS_BORDER_THICKNESS: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS; @MATERIAL_DROPDOWN_ITEM_PADDING_V: @DEFAULT_MATERIAL_DROPDOWN_PADDING; @MATERIAL_DROPDOWN_ITEM_PADDING_H: 10pt; @MATERIAL_DROPDOWN_POPUP_TRANSITION: @PHLOX_DROPDOWN_POPUP_TRANSITION; @MATERIAL_DROPDOWN_ALPHA: 0.1; /* TelNo Text Box */ @MATERIAL_TELNO_TEXT_BOX_HEIGHT: 26.25pt; @MATERIAL_TELNO_TEXT_BOX_MARGIN_TOP: -@MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN_ACTIVE; @MATERIAL_TELNO_TEXT_BOX_LABEL_COLOR: @CLR_FIXED_FONT; @MATERIAL_TELNO_TEXT_BOX_LABEL_PADDING_TOP: 10pt; @MATERIAL_TELNO_TEXT_BOX_EXT_LABEL_COLOR: extract(@CLR_1, 1); @MATERIAL_TELNO_TEXT_BOX_PADDING_H: 7pt; @MATERIAL_TELNO_TEXT_BOX_UNDERLINE_TOP: 27.5pt; @MATERIAL_TELNO_TEXT_BOX_DESC_PADDING: 2pt; /* Date Picker */ @MATERIAL_DATE_PICKER_POPUP_MARGIN_LEFT: 20pt; @MATERIAL_DATE_PICKER_POPUP_MARGIN_TOP: -6px; @MATERIAL_DATE_PICKER_POPUP_PADDING: 12pt; @MATERIAL_DATE_PICKER_TOP_MARGIN: 5pt + @FONT_SIZE_L0; // Used for positioning the line to match other component having label like material-text-box etc. @MATERIAL_DATE_PICKER_ICON_PADDING: 6pt; @MATERIAL_DATE_PICKER_ICON_SIZE: @MATERIAL_FORM_CONTROL_TEXT_ICON_SIZE; @MATERIAL_DATE_PICKER_ICON_FONT_FAMILY: "PhloxGlyphicons"; @MATERIAL_DATE_PICKER_ICON: "d"; @MATERIAL_DATE_PICKER_TEXT_ALIGN: center; @MATERIAL_DATE_PICKER_DESC_PADDING: 2pt; @MATERIAL_DATE_PICKER_HELP_PADDING: 0pt; @MATERIAL_DATE_PICKER_POPUP_BG_COLOR: @MATERIAL_FORM_CONTROL_POPUP_BG_COLOR; @MATERIAL_DATE_PICKER_ARROW_PADDING_TOP: 4pt; @MATERIAL_DATE_PICKER_ARROW_ICON_FONT_FAMILY: "PhloxGlyphicons"; @MATERIAL_DATE_PICKER_ARROW_ICON_LEFT: "B"; @MATERIAL_DATE_PICKER_ARROW_ICON_RIGHT: "C"; /* Material Ripple Alpha*/ @MATERIAL_RIPPLE_ALPHA: 0.3; /*Material Checkbox**/ @MATERIAL_CHECKBOX_ALPHA: 0.2; /* Material Switch Alpha*/ @MATERIAL_SWITCH_ALPHA: 0.1; /* Material Search Multi Dropdown */ @MATERIAL_SEARCH_MULTI_DROPDOWN_MIN_WIDTH: 220pt; /* Material Slider */ @MATERIAL_SLIDER_POINT_BORDER_ALPHA: 0;