diff --git a/README.md b/README.md index 12d93615adca..2a596d4a296f 100644 --- a/README.md +++ b/README.md @@ -127,14 +127,13 @@ UI5 Web Components support right-to-left text direction (RTL). To enable RTL glo ``` ### Configure Compact/Cozy setting -UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag: +UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact```, provide the css class ```ui5-content-density-compact``` to any of your HTML elements and it apply compact size to all of its children. ```html - + + + + ``` ### Configure Calendar Type diff --git a/docs/Configuration.md b/docs/Configuration.md index cc7988449b8e..ff32ac3f5692 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -10,12 +10,15 @@ There are several configuration settings that affect all UI5 Web Components glob [theme](#theme) | sap_fiori_3, sap_fiori_3_dark, sap_belize, sap_belize_hcb | sap_fiori_3 | Visual theme language | en, de, es, etc... | en | Language to be used for translatable texts [RTL](#rtl) | true, false | false | When true, sets global text direction to right-to-left -compactSize | true, false | false | When set, enforces compact density (smaller margins/paddings) [animationMode](#animationMode) | full, basic, minimal, none | full | Defines different animation scenarios or levels calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components [noConflict](#noConflict) | true, false | Object | false | When set to true, all events will be fired with a "ui5-" prefix only [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below | Empty object | Allows to override locale-specific configuration +### Content Density + +UI5 Web Components contains different content densities for certain controls that allow your app to adapt to the device in question, allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. Cosy size is the default density for all components. Compact Size could be set by adding a class `ui5-content-density-compact` to an html element. It cascades all the way down and enforces compact density (smaller margins/paddings, smaller touch areas, etc). + ### Theme The `theme` setting values above are the technical names of our themes. @@ -92,7 +95,6 @@ In order to provide configuration settings, include the following ``` diff --git a/packages/fiori/test/pages/ProductSwitch.html b/packages/fiori/test/pages/ProductSwitch.html index 128fec9351d7..57dadbd7c165 100644 --- a/packages/fiori/test/pages/ProductSwitch.html +++ b/packages/fiori/test/pages/ProductSwitch.html @@ -10,7 +10,6 @@ diff --git a/packages/fiori/test/pages/ProductSwitchItem.html b/packages/fiori/test/pages/ProductSwitchItem.html index b1e49094c128..8cfa6699fa23 100644 --- a/packages/fiori/test/pages/ProductSwitchItem.html +++ b/packages/fiori/test/pages/ProductSwitchItem.html @@ -10,7 +10,6 @@ diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html index fc2e5c944997..d4e88cd015a1 100644 --- a/packages/fiori/test/pages/ShellBar.html +++ b/packages/fiori/test/pages/ShellBar.html @@ -9,7 +9,6 @@ diff --git a/packages/main/bundle.es5.js b/packages/main/bundle.es5.js index d00a70a84af4..0ce8e2d288e4 100644 --- a/packages/main/bundle.es5.js +++ b/packages/main/bundle.es5.js @@ -6,7 +6,6 @@ import "./bundle.esm.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js"; -import { getCompactSize, setCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js" const configuration = { @@ -14,8 +13,6 @@ const configuration = { getTheme, setTheme, setNoConflict, - getCompactSize, - setCompactSize, getRTL, }; export { diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index f3a4dfc5872b..ae5be1d7db48 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -68,7 +68,6 @@ window.isIE = isIE; // attached to the window object for testing purposes import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js"; -import { getCompactSize, setCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js" window["sap-ui-webcomponents-bundle"] = { @@ -77,8 +76,6 @@ window["sap-ui-webcomponents-bundle"] = { getTheme, setTheme, setNoConflict, - getCompactSize, - setCompactSize, getRTL, }, getIconNames, diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js index 83bef6818e05..ab7f54b2cf44 100644 --- a/packages/main/src/RadioButton.js +++ b/packages/main/src/RadioButton.js @@ -163,7 +163,6 @@ const metadata = { */ select: {}, }, - invalidateOnContentDensityChange: true, }; /** diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index 0f2489adc876..b0992e3a6adf 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -33,19 +33,6 @@ margin-left: 0; } -:host([data-ui5-compact-size]) .ui5-button-icon { - font-size: 1rem; -} - -:host([data-ui5-compact-size]) { - height: var(--_ui5_button_compact_height); - min-width: var(--_ui5_button_base_min_compact_width); -} - -:host([data-ui5-compact-size]) .ui5-button-root { - padding: 0 var(--_ui5_button_compact_padding); -} - .ui5-button-root { min-width: inherit; cursor: inherit; @@ -70,7 +57,7 @@ } .ui5-button-icon { - font-size: var(--_ui5_button_base_icon_only_font_size); + font-size: var(--_ui5_button_icon_font_size); height: 0; top: -.5rem; position: relative; diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css index c934faf49958..e3c0df2d1ec9 100644 --- a/packages/main/src/themes/CalendarHeader.css +++ b/packages/main/src/themes/CalendarHeader.css @@ -5,8 +5,8 @@ .ui5-calheader-root { display: flex; - height: 3rem; - padding: 0.25rem 0; + height: var(--_ui5_calendar_header_height); + padding: var(--_ui5_calendar_header_padding); box-sizing: border-box; } @@ -18,7 +18,7 @@ display: flex; justify-content: center; align-items: center; - width: 2.5rem; + width: var(--_ui5_calendar_header_arrow_button_width); background-color: var(--sapButton_Lite_Background); color: var(--sapButton_TextColor); cursor: pointer; @@ -96,15 +96,6 @@ border-color: var(--sapContent_ContrastFocusColor); } -:host([data-ui5-compact-size]) .ui5-calheader-root { - height: 2rem; - padding: 0; -} - -:host([data-ui5-compact-size]) .ui5-calheader-arrowbtn { - width: 2rem; -} - [dir=rtl] .ui5-calheader-root-midcontainer .ui5-calheader-middlebtn:first-child { margin-left: 0.5rem; margin-right: 0; diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index 6647862f4a4f..67af05c5ce85 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -24,10 +24,10 @@ /* wrap */ :host([wrap][text]) .ui5-checkbox-root { min-height: auto; - padding-top: .6875rem; box-sizing: border-box; - padding-bottom: .6875rem; align-items: flex-start; + padding-top: var(--_ui5_checkbox_root_side_padding); + padding-bottom: var(--_ui5_checkbox_root_side_padding); } :host([wrap][text]) .ui5-checkbox-root .ui5-checkbox-inner, @@ -151,57 +151,9 @@ https://github.com/philipwalton/flexbugs/issues/231 -webkit-user-select: none; } -/* Compact */ -:host([text][data-ui5-compact-size]) .ui5-checkbox-root { - padding-right: 0; -} -:host([text][data-ui5-compact-size]) .ui5-checkbox-root:focus::before { - right: 0; -} - -:host([wrap][text][data-ui5-compact-size]) .ui5-checkbox-root { - min-height: auto; - padding-top: var(--_ui5_checkbox_wrapped_focus_padding); - padding-bottom: var(--_ui5_checkbox_wrapped_focus_padding); -} - -:host([wrap][text][data-ui5-compact-size]) .ui5-checkbox-root .ui5-checkbox-label { - margin-top: var(--_ui5_checkbox_compact_wrapped_label_margin_top); -} - -:host([wrap][data-ui5-compact-size]) .ui5-checkbox-root:focus::before { - bottom: var(--_ui5_checkbox_compact_focus_position); -} - -:host([data-ui5-compact-size]) .ui5-checkbox-root { - min-height: var(--_ui5_checkbox_compact_width_height); - min-width: var(--_ui5_checkbox_compact_width_height); - padding: 0 var(--_ui5_checkbox_compact_wrapper_padding); -} - -:host([data-ui5-compact-size]) .ui5-checkbox-root:focus::before { - top: var(--_ui5_checkbox_compact_focus_position); - left: var(--_ui5_checkbox_compact_focus_position); - right: var(--_ui5_checkbox_compact_focus_position); - bottom: var(--_ui5_checkbox_compact_focus_position); - border: var(--_ui5_checkbox_focus_outline); -} - -:host([data-ui5-compact-size]) .ui5-checkbox-inner { - max-height: var(--_ui5_checkbox_compact_inner_size); - height: var(--_ui5_checkbox_compact_inner_size); - max-width: var(--_ui5_checkbox_compact_inner_size); - min-width: var(--_ui5_checkbox_compact_inner_size); - font-size: .625rem; -} - -:host([data-ui5-compact-size]) .ui5-checkbox-root .ui5-checkbox-label { - margin-left: var(--_ui5_checkbox_compact_wrapper_padding); -} - -:host([data-ui5-compact-size]) .ui5-checkbox-icon { - width: 0.75rem; - height: 0.75rem; +.ui5-checkbox-icon { + width: var(--_ui5_checkbox_icon_size); + height: var(--_ui5_checkbox_icon_size); } /* RTL */ @@ -218,13 +170,4 @@ https://github.com/philipwalton/flexbugs/issues/231 :host([text]) [dir="rtl"].ui5-checkbox-root .ui5-checkbox-label { margin-left: 0; margin-right: var(--_ui5_checkbox_compact_wrapper_padding); -} - -/* RTL + Compact */ -:host([data-ui5-compact-size][text]) [dir="rtl"].ui5-checkbox-root { - padding-right: var(--_ui5_checkbox_compact_wrapper_padding); -} - -:host([data-ui5-compact-size][text]) [dir="rtl"].ui5-checkbox-root:focus::before { - right: var(--_ui5_checkbox_compact_focus_position); -} +} \ No newline at end of file diff --git a/packages/main/src/themes/CustomListItem.css b/packages/main/src/themes/CustomListItem.css index 400baeb226a8..96bcd52be95f 100644 --- a/packages/main/src/themes/CustomListItem.css +++ b/packages/main/src/themes/CustomListItem.css @@ -4,7 +4,7 @@ } :host { - height: 3rem; + height: var(--_ui5_custom_list_item_height); box-sizing: border-box; } @@ -26,16 +26,5 @@ ui5-radiobutton.ui5-li-singlesel-radiobtn { .ui5-li-root.ui5-custom-li-root, ui5-checkbox.ui5-li-singlesel-radiobtn, ui5-radiobutton.ui5-li-singlesel-radiobtn { - min-width: 3rem; -} - -/* Compact size */ -:host([data-ui5-compact-size]) { - height: 2rem; -} - -:host([data-ui5-compact-size]) .ui5-li-root.ui5-custom-li-root, -:host([data-ui5-compact-size]) ui5-checkbox.ui5-li-singlesel-radiobtn, -:host([data-ui5-compact-size]) ui5-radiobutton.ui5-li-singlesel-radiobtn { - min-width: 2rem; -} + min-width: var(--_ui5_custom_list_item_rb_min_width); +} \ No newline at end of file diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css index 94b5c563e7f9..92f57b394f58 100644 --- a/packages/main/src/themes/DayPicker.css +++ b/packages/main/src/themes/DayPicker.css @@ -11,8 +11,8 @@ .ui5-dp-weekname, .ui5-dp-dayname, .ui5-dp-item { - width: 2.25rem; - height: 2.875rem; + width: var(--_ui5_day_picker_item_width); + height: var(--_ui5_day_picker_item_height); margin-top: var(--_ui5_daypicker_item_margin); margin-right: var(--_ui5_daypicker_item_margin); font-family: var(--sapFontFamily); @@ -150,21 +150,5 @@ } .ui5-dp-emptyweek { - height: 3rem; -} - -/* Compact size */ -:host([data-ui5-compact-size]) .ui5-dp-weeknumber-container { - padding-top: 2rem; -} - -:host([data-ui5-compact-size]) .ui5-dp-weekname, -:host([data-ui5-compact-size]) .ui5-dp-dayname, -:host([data-ui5-compact-size]) .ui5-dp-item { - width: 2rem; - height: 2rem; -} - -:host([data-ui5-compact-size]) .ui5-dp-emptyweek { - height: 2.125rem; -} + height: var(--_ui5_day_picker_empty_height); +} \ No newline at end of file diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 0ba6e0c339a2..f171bf422127 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -17,14 +17,6 @@ box-sizing: border-box; } -:host([data-ui5-compact-size]) { - height: var(--_ui5_input_compact_height); -} - -:host([data-ui5-compact-size]) [inner-input] { - padding: 0 0.5rem; -} - :host([focused]) { outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); outline-offset: -3px; @@ -55,12 +47,6 @@ color: var(--sapContent_DisabledTextColor); } -:host([value-state="Error"]) [input-icon][data-ui5-compact-size], -:host([value-state="Success"]) [input-icon][data-ui5-compact-size], -:host([value-state="Warning"]) [input-icon][data-ui5-compact-size] { - padding: .1875rem .5rem -} - [inner-input] { background: transparent; color: inherit; @@ -69,7 +55,7 @@ -webkit-appearance: none; -moz-appearance: textfield; line-height: normal; - padding: 0 0.75rem; + padding: var(--_ui5_input_inner_padding); box-sizing: border-box; min-width: 3rem; text-overflow: ellipsis; @@ -196,19 +182,10 @@ align-items: center; } -:host([data-ui5-compact-size]) .ui5-input-icon-root { - min-width: var(--sap_wc_input_compact_min_width); - width: var(--sap_wc_input_compact_min_width); -} - /* TODO: Remove this after parser is fixed - this statement is transformed to "ui5-multi-combobox ui5-icon" which affects all icons in the combobox incuding these in the list items */ ::slotted(ui5-icon[slot="icon"]) { padding: var(--_ui5_input_icon_padding); -} - -:host([data-ui5-compact-size]) ::slotted(ui5-icon[slot="icon"]) { - padding: .25rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/InputIcon.css b/packages/main/src/themes/InputIcon.css index b65f5868625d..0b5a8a700ad7 100644 --- a/packages/main/src/themes/InputIcon.css +++ b/packages/main/src/themes/InputIcon.css @@ -9,16 +9,12 @@ color: var(--sapContent_IconColor); cursor: pointer; outline: none; - padding: var(--_ui5-input-icon-padding); + padding: var(--_ui5_input_icon_padding); border-left: 1px solid transparent; min-width: 1rem; min-height: 1rem; } -[input-icon][data-ui5-compact-size] { - padding: .25rem .5rem; -} - [input-icon][pressed] { background: var(--sapButton_Selected_Background); color: var(--sapButton_Active_TextColor); diff --git a/packages/main/src/themes/List.css b/packages/main/src/themes/List.css index 6f84ef9ef265..54eca5d5727c 100644 --- a/packages/main/src/themes/List.css +++ b/packages/main/src/themes/List.css @@ -74,7 +74,8 @@ background-color: var(--sapList_Background); border-bottom: 1px solid var(--sapList_BorderColor); padding: 0 1rem !important; - height:3rem; + height: var(--_ui5_list_no_data_height); + font-size: var(--sapFontMediumSize); } @@ -82,10 +83,4 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} - -/* Compact size */ -:host([data-ui5-compact-size]) .ui5-list-root .ui5-list-nodata { - height: 2rem; - font-size: var(--sapFontMediumSize); -} +} \ No newline at end of file diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index abb2a155b509..02a78e181b3e 100644 --- a/packages/main/src/themes/ListItem.css +++ b/packages/main/src/themes/ListItem.css @@ -56,12 +56,10 @@ } /* ui5-li: item with title and description */ -:host([data-ui5-compact-size][has-title][description]), :host([has-title][description]) { height: 5rem; } -:host([data-ui5-compact-size][has-title][description]) .ui5-li-title, :host([has-title][description]) .ui5-li-title { padding-bottom: 0.375rem; } @@ -76,7 +74,7 @@ .ui5-li-title { color: var(--sapTextColor); - font-size: var(--sapMFontLargeSize); + font-size: var(--_ui5_list_item_title_size); } .ui5-li-title, @@ -102,11 +100,11 @@ } .ui5-li-img { - min-width: 2rem; - width: 2rem; - margin: 0.5rem 0.75rem 0.5rem 0rem; - min-height: 2rem; - height: 2rem; + width: var(--_ui5_list_item_img_size); + min-width: var(--_ui5_list_item_img_size); + height: var(--_ui5_list_item_img_size); + min-height: var(--_ui5_list_item_img_size); + margin: var(--_ui5_list_item_img_margin); } .ui5-li-icon { @@ -136,21 +134,8 @@ flex-shrink: 0; } -/* Compact size */ -:host([data-ui5-compact-size]) .ui5-li-title { - height: 2rem; - line-height: 2rem; - font-size: var(--sapFontMediumSize); -} - -:host([data-ui5-compact-size]:not([has-title]):not([description])) .ui5-li-img { - width: 1.75rem; - height: 1.75rem; - margin-top: 0.55rem; -} - -:host([data-ui5-compact-size]) ui5-checkbox.ui5-li-singlesel-radiobtn { - margin-right: 0.5rem; +:host() ui5-checkbox.ui5-li-singlesel-radiobtn { + margin-right: var(--_ui5_list_item_cb_margin_right); } /* RTL */ diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css index c05bfd75dd27..98e8e0389756 100644 --- a/packages/main/src/themes/ListItemBase.css +++ b/packages/main/src/themes/ListItemBase.css @@ -3,7 +3,7 @@ } :host { - height: 3rem; + height: var(--_ui5_list_item_base_height); background: var(--ui5-listitem-background-color); box-sizing: border-box; } @@ -65,9 +65,4 @@ min-height: 1px; /* IE specific: fixes vertical centering with flex */ font-family: var(--sapFontFamily); pointer-events: none; /* IE specific: fixes focus crrectly applied*/ -} - -/* Compact size */ -:host([data-ui5-compact-size]) { - height: 2rem; -} +} \ No newline at end of file diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css index 665aac3c19f0..7240a3ea6dad 100644 --- a/packages/main/src/themes/MonthPicker.css +++ b/packages/main/src/themes/MonthPicker.css @@ -20,7 +20,7 @@ .ui5-mp-item { display: flex; width: calc(33.333% - 0.125rem); - height: 3rem; + height: var(--_ui5_month_picker_item_height); color: var(--sapTextColor); background-color: var(--_ui5_monthpicker_item_background_color); align-items: center; @@ -78,9 +78,4 @@ justify-content: center; align-items: center; width: 100%; -} - -/* Compact size */ -:host([data-ui5-compact-size]) .ui5-mp-item { - height: 2rem; -} +} \ No newline at end of file diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index 6f7c558299e8..83f0f80a7304 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -2,10 +2,6 @@ display: block; } -:host([data-ui5-compact-size]) .ui5-panel-header { - height: 2rem; -} - :host { font-family: var(--sapFontFamily); background-color: var(--sapGroup_ContentBackground); diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css index 7003fa17714c..c1e4bdd4bd3e 100644 --- a/packages/main/src/themes/RadioButton.css +++ b/packages/main/src/themes/RadioButton.css @@ -35,10 +35,10 @@ content: ""; display: block; position: absolute; - top: 0.5rem; - bottom: 0.5rem; - left: 0.5rem; - right: 0.5rem; + top: var(--_ui5_rb_focus_dist); + bottom: var(--_ui5_rb_focus_dist); + left: var(--_ui5_rb_focus_dist); + right: var(--_ui5_rb_focus_dist); pointer-events: none; border: var(--_ui5_radiobutton_border_width) dotted var(--sapContent_FocusColor); } @@ -95,7 +95,7 @@ } .ui5-radio-root { - height: 2.75rem; + height: var(--_ui5_rb_height); position: relative; display: flex; flex-wrap: nowrap; @@ -109,8 +109,8 @@ align-items: center; justify-content: center; flex-shrink: 0; - width: 2.75rem; - height: 2.75rem; + width: var(--_ui5_rb_inner_size); + height: var(--_ui5_rb_inner_size); font-size: 1rem; /* override font size of the message dialog */ pointer-events: none; vertical-align: top; @@ -134,7 +134,7 @@ ui5-label.ui5-radio-label { display: flex; align-items: center; - width: calc(100% - 2.75rem); + width: var(--_ui5_rb_label_width); padding-right: 1px; vertical-align: top; cursor: default; @@ -149,15 +149,14 @@ ui5-label.ui5-radio-label { } :host([wrap][text]) ui5-label.ui5-radio-label { - padding-bottom: .875rem; - padding-top: .875rem; + padding: var(--_ui5_rb_label_side_padding) 0; word-break: break-all; } /* SVG */ .ui5-radio-svg { - height: 1.375rem; - width: 1.375rem; + height: var(--_ui5_rb_svg_size); + width: var(--_ui5_rb_svg_size); overflow: visible; pointer-events: none; } @@ -177,62 +176,10 @@ ui5-label.ui5-radio-label { flex-shrink: 0; } -/* Compact size */ -:host([data-ui5-compact-size]) { - min-width: var(--_ui5_radiobutton_min_width_compact); -} - -:host([data-ui5-compact-size]) .ui5-radio-root { - height : 2rem; -} - -:host([data-ui5-compact-size][wrap][text]) .ui5-radio-root { - height: auto; -} - -:host([data-ui5-compact-size]) .ui5-radio-svg { - height: 1rem; - width: 1rem; -} - -:host([data-ui5-compact-size][wrap][text]) ui5-label.ui5-radio-label { - padding-top: .5rem; - padding-bottom: .5rem; -} - -:host([data-ui5-compact-size]) .ui5-radio-root:focus:before { - top: .375rem; - bottom: .375rem; - left: .375rem; - right: .325rem; -} - -:host([data-ui5-compact-size][text]) .ui5-radio-root:focus:before { - right: 0; -} - -:host([data-ui5-compact-size]) .ui5-radio-root .ui5-radio-inner { - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; -} - -:host([data-ui5-compact-size]) .ui5-radio-root ui5-label.ui5-radio-label { - width: calc(100% - 2rem + 1px); -} - /* RTL */ :host([text]) [dir="rtl"].ui5-radio-root:focus:before { left: 0; - right: 0.5rem; -} - -/* RTL in Compact */ -:host([data-ui5-compact-size][text]) [dir="rtl"].ui5-radio-root:focus:before { - left: 0; - right: 0.375rem; + right: var(--_ui5_rb_rtl_focus_right); } /* ListItem Context */ diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 8afb791ba4ec..d06c814abe7a 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -80,7 +80,7 @@ } .ui5-switch-text--on { - left: calc(-100% + 1.9125rem); + left: var(--_ui5_switch_text_on_left); } .ui5-switch-text--off { @@ -179,7 +179,7 @@ .ui5-switch-root.ui5-switch--checked .ui5-switch-slider { /* Move slider to oposite end, taking into account the handle as an offset. */ /* Note: translate(calc()) does not work in IE11 */ - transform: translateX(100%) translateX(-1.875rem); + transform : var(--_ui5_switch_slide_transform); } /* switch semantic off */ @@ -282,40 +282,6 @@ color: var(--_ui5_switch_text_off_semantic_color); } -/* Compact size */ -:host([data-ui5-compact-size]) .ui5-switch-root { - height: var(--_ui5_switch_compact_height); - min-width: var(--_ui5_switch_compact_width); -} - -:host([data-ui5-compact-size]) .ui5-switch-root { - height: var(--_ui5_switch_compact_height); - min-width: var(--_ui5_switch_compact_width); -} - -:host([data-ui5-compact-size]) .ui5-switch-root .ui5-switch-handle { - height: var(--_ui5_switch_handle_compact_height); - width: var(--_ui5_switch_handle_compact_width); -} - -:host([data-ui5-compact-size]) .ui5-switch-root .ui5-switch-text--on { - left: calc(-100% + 1.5625rem); -} - -:host([data-ui5-compact-size]) .ui5-switch-root.ui5-switch--checked .ui5-switch-slider { - /* Move slider to oposite end, taking into account the handle as an offset. */ - /* Note: translate(calc()) does not work in IE11 */ - transform: translateX(100%) translateX(-1.5rem); -} - -:host([data-ui5-compact-size]) .ui5-switch-root.ui5-switch--no-label { - min-width: var(--_ui5_switch_compact_no_label_width); -} - -:host([data-ui5-compact-size]) .ui5-switch--no-label .ui5-switch-track { - height: var(--_ui5_switch_track_compact_no_label_height); -} - /* RTL */ [dir="rtl"].ui5-switch-root .ui5-switch-handle { left: 0; @@ -323,24 +289,15 @@ } [dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider { - transform: translateX(1.875rem) translateX(-100%); + transform: var(--_ui5_switch_rtl_transform); } [dir="rtl"].ui5-switch-root .ui5-switch-text--on { - right: calc(-100% + 1.9125rem); + right: var(--_ui5_switch_text_right); left: auto; } [dir="rtl"].ui5-switch-root .ui5-switch-text--off { right: auto; left: 0; -} - -/* RTL + Compact */ -:host([data-ui5-compact-size]) [dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider { - transform: translateX(-100%) translateX(1.5rem); -} - -:host([data-ui5-compact-size]) [dir="rtl"].ui5-switch-root .ui5-switch-text--on { - right: calc(-100% + 1.5625rem); -} +} \ No newline at end of file diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index f73d7f376ab3..12f8a25ced59 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -140,14 +140,14 @@ border: var(--_ui5_tc_headerItemIcon_border); border-radius: 50%; margin-right: 0.25rem; - height: 3rem; - width: 3rem; + height: var(--_ui5_tc_item_text); + width: var(--_ui5_tc_item_text); pointer-events: none; } .ui5-tc-headerItemIcon { - width: 1.5rem; - height: 1.5rem; + width: var(--_ui5_tc_item_icon_size); + height: var(--_ui5_tc_item_icon_size); color: var(--_ui5_tc_headerItemIcon_color); text-shadow: var(--sapContent_TextShadow); pointer-events: none; @@ -164,16 +164,17 @@ .ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText { display: block; - margin-top: 0.625rem; + margin-top: var(--_ui5_tc_item_add_text_margin_top); } /*** END Icon and text Tab styles ***/ /*** TextOnly Tab styles ***/ .ui5-tc__headerItem--textOnly { font-size: var(--sapFontMediumSize); - height: 3rem; + height: var(--_ui5_tc_item_text); display: flex; align-items: center; + line-height: var(--_ui5_tc_item_text_line_height); } /*** END TextOnly Tab styles ***/ @@ -228,7 +229,7 @@ display: flex; align-items: center; padding: 0 0.5rem; - height: 3rem; + height: var(--_ui5_tc_item_text); pointer-events: none; } @@ -396,44 +397,4 @@ [dir=rtl] .ui-tc__overflowButton { margin-right: auto; margin-left: 0.25rem; -} - -/*** Compact ***/ -:host([data-ui5-compact-size]) .ui5-tc__headerItem--textOnly, -:host([data-ui5-compact-size]) .ui5-tc__overflowItemContent { - height: 2rem; -} - -:host([data-ui5-compact-size]) .ui5-tc__headerItem--textOnly { - line-height: 1.325rem; -} - -:host([data-ui5-compact-size]) .ui5-tc-headerItemIcon-outer { - height: 2rem; - width: 2rem; -} - -:host([data-ui5-compact-size]) .ui5-tc-headerItemIcon { - height: 1rem; - width: 1rem; -} - -:host([data-ui5-compact-size]) .ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText { - margin-top: 0.3125rem; -} - -:host([data-ui5-compact-size]) .ui5-tc-root.ui5-tc--textOnly .ui5-tc__header { - height: var(--_ui5_tc_header_height_text_only_compact); -} - -:host([data-ui5-compact-size]) .ui5-tc__header { - height: var(--_ui5_tc_header_height_compact); -} - -:host([data-ui5-compact-size]) .ui5-tc__content { - height: calc(100% - var(--_ui5_tc_header_height_compact)); /* the header height (tabs with icons and text) */ -} - -:host([data-ui5-compact-size]) .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content { - height: calc(100% - var(--_ui5_tc_header_height_text_only_compact)); /* the header height (tabs text only) */ } \ No newline at end of file diff --git a/packages/main/src/themes/Timeline.css b/packages/main/src/themes/Timeline.css index 950a58c309c7..128e6f15e1af 100644 --- a/packages/main/src/themes/Timeline.css +++ b/packages/main/src/themes/Timeline.css @@ -3,7 +3,7 @@ } .ui5-timeline-root { - padding: 1rem 1rem 1rem .5rem; + padding: var(--_ui5_tl_padding); box-sizing: border-box; overflow: hidden; } @@ -15,22 +15,9 @@ } .ui5-timeline-list-item { - margin-bottom: 1.625rem; + margin-bottom: var(--_ui5_tl_li_margin_bottom); } .ui5-timeline-list-item:last-child { margin-bottom: 0; } - -/* Compact size */ -:host([data-ui5-compact-size]) .ui5-timeline-root { - padding: .5rem; -} - -:host([data-ui5-compact-size]) .ui5-timeline-list-item { - margin-bottom: .5rem; -} - -:host([data-ui5-compact-size]) .ui5-timeline-list-item :last-child { - margin-bottom: 0; -} diff --git a/packages/main/src/themes/TimelineItem.css b/packages/main/src/themes/TimelineItem.css index 43568c53a646..f5f1035de530 100644 --- a/packages/main/src/themes/TimelineItem.css +++ b/packages/main/src/themes/TimelineItem.css @@ -71,7 +71,7 @@ flex: 1; position: relative; margin-left: .5rem; - padding: 1rem; + padding: var(--_ui5_tl_bubble_padding); } .ui5-tli-bubble:focus { @@ -150,14 +150,6 @@ padding-top: .75rem; } -:host([data-ui5-compact-size]) .ui5-tli-bubble { - padding: .5rem; -} - -:host([data-ui5-compact-size]) .ui5-tli-indicator::before { - bottom: -.5rem; -} - [dir=rtl] .ui5-tli-bubble-arrow--left { right: calc(-1 * var(--_ui5_TimelineItem_arrow_size)); left: auto; diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css index 81c25b3fbf85..a588d25a5ddd 100644 --- a/packages/main/src/themes/Token.css +++ b/packages/main/src/themes/Token.css @@ -6,7 +6,7 @@ border-color: var(--_ui5_token_border_color); border-radius: var(--_ui5_token_border_radius); color: var(--_ui5_token_text_color); - height: 1.625rem; + height: var(--_ui5_token_height); box-sizing: border-box; } @@ -67,45 +67,21 @@ } .ui5-token--icon { - padding: 0.25rem 0.5rem; color: inherit; cursor: pointer; - width: 1rem; - height: 1rem; + width: var(--_ui5_token_icon_size); + height: var(--_ui5_token_icon_size); + padding: var(--_ui5_token_icon_padding); color: var(--_ui5_token_icon_color); } -/* Compact */ -:host([data-ui5-compact-size]) { - font-size: 0.75rem; - height: 1.125rem; /* Note: by design should be 1.25rem, but the token gets cut in Erron/Warning state */ -} - -:host([data-ui5-compact-size]) .ui5-token--wrapper { - padding-left: 0.25rem; - padding-top: 0.1rem; - padding-bottom: 0.1rem; -} - -:host([data-ui5-compact-size]) .ui5-token--icon { - padding: 0.1rem 0.25rem; - width: 0.75rem; - height: 0.75rem; -} - /* RTL */ :host .ui5-token--wrapper[dir="rtl"] { - padding-right: 0.3125rem; - padding-left: 0; + padding-right: var(--_ui5_token_wrapper_right_padding); + padding-left: var(--_ui5_token_wrapper_left_padding); } :host([readonly]) .ui5-token--wrapper[dir="rtl"] { padding-right: 0; padding-left: 0.375rem; -} - -/* RTL + Compact */ -:host([data-ui5-compact-size]) .ui5-token--wrapper[dir="rtl"] { - padding-right: 0.25rem; - padding-left: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css index 0c1796d03ead..ca137a4bc60c 100644 --- a/packages/main/src/themes/Tokenizer.css +++ b/packages/main/src/themes/Tokenizer.css @@ -7,21 +7,16 @@ height: 2.25rem; } -:host([data-ui5-compact-size]) .ui5-tokenizer-root { - padding: 0.125rem; -} - .ui5-tokenizer-root { height: 100%; display: flex; align-items: center; - padding: 0.1875rem; + padding: var(--_ui5_tokenizer_root_padding); overflow-x: scroll; box-sizing: border-box; font-family: var(--sapFontFamily); } -:host([data-ui5-compact-size]) .ui5-tokenizer-root.ui5-tokenizer-no-padding, .ui5-tokenizer-no-padding { padding: 0; } @@ -56,25 +51,10 @@ font-size: var(--sapFontMediumSize); } -.ui5-tokenizer-token-placeholder { - display: inline-block; - height: 1.625rem; - width: 1px; - margin-top: auto; -} - -:host([data-ui5-compact-size]) .ui5-tokenizer-token-placeholder { - height: 1.25rem; -} - :host([expanded]) .ui5-tokenizer--content { overflow: auto; } ::slotted(ui5-token) { margin-left: .25rem; -} - -:host([data-ui5-compact-size]) :slotted(ui5-token) { - height: 100%; } \ No newline at end of file diff --git a/packages/main/src/themes/YearPicker.css b/packages/main/src/themes/YearPicker.css index ea28dab3b123..3f3e1a356350 100644 --- a/packages/main/src/themes/YearPicker.css +++ b/packages/main/src/themes/YearPicker.css @@ -7,10 +7,6 @@ height: 100%; } -:host([data-ui5-compact-size]) .ui5-yp-item { - height: 2rem; -} - .ui5-yp-root { padding: 2rem 0 1rem 0; display: flex; @@ -32,7 +28,7 @@ display: flex; margin: var(--_ui5_yearpicker_item_margin); width: calc(25% - 0.125rem); - height: 3rem; + height: var(--_ui5_year_picker_item_height); color: var(--sapTextColor); background-color: var(--_ui5_yearpicker_item_background_color); align-items: center; diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css index 1766d448ec6e..7c7962086bdb 100644 --- a/packages/main/src/themes/base/Button-parameters.css +++ b/packages/main/src/themes/base/Button-parameters.css @@ -8,7 +8,7 @@ --_ui5_button_compact_padding: 0.4375rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.563rem; - --_ui5_button_base_icon_only_font_size: 1.375rem; + --_ui5_button_icon_font_size: 1.375rem; --_ui5_button_outline: 1px dotted var(--sapContent_FocusColor); --_ui5_button_outline_offset: calc(-1 * .1875rem); --_ui5_button_emphasized_font_weight: normal; diff --git a/packages/main/src/themes/base/InputIcon-parameters.css b/packages/main/src/themes/base/InputIcon-parameters.css index 3e5001f4544d..0b73743cbc8e 100644 --- a/packages/main/src/themes/base/InputIcon-parameters.css +++ b/packages/main/src/themes/base/InputIcon-parameters.css @@ -1,3 +1,3 @@ :root { - --_ui5-input-icon-padding: .5625rem .6875rem; + --_ui5_input_icon_padding: .5625rem .6875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css new file mode 100644 index 000000000000..a8e417281651 --- /dev/null +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -0,0 +1,154 @@ +:root { + --_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_root_side_padding: .6875rem; + --_ui5_checkbox_icon_size: 1rem; + --_ui5_custom_list_item_height: 3rem; + --_ui5_custom_list_item_rb_min_width: 3rem; + --_ui5_day_picker_item_width: 2.25rem; + --_ui5_day_picker_item_height: 2.875rem; + --_ui5_day_picker_empty_height: 3rem; + --_ui5_input_inner_padding: 0 0.75rem; + --_ui5_input_value_state_icon_padding: var(--_ui5-input-icon-padding); + --_ui5_list_no_data_height: 3rem; + --_ui5_list_item_cb_margin_right: 0; + --_ui5_list_item_title_size: var(--sapMFontLargeSize); + --_ui5_list_item_img_size: 2rem; + --_ui5_list_item_img_margin: 0.5rem 0.75rem 0.5rem 0rem; + --_ui5_list_item_base_height: 3rem; + --_ui5_month_picker_item_height: 3rem; + --_ui5_year_picker_item_height: 3rem; + --_ui5_tokenizer_root_padding: 0.1875rem; + --_ui5_token_height: 1.625rem; + --_ui5_token_icon_size: 1rem; + --_ui5_token_icon_padding: 0.25rem 0.5rem; + --_ui5_token_wrapper_right_padding: 0.3125rem; + --_ui5_token_wrapper_left_padding: 0; + --_ui5_tl_bubble_padding: 1rem; + --_ui5_tl_indicator_before_bottom: -1.625rem; + --_ui5_tl_padding: 1rem 1rem 1rem .5rem; + --_ui5_tl_li_margin_bottom: 1.625rem; + --_ui5_rb_height: 2.75rem; + --_ui5_rb_label_side_padding: .875rem; + --_ui5_rb_focus_dist: .5rem; + --_ui5_rb_inner_size: 2.75rem; + --_ui5_rb_svg_size: 1.375rem; + --_ui5_rb_label_width: calc(100% - 2.75rem); + --_ui5_rb_rtl_focus_right: 0.5rem; + --_ui5_switch_text_on_left: calc(-100% + 1.9125rem); + --_ui5_switch_slide_transform: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(1.875rem) translateX(-100%); + --_ui5_switch_text_right: calc(-100% + 1.9125rem); + --_ui5_tc_item_text: 3rem; + --_ui5_tc_item_text_line_height: normal; + --_ui5_tc_item_icon_size: 1.5rem; + --_ui5_tc_item_add_text_margin_top: 0.625rem; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_button_base_height: 1.625rem; + --_ui5_button_base_padding: 0.4375rem; + --_ui5_button_base_min_width: 2rem; + --_ui5_button_icon_font_size: 1rem; + --_ui5_calendar_header_height: 2rem; + --_ui5_calendar_header_padding: 0; + --_ui5_calendar_header_arrow_button_width: 2rem; + + /* CheckBox */ + --_ui5_checkbox_wrapper_padding: 0; + --_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding); + --_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding); + --_ui5_checkbox_wrapped_content_margin_top: var(--_ui5_checkbox_compact_wrapped_label_margin_top); + --_ui5_checkbox_wrapped_focus_left_top_bottom_position: var(--_ui5_checkbox_compact_focus_position); + --_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height); + --_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_focus_position: var(--_ui5_checkbox_compact_focus_position); + --_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position); + --_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position); + --_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size); + --_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size); + --_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size); + --_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size); + --_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding); + --_ui5_checkbox_icon_size: .75rem; + --_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding); + --_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position); + + + /* Custom List Item */ + --_ui5_custom_list_item_height: 2rem; + --_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; + + /* Input */ + --_ui5_input_height: var(--_ui5_input_compact_height); + --_ui5_input_inner_padding: 0 0.5rem; + --sap_wc_input_icon_min_width: var(--sap_wc_input_compact_min_width); + --_ui5_input_icon_padding: .25rem .5rem; + --_ui5_input_value_state_icon_padding: .1875rem .5rem; + + /* List */ + --_ui5_list_no_data_height: 2rem; + --_ui5_list_item_cb_margin_right: .5rem; + --_ui5_list_item_title_size: var(--sapFontMediumSize); + --_ui5_list_item_img_size: 1.75rem; + --_ui5_list_item_img_margin: 0.55rem 0.75rem 0.5rem 0rem; + --_ui5_list_item_base_height: 2rem; + + --_ui5_month_picker_item_height: 2rem; + --_ui5_panel_header_height: 2rem; + --_ui5_year_picker_item_height: 2rem; + + --_ui5_tokenizer_root_padding: 0.125rem; + --_ui5_token_height: 1.125rem; + + --_ui5_token_icon_size: .75rem; + --_ui5_token_icon_padding: 0.1rem 0.25rem; + --_ui5_token_wrapper_right_padding: 0.25rem; + --_ui5_token_wrapper_left_padding: 0; + + --_ui5_tl_bubble_padding: .5rem; + --_ui5_tl_indicator_before_bottom: -.5rem; + --_ui5_tl_padding: .5rem; + --_ui5_tl_li_margin_bottom: .5rem; + --_ui5_rb_height: 2rem; + --_ui5_rb_label_side_padding: .5rem; + + --_ui5_rb_focus_dist: .375rem; + --_ui5_rb_inner_size: 2rem; + --_ui5_rb_svg_size: 1rem; + --_ui5_rb_label_width: calc(100% - 2rem + 1px); + --_ui5_rb_rtl_focus_right: 0.375rem; + + --_ui5_switch_height: var(--_ui5_switch_compact_height); + --_ui5_switch_width: var(--_ui5_switch_compact_width); + --_ui5_switch_handle_height: var(--_ui5_switch_handle_compact_height); + --_ui5_switch_handle_width: var(--_ui5_switch_handle_compact_width); + --_ui5_switch_text_on_left: calc(-100% + 1.5625rem); + --_ui5_switch_slide_transform: translateX(100%) translateX(-1.5rem); + --_ui5_switch_no_label_width: var(--_ui5_switch_compact_no_label_width); + --_ui5_switch_track_no_label_height: var(--_ui5_switch_track_compact_no_label_height); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.5rem); + --_ui5_switch_text_right: calc(-100% + 1.5625rem); + + --_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_header_height_text_only: var(--_ui5_tc_header_height_text_only_compact); + --_ui5_tc_header_height: var(--_ui5_tc_header_height_compact); + + /* Radio Button */ + --_ui5_radiobutton_min_width: var(--_ui5_radiobutton_min_width_compact); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/InputIcon-parameters.css b/packages/main/src/themes/sap_belize/InputIcon-parameters.css index 5e773a9129de..84956e4ff819 100644 --- a/packages/main/src/themes/sap_belize/InputIcon-parameters.css +++ b/packages/main/src/themes/sap_belize/InputIcon-parameters.css @@ -1,5 +1,5 @@ @import "../base/InputIcon-parameters.css"; :root { - --_ui5-input-icon-padding: 0.6875rem .6875rem; + --_ui5_input_icon_padding: 0.6875rem .6875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 7a62ab3528fb..82bd384cc09b 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -1,3 +1,4 @@ +@import "../base/sizes-parameters.css"; @import "../base/Badge-parameters.css"; @import "./Button-parameters.css"; @import "./BusyIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css b/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css index 5e773a9129de..84956e4ff819 100644 --- a/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/InputIcon-parameters.css @@ -1,5 +1,5 @@ @import "../base/InputIcon-parameters.css"; :root { - --_ui5-input-icon-padding: 0.6875rem .6875rem; + --_ui5_input_icon_padding: 0.6875rem .6875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index d9b4a74656c7..3876850b2bfb 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -1,3 +1,4 @@ +@import "../base/sizes-parameters.css"; @import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "../base/BusyIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/Button-parameters.css b/packages/main/src/themes/sap_fiori_3/Button-parameters.css index f3de08baf69c..73817350d7eb 100644 --- a/packages/main/src/themes/sap_fiori_3/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Button-parameters.css @@ -7,7 +7,7 @@ --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; - --_ui5_button_base_icon_only_font_size: 1rem; + --_ui5_button_icon_font_size: 1rem; --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; } diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index 79ac7ae8906d..375c07640555 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -1,3 +1,4 @@ +@import "../base/sizes-parameters.css"; @import "../base/Badge-parameters.css"; @import "./Button-parameters.css"; @import "../base/BusyIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css index f3de08baf69c..73817350d7eb 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css @@ -7,7 +7,7 @@ --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; - --_ui5_button_base_icon_only_font_size: 1rem; + --_ui5_button_icon_font_size: 1rem; --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; } diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index 0698a6b15357..31f69d81bbe3 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -1,3 +1,4 @@ +@import "../base/sizes-parameters.css"; @import "./Badge-parameters.css"; @import "./Button-parameters.css"; @import "../base/BusyIndicator-parameters.css"; diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html index 17605b7f2cea..597009bf0de7 100644 --- a/packages/main/test/pages/BusyIndicator.html +++ b/packages/main/test/pages/BusyIndicator.html @@ -12,8 +12,7 @@ diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index a19bc2e0a22d..bb79d3b09e37 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -9,12 +9,6 @@ delete Document.prototype.adoptedStyleSheets - - diff --git a/packages/main/test/pages/Card.html b/packages/main/test/pages/Card.html index 5da792877720..5c9f09066a79 100644 --- a/packages/main/test/pages/Card.html +++ b/packages/main/test/pages/Card.html @@ -7,12 +7,6 @@ Card - - diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index b4502ee4d1b4..288111ffc8cd 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -12,8 +12,7 @@ diff --git a/packages/main/test/pages/Components.html b/packages/main/test/pages/Components.html index abc498eeb850..fb2545938961 100644 --- a/packages/main/test/pages/Components.html +++ b/packages/main/test/pages/Components.html @@ -9,8 +9,7 @@ diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 3eaec2d68d4e..7dd39296ea8e 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -21,7 +21,6 @@ diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html index 1d45060dd55a..0540d89a82ba 100644 --- a/packages/main/test/pages/RadioButton.html +++ b/packages/main/test/pages/RadioButton.html @@ -73,7 +73,7 @@

*Params

- - for compact use 'sap-ui-compactSize=true' + - for compact add 'ui5-content-density-compact' class to any dom element

- for belize use 'sap-ui-theme=sap_belize' diff --git a/packages/main/test/pages/Simple.html b/packages/main/test/pages/Simple.html index bb1896fd1bb1..10226a07406c 100644 --- a/packages/main/test/pages/Simple.html +++ b/packages/main/test/pages/Simple.html @@ -12,7 +12,6 @@ "noConflict": { "events": ["click"] }, - "compactSize": true, "calendarType": "Islamic" } diff --git a/packages/main/test/pages/kitchen-scripts.js b/packages/main/test/pages/kitchen-scripts.js index 18ecd7e7cfad..ce89625c501d 100644 --- a/packages/main/test/pages/kitchen-scripts.js +++ b/packages/main/test/pages/kitchen-scripts.js @@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var sideNav = document.getElementById("side-nav"); var mainContent = document.getElementById("main-content"); var Configuration = window["sap-ui-webcomponents-bundle"].configuration; - var COMPACT = Configuration.getCompactSize(); + var COMPACT_CLASS = "ui5-content-density-compact"; var RTL = Configuration.getRTL(); var THEME = Configuration.getTheme(); var HCB = "sap_belize_hcb"; @@ -41,12 +41,11 @@ document.addEventListener("DOMContentLoaded", function(event) { function buildURL(compact, rtl, theme) { var currentURL = window.location.href; - var params = ".html?sap-ui-theme=" + theme + "&sap-ui-compactSize=" + !!compact + "&sap-ui-rtl=" + !!rtl; + var params = ".html?sap-ui-theme=" + theme + "&sap-ui-rtl=" + !!rtl; return currentURL.slice(0, currentURL.indexOf(".html")) + params; } btnRTL.pressed = !!RTL; - btnCompact.pressed = !!COMPACT; btnTheme.pressed = !!(THEME === HCB); btnLightDark.pressed = !!(THEME === FIORI3_DARK); @@ -55,7 +54,11 @@ document.addEventListener("DOMContentLoaded", function(event) { }, false); btnCompact.addEventListener('click', function(e) { - window.location.href = buildURL(e.target.pressed, btnRTL.pressed, THEME); + if (document.body.className.includes(COMPACT_CLASS)) { + return document.body.className = ""; + } + + document.body.className += COMPACT_CLASS; }, false); btnTheme.addEventListener('click', function(e) { diff --git a/packages/playground/assets/js/playground.js b/packages/playground/assets/js/playground.js index 03b3c68b966f..5e114a28a623 100644 --- a/packages/playground/assets/js/playground.js +++ b/packages/playground/assets/js/playground.js @@ -8,6 +8,10 @@ document.addEventListener("DOMContentLoaded", function() { setTheme(); scrollSelectedMenuItemIntoView(); createMetaTags(); + + var contentDensity = window.localStorage.getItem("contentDensity"); + var isCompact = (contentDensity === "Compact"); + document.body.className = isCompact ? "ui5-content-density-compact": "" }); var THEMES = { @@ -39,7 +43,7 @@ function toggleSettings() { // Set selected option of themeSwitch Array.prototype.slice.call(contentDensitySwitch.querySelectorAll("ui5-option")).forEach(function(option) { - if (urlParameters["sap-ui-compactSize"] === "true") { + if (window.localStorage.getItem("contentDensity") === "Compact") { option.selected = option.textContent === "Compact"; } else { option.selected = option.textContent === "Cozy"; @@ -67,11 +71,13 @@ function toggleSettings() { contentDensity = contentDensitySwitch.selectedOption.textContent, textDirection = textDirectionSwitch.selectedOption.textContent; + + /* Save the compact setting in Local Storage */ + window.localStorage.setItem("contentDensity", contentDensity); + // Not implemented with string literals, beacause of IE11 var newLocation = location.origin + location.pathname + "?sap-ui-theme="; newLocation += theme; - newLocation += "&sap-ui-compactSize="; - newLocation += contentDensity === "Compact"; newLocation += "&sap-ui-rtl="; newLocation += textDirection === "RTL"; diff --git a/packages/tools/lib/init-package/resources/bundle.es5.js b/packages/tools/lib/init-package/resources/bundle.es5.js index 19b7e47c9a5c..cf9add11e587 100644 --- a/packages/tools/lib/init-package/resources/bundle.es5.js +++ b/packages/tools/lib/init-package/resources/bundle.es5.js @@ -8,7 +8,6 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js"; import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js"; -import { getCompactSize, setCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js"; @@ -19,8 +18,6 @@ const configuration = { setTheme, getNoConflict, setNoConflict, - getCompactSize, - setCompactSize, getCalendarType, getRTL, getFirstDayOfWeek, diff --git a/packages/tools/lib/init-package/resources/bundle.esm.js b/packages/tools/lib/init-package/resources/bundle.esm.js index 8b7bd702504d..2c0aff7a773e 100644 --- a/packages/tools/lib/init-package/resources/bundle.esm.js +++ b/packages/tools/lib/init-package/resources/bundle.esm.js @@ -9,7 +9,6 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js"; import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js"; -import { getCompactSize, setCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js"; @@ -28,8 +27,6 @@ window["sap-ui-webcomponents-bundle"] = { setTheme, getNoConflict, setNoConflict, - getCompactSize, - setCompactSize, getCalendarType, getRTL, getFirstDayOfWeek,