package.src.themes.MessageStrip.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of webcomponents Show documentation
UI5 Web Components: webcomponents.main
The newest version!
@import "./InvisibleTextStyles.css";

:host(:not([hidden])) {
	display: inline-block;
	width: 100%;
}

/** Root classes **/
.ui5-message-strip-root {
	width: 100%;
	height: 100%;
	display: flex;
	border-radius: var(--sapPopover_BorderCornerRadius);
	padding: var(--_ui5_message_strip_padding);
	border-width: var(--_ui5_message_strip_border_width);
	border-style: solid;
	box-sizing: border-box;
	position: relative;
}

.ui5-message-strip-root-hide-icon {
	padding-inline: var(--_ui5_message_strip_padding_inline_no_icon);
	padding-block: var(--_ui5_message_strip_padding_block_no_icon);
}

.ui5-message-strip-root-hide-close-button {
	padding-inline-end: 1rem;
}

.ui5-message-strip-root--info {
	background-color: var(--sapInformationBackground);
	border-color: var(--sapMessage_InformationBorderColor);
	color: var(--sapTextColor);
}

.ui5-message-strip-root--info .ui5-message-strip-icon {
	color: var(--sapInformativeElementColor);
}

.ui5-message-strip-root--positive {
	background-color: var(--sapSuccessBackground);
	border-color: var(--sapMessage_SuccessBorderColor);
}

.ui5-message-strip-root--positive .ui5-message-strip-icon {
	color: var(--sapPositiveElementColor);
}

.ui5-message-strip-root--negative {
	background-color: var(--sapErrorBackground);
	border-color: var(--sapMessage_ErrorBorderColor);
}

.ui5-message-strip-root--negative .ui5-message-strip-icon {
	color: var(--sapNegativeElementColor);
}

.ui5-message-strip-root--critical {
	background-color: var(--sapWarningBackground);
	border-color: var(--sapMessage_WarningBorderColor);
}

.ui5-message-strip-root--critical .ui5-message-strip-icon {
	color: var(--sapCriticalElementColor);
}

/** Icon wrapper **/
.ui5-message-strip-icon-wrapper {
	position: absolute;
	top: var(--_ui5_message_strip_icon_top);
	inset-inline-start: 0.75rem;
	box-sizing: border-box;
}

/** Text **/
.ui5-message-strip-text {
	width: 100%;
	color: var(--sapTextColor);
	line-height: 1.2;
	font-family: "72override", var(--sapFontFamily);
	font-size: var(--sapFontSize);
}

/** Close button - always in compact mode **/
.ui5-message-strip-close-button {
	height: 1.625rem;
	min-height: 1.625rem;
	position: absolute;
	top: var(--_ui5_message_strip_close_button_top);
	inset-inline-end: var(--_ui5_message_strip_close_button_right);
}

:host([color-scheme="1"]) .ui5-message-strip-root--color-set-1,
:host(:not([color-scheme])[design="ColorSet1"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_1_Background);
	border-color: var(--sapIndicationColor_1_BorderColor);
}

:host([color-scheme="2"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_2_Background);
	border-color: var(--sapIndicationColor_2_BorderColor);
}

:host([color-scheme="3"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_3_Background);
	border-color: var(--sapIndicationColor_3_BorderColor);
}

:host([color-scheme="4"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_4_Background);
	border-color: var(--sapIndicationColor_4_BorderColor);
}

:host([color-scheme="5"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_5_Background);
	border-color: var(--sapIndicationColor_5_BorderColor);
}

:host([color-scheme="6"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_6_Background);
	border-color: var(--sapIndicationColor_6_BorderColor);
}

:host([color-scheme="7"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_7_Background);
	border-color: var(--sapIndicationColor_7_BorderColor);
}

:host([color-scheme="8"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_8_Background);
	border-color: var(--sapIndicationColor_8_BorderColor);
}

:host([color-scheme="9"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_9_Background);
	border-color: var(--sapIndicationColor_9_BorderColor);
}

:host([color-scheme="10"]) .ui5-message-strip-root--color-set-1 {
	background-color: var(--sapIndicationColor_10_Background);
	border-color: var(--sapIndicationColor_10_BorderColor);
}

:host([color-scheme="1"]) .ui5-message-strip-root--color-set-2,
:host(:not([color-scheme])[design="ColorSet2"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_1_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_1_set_2_border_color)
}

:host([color-scheme="2"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_2_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_2_set_2_border_color);
}

:host([color-scheme="3"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_3_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_3_set_2_border_color);
}

:host([color-scheme="4"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_4_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_4_set_2_border_color);
}

:host([color-scheme="5"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_5_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_5_set_2_border_color);
}

:host([color-scheme="6"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_6_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_6_set_2_border_color);
}

:host([color-scheme="7"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_7_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_7_set_2_border_color);
}

:host([color-scheme="8"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_8_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_8_set_2_border_color);
}

:host([color-scheme="9"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_9_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_9_set_2_border_color);
}

:host([color-scheme="10"]) .ui5-message-strip-root--color-set-2 {
	background-color: var(--_ui5_message_strip_scheme_10_set_2_background);
	border-color: var(--_ui5_message_strip_scheme_10_set_2_border_color);
}

:host([design="ColorSet1"]) .ui5-message-strip-root .ui5-message-strip-text {
	color: var(--sapContent_ContrastTextColor);
	text-shadow: var(--sapContent_ContrastTextShadow);
}

:host([design="ColorSet1"]) .ui5-message-strip-root ::slotted([slot="icon"]){
	color: var(--sapContent_ContrastIconColor);
	text-shadow: var(--sapContent_ContrastTextShadow);
}

:host([design="ColorSet2"]) .ui5-message-strip-root .ui5-message-strip-text {
	color: var(--sapTextColor);
}

:host([design="ColorSet1"]) .ui5-message-strip-close-button {
	color: var(--_ui5_message_strip_close_button_color_set_1_color);
}

:host([design="ColorSet2"]) .ui5-message-strip-close-button,
:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) { 
	color: var(--sapContent_IconColor);
}

:host([design="ColorSet1"]) .ui5-message-strip-close-button:hover {
	border-color: var(--sapContent_ContrastIconColor);
	background-color: var(--_ui5_message_strip_close_button_color_set_1_background);
	color: var(--_ui5_message_strip_close_button_color_set_1_hover_color);
	text-shadow: var(--sapContent_ContrastTextShadow);
}

:host([design="ColorSet2"]) .ui5-message-strip-close-button:hover {
	background-color: var(--_ui5_message_strip_close_button_color_set_2_background);
	border-color: var(--sapContent_IconColor);
	color: var(--sapContent_IconColor);
}

:host([design="ColorSet1"]) .ui5-message-strip-close-button:active {
	background: none;
	border-color: var(--sapContent_ContrastIconColor);
}

:host([design="ColorSet2"]) .ui5-message-strip-close-button:active {
	background: none;
	border-color: var(--sapContent_IconColor);
}

:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):after,
:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):before {
	border-color: var(--sapContent_ContrastFocusColor);
}