fix(ui5-bar): provide responsive paddings support

[unazko]

• Responsive paddings concept is now applied to ui5-bar component display.

Fixes: #7359

[didip1000]

The paddings don't look right in full screen, they're are all on the right.

[unazko]

The paddings don't look right in full screen, they're are all on the right.

The left padding is fixed on large screens.

[didip1000]

Works on Chrome, Firefox, and Safari (mobile as well), but can you change the sizes to be in rem instead of px to be consistent?

[unazko]

Works on Chrome, Firefox, and Safari (mobile as well), but can you change the sizes to be in rem instead of px to be consistent?

The S,M, L, XL brakepoints are represented in pixels in the documentation. I suspect that it will be less readable if we change to rem in this case. Please checkout the similar container query implementation in the ui5-page component.

[vladitasev]

All the CSS is copy/pasted 3 times, please extract to variables and only change the variables according to media size, for example:

.ui5-bar-startcontent-container {
	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
}
.ui5-bar-endcontent-container {
	padding-inline-end: var(--_ui5_bar-end-container-padding-end);
}
.ui5-bar-root .ui5-bar-content-container {
	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
	+ var(--_ui5_bar-end-container-padding-end)
	+ (2*var(--_ui5_bar-mid-container-padding-start-end))));
}

@container (width < 600px) {
	* {
		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_S);
		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_S)
	}
}

@container (width > 599px) and (width < 1440px) {
	* {
		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_M_L);
		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_M_L);
	}
}

@container (width > 1439px) {
	* {
		--_ui5_bar-start-container-padding-start: var(--_ui5_bar-start-container-padding-start_XL);
		--_ui5_bar-end-container-padding-end: var(--_ui5_bar-end-container-padding-end_XL);
	}
}