-
Notifications
You must be signed in to change notification settings - Fork 279
Expand file tree
/
Copy pathsizes-parameters.css
More file actions
370 lines (315 loc) · 13.9 KB
/
sizes-parameters.css
File metadata and controls
370 lines (315 loc) · 13.9 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
:host {
/* Calendar */
--_ui5_calendar_height: 24.5rem;
--_ui5_calendar_width: 20rem;
--_ui5_calendar_left_right_padding: 0.5rem;
--_ui5_calendar_top_bottom_padding: 1rem;
--_ui5_calendar_header_height: 3rem;
--_ui5_calendar_header_arrow_button_width: 2.5rem;
--_ui5_calendar_header_padding: 0.25rem 0;
--_ui5_checkbox_root_side_padding: .6875rem;
--_ui5_checkbox_icon_size: 1rem;
--_ui5_checkbox_partially_icon_size: .75rem;
--_ui5_custom_list_item_rb_min_width: 2.75rem;
--_ui5_day_picker_item_width: 2.25rem;
--_ui5_day_picker_item_height: 2.875rem;
--_ui5_day_picker_empty_height: 3rem;
--_ui5_day_picker_item_justify_content: space-between;
--_ui5_dp_item_withsecondtype_font_size: var(--sapFontSize);
--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 2rem;
--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.4375rem;
--_ui5_dp_two_calendar_item_secondary_text_height: 1rem;
--_ui5_dp_two_calendar_item_text_padding_top: 0.4375rem;
--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.5rem;
--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.5rem;
--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 0.5rem;
--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: 0;
--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
/* CalendarLegend */
--_ui5-calendar-legend-item-root-focus-offset: -0.125rem;
/* Calendar Legend Item */
--_ui5-calendar-legend-item-box-margin: 0.25rem;
--_ui5-calendar-legend-item-box-inner-margin: 0.5rem;
/* ColorPicker */
--_ui5_color_picker_slider_progress_container_height: 1.625rem;
--_ui5_color_picker_slider_container_margin_top: -0.5rem;
--_ui5_color_picker_slider_handle_height: 2rem;
--_ui5_color_picker_slider_handle_width: 1.0625rem;
--_ui5_color_picker_slider_handle_after_height: 1.75rem;
--_ui5_color_picker_slider_handle_focus_height: 2.125rem;
--_ui5_color_picker_colors_wrapper_height: 2.25rem;
--_ui5_color_picker_sliders_height: 3rem;
--_ui5_color_picker_main_color_margin_bottom: 1rem;
--_ui5_color_picker_slider_spacing: 0.9375rem;
--_ui5_color_channel_toggle_button_width: 1.625rem;
--_ui5_color_channel_toggle_button_margin-top: -0.75rem;
--_ui5_color_channel_hex_input_width: 4.8125rem;
--_ui5-color_channel_margin_top: 0.25rem;
/* ColorPalette */
--_ui5_color-palette-item-height: 1.75rem;
--_ui5_color-palette-item-hover-height: 2.375rem;
--_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
--_ui5_color-palette-row-width: 12rem;
--_ui5_color-palette-swatch-container-padding: 0.3125rem 0.6875rem;
/* DateTimePicker */
--_ui5_datetime_picker_width: 40.0625rem;
--_ui5_datetime_picker_height: 25rem;
--_ui5_datetime_timeview_width: 17rem;
--_ui5_datetime_timeview_phonemode_width: 19.5rem;
--_ui5_datetime_timeview_phonemode_clocks_width: 24.5rem;
--_ui5_datetime_dateview_phonemode_margin_bottom: 0;
/* Popup */
--_ui5_popup_footer_height: 2.75rem;
/* Dialog */
--_ui5_dialog_content_min_height: 2.75rem;
--_ui5_input_inner_padding: 0 0.625rem;
--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
--_ui5_input_inner_space_to_tokenizer: 0.125rem;
--_ui5_input_inner_space_to_n_more_text: 0.3125rem;
--_ui5_input_inner_with_tokenizer_padding_inline_end: 0.3125rem;
--_ui5_list_no_data_height: 3rem;
--_ui5_list_item_cb_margin_right: 0;
--_ui5_list_item_title_size: var(--sapFontLargeSize);
--_ui5_list_no_data_font_size: var(--sapFontLargeSize);
--_ui5_list_item_img_size: 3rem;
--_ui5_list_item_img_top_margin: 0.5rem;
--_ui5_list_item_img_bottom_margin: 0.5rem;
--_ui5_list_item_img_hn_margin: 0.75rem;
--_ui5_list_item_dropdown_base_height: 2.5rem;
--_ui5_list_item_base_height: var(--sapElement_LineHeight);
--_ui5_list_item_base_padding: 0 1rem;
--_ui5_list_item_icon_size: 1.125rem;
--_ui5_list_item_icon_padding-inline-end: 0.75rem;
--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
--_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2);
--_ui5_group_header_list_item_height: 2.75rem;
--_ui5_month_picker_item_height: 3rem;
--_ui5_list_buttons_left_space: 0.125rem;
/* Form */
--_ui5_form_item_min_height: 2.813rem;
--_ui5_form_item_padding: 0.65rem;
--_ui5-form-group-heading-height: 2.75rem;
/* Popup subclasses */
--_ui5_popup_default_header_height: 2.75rem;
--_ui5_year_picker_item_height: 3rem;
--_ui5_tokenizer_padding: 0.3125rem;
--_ui5_token_height: 1.625rem;
--_ui5_token_icon_size: .75rem;
--_ui5_token_icon_padding: 0.25rem 0.5rem;
/*switch*/
--_ui5_tc_item_text: 3rem;
--_ui5_tc_item_height: 4.75rem;
--_ui5_tc_item_text_only_height: 2.75rem;
--_ui5_tc_item_text_only_with_additional_text_height: 3.75rem;
--_ui5_tc_item_text_line_height: 1.325rem;
--_ui5_tc_item_icon_circle_size: 2.75rem;
--_ui5_tc_item_icon_size: 1.25rem;
--_ui5_tc_item_add_text_margin_top: 0.375rem;
/* TextArea */
--_ui5_textarea_margin: .25rem 0;
/* Radio Button */
--_ui5_radio_button_height: 2.75rem;
--_ui5_radio_button_label_side_padding: .875rem;
--_ui5_radio_button_inner_size: 2.75rem;
--_ui5_radio_button_svg_size: 1.375rem;
/* Responsive Popover */
--_ui5-responsive_popover_header_height: 2.75rem;
/* Tree */
--_ui5-tree-indent-step: 1.5rem;
--_ui5-tree-toggle-box-width: 2.75rem;
--_ui5-tree-toggle-box-height: 2.25rem;
--_ui5-tree-toggle-icon-size: 1.0625rem;
/* SplitButton */
--_ui5_split_button_middle_separator_top: -0.0625rem;
--_ui5_split_button_middle_separator_height: 2.25rem;
/* Toolbar */
--_ui5-toolbar-separator-height: 2rem;
--_ui5-toolbar-height: 2.75rem;
--_ui5_toolbar_overflow_padding: 0.25rem 0.5rem;
/* DynamicPageTitle */
--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
/* ShellBar */
--_ui5-shellbar-separator-height: 2rem;
--___ui5-test-cozy-only: red;
--___ui5-test-both: red;
}
@container style(--ui5_content_density: compact) {
:host {
--___ui5-test-both: blue;
--___ui5-test-compact-only: blue;
--_ui5_bar_base_height: 2.5rem;
--_ui5_bar_subheader_height: 2.25rem;
--_ui5_button_base_height: var(--sapElement_Compact_Height);
--_ui5_button_base_padding: 0.4375rem;
--_ui5_button_base_min_width: 2rem;
--_ui5-button-badge-diameter: 0.625rem;
/* Calendar */
--_ui5_calendar_height: 18rem;
--_ui5_calendar_width: 17.75rem;
--_ui5_calendar_left_right_padding: 0.25rem;
--_ui5_calendar_top_bottom_padding: 0.5rem;
--_ui5_calendar_header_height: 2rem;
--_ui5_calendar_header_arrow_button_width: 2rem;
--_ui5_calendar_header_padding: 0;
/* Calendar Legend */
--_ui5-calendar-legend-root-padding: 0.5rem;
--_ui5-calendar-legend-root-width: 16.75rem;
/* CheckBox */
--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
--_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height);
--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
--_ui5_checkbox_wrapped_focus_inset_block: var(--_ui5_checkbox_focus_position);
--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
--_ui5_checkbox_icon_size: .75rem;
--_ui5_checkbox_partially_icon_size: .5rem;
/* ColorPicker */
--_ui5_color_picker_slider_progress_container_height: 1.125rem;
--_ui5_color_picker_slider_container_margin_top: -0.375rem;
--_ui5_color_picker_slider_handle_height: 1.5rem;
--_ui5_color_picker_slider_handle_width: 0.9375rem;
--_ui5_color_picker_slider_handle_after_height: 1.25rem;
--_ui5_color_picker_slider_handle_focus_height: 1.625rem;
--_ui5_color_picker_colors_wrapper_height: 1.5rem;
--_ui5_color_picker_sliders_height: 2.25rem;
--_ui5_color_picker_main_color_margin_bottom: 0.75rem;
--_ui5_color_picker_slider_spacing: 0.8125rem;
--_ui5_color_channel_toggle_button_width: 1.375rem;
--_ui5_color_channel_toggle_button_margin-top: -0.9375rem;
--_ui5_color_channel_hex_input_width: 4.625rem;
--_ui5-color_channel_margin_top: 0rem;
/* ColorPalette */
--_ui5_color-palette-item-height: 1.25rem;
--_ui5_color-palette-item-hover-height: 1.625rem;
--_ui5_color-palette-item-margin: calc((var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height)) / 2);
--_ui5_color-palette-row-width: 8.125rem;
--_ui5_color-palette-swatch-container-padding: 0.1875rem 0.8125rem;
--_ui5_color-palette-item-hover-margin: 0;
--_ui5_color-palette-row-height: 7.5rem;
--_ui5_color-palette-button-height: 2rem;
/* Custom List Item */
--_ui5_custom_list_item_rb_min_width: 2rem;
/* DayPicker */
--_ui5_daypicker_weeknumbers_container_padding_top: 2rem;
--_ui5_day_picker_item_width: 2rem;
--_ui5_day_picker_item_height: 2rem;
--_ui5_day_picker_empty_height: 2.125rem;
--_ui5_day_picker_item_justify_content: flex-end;
--_ui5_dp_item_withsecondtype_font_size: var(--sapFontSmallSize);
--_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
--_ui5_dp_two_calendar_item_text_padding_top: 0.5rem;
--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
--_ui5_daypicker_specialday_focused_top: 1.5rem;
--_ui5_daypicker_special_day_top: 1.625rem;
--_ui5_daypicker_item_now_specialday_top: 1.5rem;
--_ui5_daypicker_twocalendar_item_special_day_top: 1.25rem;
--_ui5_daypicker_twocalendar_item_special_day_right: 1.25rem;
--_ui5_daypicker_two_calendar_item_margin_bottom: 0;
--_ui5_dp_two_calendar_item_secondary_text_padding_block: 0 0.625rem;
--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 1.125rem;
--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.125rem;
--_ui5_dp_two_calendar_item_secondary_text_padding: 0 0.375rem;
--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 1rem;
--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: -0.25rem;
--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
/* DateTimePicker */
--_ui5_datetime_picker_height: 20.5rem;
--_ui5_datetime_picker_width: 35.5rem;
--_ui5_datetime_timeview_width: 17rem;
--_ui5_datetime_timeview_phonemode_width: 18.5rem;
--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
/* Popup */
--_ui5_popup_footer_height: 2.5rem;
/* Dialog */
--_ui5_dialog_content_min_height: 2.5rem;
/* Form */
--_ui5_form_item_min_height: 2rem;
--_ui5_form_item_padding: 0.25rem;
--_ui5-form-group-heading-height: 2rem;
/* Input */
--_ui5_input_height: var(--sapElement_Compact_Height);
--_ui5_input_inner_padding: 0 0.5rem;
--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.5rem;
--_ui5_input_inner_space_to_tokenizer: 0.125rem;
--_ui5_input_inner_space_to_n_more_text: 0.25rem;
--_ui5_input_inner_with_tokenizer_padding_inline_end: 0.25rem;
--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
--_ui5_input_min_width_tokenizer_available: 2rem;
/* Menu */
--_ui5_menu_item_padding: 0 0.75rem 0 0.5rem;
--_ui5_menu_item_submenu_icon_right: 0.75rem;
/* Popup subclasses */
--_ui5_popup_default_header_height: 2.5rem;
/* TextArea */
--_ui5_textarea_margin: .1875rem 0;
/* List */
--_ui5_list_no_data_height: 2rem;
--_ui5_list_item_cb_margin_right: .5rem;
--_ui5_list_item_title_size: var(--sapFontSize);
--_ui5_list_item_img_top_margin: 0.55rem;
--_ui5_list_no_data_font_size: var(--sapFontSize);
--_ui5_list_item_dropdown_base_height: 2rem;
--_ui5_list_item_base_height: 2rem;
--_ui5_list_item_base_padding: 0 1rem;
--_ui5_list_item_icon_size: 1rem;
--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
--_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2);
--_ui5_list_buttons_left_space: 0.125rem;
--_ui5_month_picker_item_height: 2rem;
--_ui5_year_picker_item_height: 2rem;
--_ui5_panel_header_height: 2rem;
--_ui5_panel_button_root_height: 2rem;
--_ui5_panel_button_root_width: 2.75rem;
--_ui5_token_height: 1.25rem;
--_ui5_token_right_margin: 0.25rem;
--_ui5_token_left_padding: 0.25rem;
--_ui5_token_readonly_padding: 0.125rem 0.25rem;
--_ui5_token_focus_offset: -0.125rem;
--_ui5_token_icon_size: .75rem;
--_ui5_token_icon_padding: 0.375rem 0.375rem;
--_ui5_token_outline_offset: -0.125rem;
--_ui5_tc_item_text: 2rem;
--_ui5_tc_item_text_line_height: 1.325rem;
--_ui5_tc_item_icon_size: 1rem;
--_ui5_tc_item_add_text_margin_top: 0.3125rem;
--_ui5_tc_item_height: 4rem;
--_ui5_tc_header_height: var(--_ui5_tc_item_height);
--_ui5_tc_item_icon_circle_size: 2rem;
--_ui5_tc_item_icon_size: 1rem;
/* Radio Button */
--_ui5_radio_button_height: 2rem;
--_ui5_radio_button_label_side_padding: .5rem;
--_ui5_radio_button_inner_size: 2rem;
--_ui5_radio_button_svg_size: 1rem;
/* Responsive Popover */
--_ui5-responsive_popover_header_height: 2.5rem;
/* Slider */
--_ui5_slider_handle_width: 1.5rem;
--_ui5_slider_tooltip_height: 1rem;
--_ui5_slider_tooltip_padding: 0.25rem;
/* --_ui5_slider_tooltip_bottom: 1.875rem; */
--_ui5_slider_progress_outline_offset: -0.625rem;
--_ui5_slider_outer_height: 1.3125rem;
/* SplitButton */
--_ui5_split_button_middle_separator_height: 1.625rem;
/* StepInput */
--_ui5_step_input_min_width: 6rem;
--_ui5_step_input_padding: 2rem;
/* Tree */
--_ui5-tree-indent-step: 0.5rem;
--_ui5-tree-toggle-box-width: 2rem;
--_ui5-tree-toggle-box-height: 1.5rem;
--_ui5-tree-toggle-icon-size: 0.8125rem;
/* Tokenizer */
--_ui5_tokenizer_padding: 0.25rem;
/* Toolbar */
--_ui5-toolbar-separator-height: 1.5rem;
--_ui5-toolbar-height: 2rem;
--_ui5_toolbar_overflow_padding: 0.1875rem 0.375rem;
/* DynamicPageTitle */
--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
/* ShellBar */
--_ui5-shellbar-separator-height: 2rem;
}
}