@ui5/webcomponents 0.0.0-6cb3eb0db → 0.0.0-701b14e36

package/src/themes/RadioButton.css

@@ -0,0 +1,300 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host {
+	min-width: var(--_ui5_radio_button_min_width);
+	max-width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	color: var(--_ui5_radio_button_color);
+	border-radius: var(--_ui5_radio_button_border_radius);
+	transition: var(--_ui5_radio_button_transition);
+}
+
+:host(:not([disabled])) .ui5-radio-root {
+	cursor: pointer;
+}
+
+/* checked */
+:host([checked]) {
+	color: var(--_ui5_radio_button_checked_fill);
+}
+
+:host([checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_inner_ring_color);
+}
+
+:host([checked]) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_color);
+}
+
+/* disabled */
+:host([disabled]) .ui5-radio-root {
+	color: var(--_ui5_radio_button_color);
+	opacity: var(--sapContent_DisabledOpacity);
+}
+
+:host([disabled][checked]) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_color);
+}
+
+/* focused */
+:host(:not([disabled])) .ui5-radio-root:focus:before {
+	content: "";
+	display: var(--_ui5_radio_button_focus_outline);
+	position: absolute;
+	top: var(--_ui5_radio_button_focus_dist);
+	bottom: var(--_ui5_radio_button_focus_dist);
+	left: var(--_ui5_radio_button_focus_dist);
+	right: var(--_ui5_radio_button_focus_dist);
+	pointer-events: none;
+	border: var(--_ui5_radio_button_border_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_radio_button_border_radius);
+}
+
+/* horizon readonly focus */
+:host(:not([disabled])[readonly]) .ui5-radio-root:focus:before {
+	border: var(--_ui5_radio_button_border_width) var(--_ui5_radio_button_border_readonly_focus_style) var(--sapContent_FocusColor);
+}
+
+:host(:not([disabled])) .ui5-radio-root:focus {
+	border-radius: var(--_ui5_radio_button_border_radius);
+	border: var(--_ui5_radio_button_focus_border);
+}
+
+/* hovered */
+:host(:not([disabled]):hover) {
+	background: var(--_ui5_radio_button_hover_background);
+	box-shadow: var(--_ui5_radio_button_hover_shadow);
+}
+
+/* hovered and value-state */
+:host(:not([value-state="Error"]):not([value-state="Warning"]):not([value-state="Success"]):not([value-state="Information"])) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_hover_color);
+}
+
+:host(:not([value-state="Error"]):not([value-state="Warning"]):not([value-state="Success"]):not([value-state="Information"])) .ui5-radio-root:hover .ui5-radio-inner--hoverable {
+	filter: drop-shadow(var(--_ui5_radio_button_outer_ring_hover_shadow));
+}
+
+:host(:not([value-state="Error"]):not([value-state="Warning"]):not([value-state="Success"]):not([value-state="Information"])[checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
+}
+
+.ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer, 
+:host([checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill);
+}
+
+/* active, checked */
+:host([active][checked]:not([value-state]):not([disabled]):not([readonly])) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
+}
+
+/* active, not checked */
+:host([active]:not([checked]):not([value-state]):not([disabled]):not([readonly])) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_active_color);
+}
+
+/* with label */
+:host([text]) .ui5-radio-root:focus:before {
+	inset-inline: var(--_ui5_radio_button_focus_dist) 0;
+}
+
+:host([text]) .ui5-radio-inner {
+	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
+}
+
+/* readonly */
+:host([checked][readonly]) .ui5-radio-svg-inner {
+	fill: var(--sapContent_NonInteractiveIconColor);
+}
+
+:host([readonly]) .ui5-radio-root .ui5-radio-svg-outer {
+	fill: var(--sapField_ReadOnly_Background);
+	stroke: var(--sapField_ReadOnly_BorderColor);
+	stroke-dasharray: var(--_ui5_radio_button_read_only_border_type);
+	stroke-width: var(--_ui5_radio_button_read_only_border_width);
+}
+
+/* value states */
+:host([value-state="Error"]) .ui5-radio-svg-outer,
+:host([value-state="Warning"]) .ui5-radio-svg-outer {
+	stroke-width: var(--sapField_InvalidBorderWidth);
+}
+
+:host([value-state="Information"]) .ui5-radio-svg-outer {
+	stroke-width: var(--_ui5_radio_button_information_border_width);
+}
+
+/* Error state */
+:host([value-state="Error"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_checked_error_fill);
+}
+:host([value-state="Error"]) .ui5-radio-svg-outer,
+:host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
+	stroke: var(--sapField_InvalidColor);
+	fill: var(--sapField_InvalidBackground);
+}
+
+:host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill_error);
+}
+
+:host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable {
+	filter: drop-shadow(var(--_ui5_radio_button_outer_ring_hover_shadow_error));
+}
+
+/* Warning state */
+:host([value-state="Warning"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_checked_warning_fill);
+}
+:host([value-state="Warning"]) .ui5-radio-svg-outer,
+:host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
+	stroke: var(--sapField_WarningColor);
+	fill: var(--sapField_WarningBackground);
+}
+
+:host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill_warning);
+}
+
+:host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable {
+	filter: drop-shadow(var(--_ui5_radio_button_outer_ring_hover_shadow_warning));
+}
+
+/* Success state */
+:host([value-state="Success"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_checked_success_fill);
+}
+:host([value-state="Success"]) .ui5-radio-svg-outer,
+:host([value-state="Success"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
+	stroke: var(--sapField_SuccessColor);
+	fill: var(--sapField_SuccessBackground);
+}
+
+:host([value-state="Success"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill_success);
+}
+
+:host([value-state="Success"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable {
+	filter: drop-shadow(var(--_ui5_radio_button_outer_ring_hover_shadow_success));
+}
+
+/* Information state */
+:host([value-state="Information"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_checked_information_fill);
+}
+:host([value-state="Information"]) .ui5-radio-svg-outer,
+:host([value-state="Information"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
+	stroke: var(--sapField_InformationColor);
+	fill: var(--sapField_InformationBackground);
+}
+
+:host([value-state="Information"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill_information);
+}
+
+:host([value-state="Information"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable {
+	filter: drop-shadow(var(--_ui5_radio_button_outer_ring_hover_shadow_information));
+}
+
+:host([value-state="Error"]) .ui5-radio-root,
+:host([value-state="Warning"]) .ui5-radio-root,
+:host([value-state="Information"]) .ui5-radio-root {
+	stroke-dasharray: var(--_ui5_radio_button_warning_error_border_dash);
+}
+
+.ui5-radio-root {
+	height: var(--_ui5_radio_button_height);
+	position: relative;
+	display: inline-flex;
+	flex-wrap: nowrap;
+	outline: none;
+	max-width: 100%;
+	width: var(--_ui5_radio_button_inner_width);
+	box-sizing: border-box;
+	border: var(--_ui5_radio_button_border);
+	border-radius: var(--_ui5_radio_button_border_radius);
+	transition: var(--_ui5_radio_button_transition);
+}
+
+/* Inner */
+.ui5-radio-inner {
+	display: flex;
+	align-items: center;
+	padding: var(--_ui5_radio_button_outer_ring_padding);
+	flex-shrink: 0;
+	height: var(--_ui5_radio_button_inner_size);
+	font-size: 1rem; /* override font size of the message dialog */
+	pointer-events: none;
+	vertical-align: top;
+}
+
+.ui5-radio-inner:focus {
+	outline: none;
+}
+
+.ui5-radio-inner input {
+	-webkit-appearance: none;
+	visibility: hidden;
+	width: 0;
+	left: 0;
+	position: absolute;
+	font-size: inherit;
+	margin: 0; /* FF puts margin */
+}
+
+/* Label */
+[ui5-label].ui5-radio-label {
+	display: flex;
+	align-items: center;
+	padding-inline-end: var(--_ui5_radio_button_label_offset);
+	vertical-align: top;
+	max-width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	pointer-events: none;
+	color: var(--_ui5_radio_button_label_color);
+}
+
+:host([wrapping-type="Normal"][text]) .ui5-radio-root {
+	height: auto;
+}
+
+:host([wrapping-type="Normal"][text]) [ui5-label].ui5-radio-label {
+	padding: var(--_ui5_radio_button_label_side_padding) 0;
+	word-break: break-all;
+}
+
+/* SVG */
+.ui5-radio-svg {
+	height: var(--_ui5_radio_button_svg_size);
+	width: var(--_ui5_radio_button_svg_size);
+	overflow: visible;
+	pointer-events: none;
+}
+
+.ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_outer_ring_bg);
+	stroke: currentColor;
+	stroke-width: var(--_ui5_radio_button_outer_ring_width);
+}
+
+.ui5-radio-svg-inner {
+	fill: none;
+	r: var(--_ui5_radio_button_inner_ring_radius);
+}
+
+.ui5-radio-svg-outer,
+.ui5-radio-svg-inner {
+	flex-shrink: 0;
+}
+
+/* ListItem Context */
+:host(.ui5-li-singlesel-radiobtn) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg-outer {
+	fill: var(--sapList_Background);
+}

package/src/themes/RangeSlider.css

@@ -0,0 +1,89 @@
+:host([ui5-range-slider]) .ui5-slider-progress-container::before {
+	background-color: var(--_ui5_slider_progress_container_dot_background);
+}
+
+/* Range Slider handles (Horizon implementatioon) */
+
+.ui5-slider-root:hover:active .ui5-slider-handle:not(:focus) {
+	background: var(--sapSlider_RangeHandleBackground);
+}
+
+.ui5-slider-root:active .ui5-slider-handle:active:focus,
+.ui5-slider-root:active .ui5-slider-handle:focus {
+	background: var(--_ui5_range_slider_handle_active_background);
+}
+
+.ui5-slider-root:active .ui5-slider-handle:active:focus [slider-icon],
+.ui5-slider-root:active .ui5-slider-handle:focus [slider-icon] {
+	display: var(--_ui5_range_slider_active_handle_icon_display);
+}
+
+:host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) {
+	background: var(--_ui5_range_slider_handle_active_background);
+	border: var(--_ui5_slider_handle_focus_border);
+	box-shadow: none;
+}
+
+:host([range-pressed]) .ui5-slider-progress:focus::after {
+	border: none;
+}
+
+:host([range-pressed]) .ui5-slider-handle [slider-icon] {
+	display: var(--_ui5_range_slider_active_handle_icon_display);
+}
+
+.ui5-slider-root:not(.ui5-slider-root-phone):focus .ui5-slider-inner .ui5-slider-handle,
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus {
+	background: var(--_ui5_range_slider_handle_background_focus);
+}
+
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus [slider-icon] {
+  display: none;
+}
+
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-progress:focus::before {
+	display: var(--_ui5_range_slider_legacy_progress_focus_display);
+	content: '';
+	position: absolute;
+	width: var(--_ui5_range_slider_focus_outline_width);
+	border: var(--_ui5_slider_progress_outline);
+	border-radius: var(--_ui5_range_slider_focus_outline_radius);
+	top: var(--_ui5_slider_progress_outline_offset);
+	height: var(--_ui5_slider_outer_height);
+	box-sizing: border-box;
+	left: var(--_ui5_slider_progress_outline_offset_left);
+}
+
+.ui5-slider-progress {
+  position: relative;
+}
+
+.ui5-slider-progress:focus::after {
+	border: 0.125rem solid var(--sapContent_FocusColor);
+	border-radius: 0.5rem;
+	content: "";
+	display: var(--_ui5_range_slider_progress_focus_display);
+	position: absolute;
+	top: var(--_ui5_range_slider_progress_focus_top);
+	left: var(--_ui5_range_slider_progress_focus_left);
+	padding: var(--_ui5_range_slider_progress_focus_padding);
+	width: var(--_ui5_range_slider_progress_focus_width);
+	height: var(--_ui5_range_slider_progress_focus_height);
+	box-sizing: border-box;
+}
+
+.ui5-slider-handle {
+	background: var(--_ui5_range_slider_handle_background);
+}
+
+.ui5-slider-root:hover .ui5-slider-handle:not(:focus) {
+	background: var(--_ui5_range_slider_root_hover_handle_bg);
+}
+
+.ui5-slider-root:hover .ui5-slider-handle:not(:focus) [slider-icon] {
+	display: var(--_ui5_range_slider_root_hover_handle_icon_display);
+}
+
+:host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) [slider-icon] {
+	display: var(--_ui5_range_slider_root_active_handle_icon_display);
+}

package/src/themes/RatingIndicator.css

@@ -0,0 +1,52 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	font-size: 1.5rem;
+	cursor: pointer;
+}
+
+:host([disabled]) {
+	opacity: .4;
+	cursor: initial;
+	outline: none;
+}
+
+:host([readonly]) {
+	cursor: initial;
+}
+
+:host([readonly]) .ui5-rating-indicator-icon.ui5-rating-indicator-readonly-unselected-icon {
+	color: var(--sapContent_UnratedColor);
+}
+
+:host([_focused]) {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_rating_indicator_border_radius);
+}
+
+.ui5-rating-indicator-root {
+	outline: none;
+}
+
+.ui5-rating-indicator-icon {
+	position: relative;
+	color: var(--sapContent_UnratedColor);
+	user-select: none;
+}
+
+.ui5-rating-indicator-icon.ui5-rating-indicator-active-icon {
+	color: var(--sapContent_RatedColor);
+}
+
+.ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before {
+	content: "\2605";
+	position: absolute;
+	top: 0;
+	width: 50%;
+	height: 100%;
+	color: var(--sapContent_RatedColor);
+	overflow: hidden;
+}
+
+.ui5-rating-indicator-stars-wrapper {
+	display: flex;
+}

package/src/themes/ResponsivePopover.css

@@ -0,0 +1,25 @@
+:host {
+	--_ui5_input_width: 100%;
+	min-width: 6.25rem;
+	min-height: 2rem;
+}
+
+:host([opened]) {
+	display: inline-block;
+}
+
+.ui5-responsive-popover-header {
+	height: var(--_ui5-responsive_popover_header_height);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width:100%;
+}
+
+.ui5-responsive-popover-header-text {
+	width: calc(100% - var(--_ui5_button_base_min_width));
+}
+
+.ui5-responsive-popover-header-no-title {
+	justify-content: flex-end;
+}

package/src/themes/ResponsivePopoverCommon.css

@@ -0,0 +1,208 @@
+/* styles for input in dialog */
+.input-root-phone {
+	flex: 1;
+	position: relative;
+	height: var(--_ui5_input_height);
+	color: var(--sapField_TextColor);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_input_background_color);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5_input_border_radius);
+	box-sizing: border-box;
+}
+
+.input-root-phone [inner-input] {
+	padding: 0 0.5rem;
+	width: 100%;
+	height: 100%;
+}
+
+.input-root-phone [inner-input]:focus {
+	background-color: var(--sapField_Focus_Background);
+}
+
+.input-root-phone:focus-within:before {
+	content: '';
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+
+}
+
+.input-root-phone [value-state="Error"] [input-icon][data-ui5-compact-size],
+.input-root-phone [value-state="Success"] [input-icon][data-ui5-compact-size],
+.input-root-phone [value-state="Warning"] [input-icon][data-ui5-compact-size] {
+	padding: .1875rem .5rem
+}
+
+[inner-input] {
+	background: transparent;
+	color: inherit;
+	border: none;
+	font-style: normal;
+	-webkit-appearance: none;
+	-moz-appearance: textfield;
+	line-height: normal;
+	padding: var(--_ui5_input_inner_padding);
+	box-sizing: border-box;
+	min-width: 3rem;
+	text-overflow: ellipsis;
+	flex: 1;
+	outline: none;
+	font-size: inherit;
+	font-family: inherit;
+	border-radius: var(--_ui5_input_border_radius);
+}
+
+[inner-input]::selection,
+[inner-input]::-moz-selection {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
+/* Input placeholder */
+[inner-input]::-webkit-input-placeholder {
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+[inner-input]::-moz-placeholder {
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+[inner-input]:-ms-input-placeholder {
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+.input-root-phone[value-state]:not([value-state="None"]) {
+	border-width: var(--_ui5_input_state_border_width);
+}
+
+.input-root-phone[value-state="Error"] [inner-input],
+.input-root-phone[value-state="Warning"] [inner-input] {
+	font-style: var(--_ui5_input_error_warning_font_style);
+}
+
+.input-root-phone[value-state="Error"] [inner-input] {
+	font-weight: var(--_ui5_input_error_font_weight);
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]) {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--_ui5_input_value_state_error_border_color);
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5_input_focused_value_state_error_background);
+	border-color: var(--_ui5_input_focused_value_state_error_border_color);
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]):focus-within:before {
+	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]):not([disabled]),
+.input-root-phone[value-state="Warning"]:not([readonly]):not([disabled]),
+.input-root-phone[value-state="Information"]:not([readonly]):not([disabled]) {
+	border-style: var(--_ui5_input_error_warning_border_style);
+}
+
+.input-root-phone[value-state="Warning"]:not([readonly]) {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
+	border-color: var(--_ui5_input_value_state_warning_border_color);
+}
+
+.input-root-phone[value-state="Warning"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5_input_focused_value_state_warning_background);
+	border-color: var(--_ui5_input_focused_value_state_warning_border_color);
+}
+
+.input-root-phone[value-state="Warning"]:not([readonly]):focus-within:before {
+	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+.input-root-phone[value-state="Success"]:not([readonly]) {
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapField_SuccessBackground);
+	border-color: var(--_ui5_input_value_state_success_border_color);
+	border-width: var(--_ui5_input_value_state_success_border_width);
+}
+
+.input-root-phone[value-state="Success"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5_input_focused_value_state_success_background);
+	border-color: var(--_ui5_input_focused_value_state_success_border_color);
+}
+
+.input-root-phone[value-state="Success"]:not([readonly]):focus-within:before {
+	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
+.input-root-phone[value-state="Information"]:not([readonly]) {
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapField_InformationBackground);
+	border-color: var(--_ui5_input_value_state_information_border_color);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+.input-root-phone[value-state="Information"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5_input_focused_value_state_information_background);
+	border-color: var(--_ui5_input_focused_value_state_information_border_color);
+}
+
+/* Remove IE's defaut clear button */
+[inner-input]::-ms-clear {
+	height: 0;
+	width: 0;
+}
+
+/* MultiComboBox & MultiInput specific */
+.ui5-multi-combobox-toggle-button {
+	margin-left: 0.5rem;
+}
+
+.ui5-responsive-popover-header {
+	width: 100%;
+	min-height: 2.5rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.ui5-responsive-popover-header-text {
+	width: calc(100% - var(--_ui5_button_base_min_width));
+}
+
+/* Header and footer layout */
+.ui5-responsive-popover-header .row {
+	box-sizing: border-box;
+	padding: 0.25rem 1rem;
+	min-height: 2.5rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapFontHeader5Size);
+}
+
+.ui5-responsive-popover-footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0.25rem 0;
+	width: 100%;
+}
+
+.ui5-responsive-popover-close-btn {
+	position: absolute;
+	right: 1rem;
+}
+