@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/src/themes/ToggleButton.css

@@ -0,0 +1,128 @@
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+/* this line is also included from the Button.css, but keep it here in case we start using it for automatic IE11 compilation */
+:host([disabled]) {
+	pointer-events: none;
+}
+
+:host([pressed]),
+:host([design="Default"][pressed]),
+:host([design="Transparent"][pressed]),
+:host([design="Emphasized"][pressed]) {
+	background: var(--sapButton_Selected_Background);
+	border-color: var(--sapButton_Selected_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+:host([pressed]:hover),
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Default"][pressed]:hover),
+:host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Transparent"][pressed]:hover),
+:host([design="Transparent"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Emphasized"][pressed]:hover),
+:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Selected_Hover_Background);
+	border-color: var(--sapButton_Selected_Hover_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+	box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
+:host([active][focused]),
+:host([design="Default"][active][focused]),
+:host([design="Transparent"][active][focused]),
+:host([design="Emphasized"][active][focused]) {
+	background: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+	box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Transparent"][pressed]:not([active]):not([non-interactive]):not([_is-touch])),
+:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Selected_Background);
+	border-color: var(--sapButton_Selected_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+:host([design="Negative"][pressed]) {
+	background: var(--sapButton_Reject_Selected_Background);
+	border-color: var(--sapButton_Reject_Selected_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+}
+
+:host([design="Negative"][active][focused]) {
+	background: var(--sapButton_Reject_Active_Background);
+	border-color: var(--sapButton_Reject_Active_BorderColor);
+	color: var(--sapButton_Reject_Active_TextColor);
+}
+
+:host([design="Negative"][pressed][active]:hover),
+:host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Reject_Selected_Hover_Background);
+	border-color: var(--sapButton_Reject_Selected_Hover_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+	box-shadow: var(--sapContent_Negative_Shadow);
+}
+
+:host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Reject_Selected_Background);
+	border-color: var(--sapButton_Reject_Selected_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+}
+
+:host([design="Positive"][pressed]) {
+	background: var(--sapButton_Accept_Selected_Background);
+	border-color: var(--sapButton_Accept_Selected_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
+}
+
+:host([design="Positive"][active][focused]) {
+	background: var(--sapButton_Accept_Active_Background);
+	border-color: var(--sapButton_Accept_Active_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
+}
+
+:host([design="Positive"][pressed][active]:hover),
+:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Accept_Selected_Hover_Background);
+	border-color: var(--sapButton_Accept_Selected_Hover_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
+	box-shadow: var(--sapContent_Positive_Shadow);
+}
+
+:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Accept_Selected_Background);
+	border-color: var(--sapButton_Accept_Selected_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
+}
+
+:host([design="Attention"][pressed]) {
+	background: var(--sapButton_Attention_Selected_Background);
+	border-color: var(--sapButton_Attention_Selected_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
+}
+
+:host([design="Attention"][active][focused]) {
+	background: var(--sapButton_Attention_Active_Background);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
+	color: var(--sapButton_Attention_Active_TextColor);
+}
+
+:host([design="Attention"][pressed][active]:hover),
+:host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Attention_Selected_Hover_Background);
+	border-color: var(--sapButton_Attention_Selected_Hover_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
+	box-shadow: var(--sapContent_Critical_Shadow);
+}
+
+:host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
+	background: var(--sapButton_Attention_Selected_Background);
+	border-color: var(--sapButton_Attention_Selected_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
+}

package/src/themes/ToggleButton.ie11.css

@@ -0,0 +1,48 @@
+[ui5-toggle-button][focused] {
+    outline: none;
+}
+
+[ui5-toggle-button][focused] .ui5-button-root {
+    position: relative;
+}
+
+[ui5-toggle-button][focused] .ui5-button-root::after {
+    content: "";
+    position: absolute;
+    border-width: 1px;
+    border-style: dotted;
+    border-color: var(--_ui5_button_focus_color);
+    top: var(--_ui5_button_focus_offset);
+    bottom: var(--_ui5_button_focus_offset);
+    left: var(--_ui5_button_focus_offset);
+    right: var(--_ui5_button_focus_offset);
+}
+
+[ui5-toggle-button][active] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button][design="Positive"][focused] .ui5-button-root::after {
+    border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+[ui5-toggle-button][design="Positive"][active][focused] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button][design="Negative"][focused] .ui5-button-root::after {
+    border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+[ui5-toggle-button][design="Negative"][active][focused] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button][design="Emphasized"][focused] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button] [ui5-icon].ui5-button-icon {
+    height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/
+    top: 0;
+}

package/src/themes/Token.css

@@ -0,0 +1,108 @@
+:host {
+	display: inline-block;
+	background: var(--_ui5_token_background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
+	border-radius: var(--_ui5_token_border_radius);
+	color: var(--_ui5_token_text_color);
+	height: var(--_ui5_token_height);
+	box-sizing: border-box;
+	margin-top: var(--_ui5_token_top_margin);
+	margin-bottom: var(--_ui5_token_bottom_margin);
+	margin-inline-end: var(--_ui5_token_right_margin);
+	position: relative;
+}
+
+:host([overflows]) {
+	display: none;
+}
+
+:host(:not([readonly]):hover) {
+	background: var(--_ui5_token_hover_background);
+	border-color: var(--_ui5_token_hover_border_color);
+	box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
+:host([selected]:not([readonly]):not([focused])) {
+	color: var(--sapButton_Selected_TextColor);
+	background: var(--sapButton_Selected_Background);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
+}
+
+:host([selected]:not([readonly]):hover) {
+	background: var(--_ui5_token_selected_hover_background);
+	border-color: var(--_ui5_token_selected_hover_border_color);
+	box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
+:host([readonly]) {
+	background: var(--_ui5_token_readonly_background);
+	color: var(--_ui5_token_readonly_color);
+}
+
+:host([readonly]) .ui5-token--wrapper {
+	padding: 0 var(--_ui5_token_readonly_padding);
+}
+
+:host([selected]) .ui5-token--wrapper:focus {
+	outline: var(--_ui5_token_selected_focus_outline);
+}
+
+:host([focused][selected]:not([readonly])) {
+	background: var(--sapButton_Selected_Background);
+	color: var(--sapButton_Selected_TextColor);
+	border: var(--_ui5_token_focused_selected_border);
+}
+
+.ui5-token--wrapper {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	cursor: default;
+	padding-inline-start: var(--_ui5_token_left_padding);
+	box-sizing: border-box;
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	user-select: none;
+}
+
+.ui5-token--wrapper:focus {
+	outline-offset: var(--_ui5_token_outline_offset);
+	outline: var(--_ui5_token_focus_outline);
+}
+
+.ui5-token--wrapper:focus::after {
+	content: var(--ui5_token_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_token_focus_outline_border_radius);
+	top: var(--_ui5_token_focus_offset);
+	bottom: var(--_ui5_token_focus_offset);
+	left: var(--_ui5_token_focus_offset);
+	right: var(--_ui5_token_focus_offset);
+}
+
+.ui5-token--text {
+	white-space: nowrap;
+}
+
+.ui5-token--icon {
+	display: flex;
+}
+
+:host([selected]) .ui5-token--icon > [ui5-icon],
+:host([selected]) ::slotted([ui5-icon]) {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-token--icon > [ui5-icon],
+::slotted([ui5-icon]) {
+	color: inherit;
+	cursor: pointer;
+	width: var(--_ui5_token_icon_size);
+	height: var(--_ui5_token_icon_size);
+	padding: var(--_ui5_token_icon_padding);
+	color: var(--sapContent_IconColor);
+}

package/src/themes/Tokenizer.css

@@ -0,0 +1,68 @@
+:host {
+	display: inline-block;
+	box-sizing: border-box;
+	border: 1px solid black;
+	height: 2.25rem;
+}
+
+.ui5-hidden-text {
+	width: 1px;
+	overflow: hidden;
+	color: transparent;
+}
+
+.ui5-tokenizer-root {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	overflow-x: scroll;
+	box-sizing: border-box;
+	font-family: "72override", var(--sapFontFamily);
+}
+
+.ui5-tokenizer-no-padding {
+	padding: 0;
+}
+
+.ui5-tokenizer-root.ui5-tokenizer-nmore--wrapper {
+	overflow: hidden;
+}
+
+.ui5-tokenizer--token--wrapper {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+	height: 100%;
+}
+
+:host([expanded]) .ui5-tokenizer--content {
+	display: inline-block;
+	white-space: nowrap;
+}
+
+.ui5-tokenizer--content {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	overflow: auto;
+	padding-inline-start: var(--_ui5_tokenizer_padding);
+}
+
+.ui5-tokenizer--content.ui5-tokenizer-nmore--content {
+	overflow: hidden;
+}
+
+.ui5-tokenizer-more-text {
+	display: inline-block;
+	margin-inline-start: .25rem;
+	cursor: pointer;
+	white-space: nowrap;
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+	color: var(--sapField_TextColor);
+}
+
+:host([expanded]) .ui5-tokenizer--content {
+	overflow: hidden;
+	justify-content: flex-end;
+}

package/src/themes/TokenizerPopover.css

@@ -0,0 +1,4 @@
+[ui5-responsive-popover]::part(header),
+[ui5-responsive-popover]::part(content) {
+	padding: 0;
+}

package/src/themes/Tree.css

@@ -0,0 +1,11 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+}
+
+.ui5-tree-root {
+	height: 100%;
+	width: 100%;
+}

package/src/themes/TreeListItem.css

@@ -0,0 +1,101 @@
+@import "./InvisibleTextStyles.css";
+:host(:not([hidden])) {
+	display: block;
+	position: relative;
+}
+
+:host([_minimal]) .ui5-li-tree-toggle-box {
+	width: 0;
+	min-width: 0;
+}
+
+:host([_minimal]) .ui5-li-icon {
+	padding: 0;
+}
+
+:host([_minimal]) .ui5-li-content {
+	justify-content: center;
+}
+
+:host([_minimal]) .ui5-li-root-tree {
+	padding: 0;
+}
+
+:host([_minimal][show-toggle-button])::after {
+	content: "";
+	width: 0;
+	height: 0;
+	border-left: 0.375rem solid transparent;
+	border-bottom: .375rem solid var(--sapContent_NonInteractiveIconColor);
+	position: absolute;
+	right: 0.1875rem;
+	bottom: 0.125rem;
+}
+
+:host([_minimal]) .ui5-li-tree-text-wrapper {
+	display: none;
+}
+
+.ui5-li-root-tree {
+	padding-inline-start: 0;
+}
+
+:host(:not([level="1"])) {
+	border-color: var(--sapList_AlternatingBackground);
+}
+
+:host([_toggle-button-end][selected]:not([level="1"])) {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover, :host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([selected])) .ui5-li-root-tree:hover {
+	background: var(--sapList_Hover_Background);
+	cursor: pointer;
+}
+
+:host(:not([level="1"]):not([selected])) .ui5-li-root-tree {
+	background: var(--sapList_AlternatingBackground);
+}
+
+:host([_toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
+	background: var(--ui5-listitem-background-color);
+}
+
+:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
+	background: var(--sapList_SelectionBackgroundColor);
+}
+
+:host([_mode]:not([_mode="None"]):not([_mode="Delete"])[selected]) .ui5-li-root-tree:hover {
+	background-color: var(--sapList_Hover_SelectionBackground);
+	cursor: pointer;
+}
+
+.ui5-li-tree-toggle-box {
+	min-width: var(--_ui5-tree-toggle-box-width);
+	min-height: var(--_ui5-tree-toggle-box-height);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.ui5-li-tree-toggle-icon {
+	width: var(--_ui5-tree-toggle-icon-size);
+	height: var(--_ui5-tree-toggle-icon-size);
+	color: var(--sapContent_IconColor);
+	cursor: pointer;
+}
+
+:host([actionable]) .ui5-li-tree-toggle-icon {
+	color: var(--sapButton_TextColor);
+}
+
+:host([active][actionable]) .ui5-li-tree-toggle-icon {
+	color: var(--sapList_Active_TextColor);
+}
+
+.ui5-li-tree-text-wrapper {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}

package/src/themes/ValueStateMessage.css

@@ -0,0 +1,83 @@
+.ui5-valuestatemessage-popover {
+	box-shadow: var(--_ui5_value_state_message_popover_box_shadow);
+}
+
+.ui5-input-value-state-message-icon {
+	width: var(--_ui5_value_state_message_icon_width);
+	height: var(--_ui5_value_state_message_icon_height);
+	display: var(--_ui5_input_value_state_icon_display);
+	position: absolute;
+	padding-right: 0.375rem;
+}
+
+.ui5-valuestatemessage-root .ui5-input-value-state-message-icon {
+	left: var(--_ui5_input_value_state_icon_offset);
+}
+
+.ui5-input-value-state-message-icon[name="error"] {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="alert"] {
+	color: var(--sapCriticalElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="success"] {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="information"] {
+	color: var(--sapInformativeElementColor);
+}
+
+.ui5-valuestatemessage-root {
+	box-sizing: border-box;
+	display: inline-block;
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	height: auto;
+	padding: var(--_ui5_value_state_message_padding);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 6.25rem;
+	border: var(--_ui5_value_state_message_border);
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage-header {
+	min-height: 2rem;
+	padding: var(--_ui5_value_state_header_padding);
+	border: var(--_ui5_value_state_header_border);
+	border-bottom: var(--_ui5_value_state_header_border_bottom);
+}
+
+.ui5-valuestatemessage--success {
+	background: var(--sapSuccessBackground);
+}
+
+.ui5-valuestatemessage--warning {
+	background: var(--sapWarningBackground);
+}
+
+.ui5-valuestatemessage--error {
+	background: var(--sapErrorBackground);
+}
+
+.ui5-valuestatemessage--information {
+	background: var(--sapInformationBackground);
+}
+
+.ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
+	outline-offset: var(--_ui5_value_state_header_offset);
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+}
+
+.ui5-valuestatemessage-popover::part(header),
+.ui5-valuestatemessage-popover::part(content) {
+	padding: 0;
+}
+
+.ui5-valuestatemessage-popover::part(header),
+.ui5-valuestatemessage-popover::part(footer) {
+	min-height: 0;
+}