@ui5/webcomponents-fiori 1.3.1 → 1.6.0

package/src/themes/ShellBar.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
@@ -13,7 +15,7 @@
 	justify-content: space-between;
 	align-items: center;
 	background: var(--sapShellColor);
-	height: 2.75rem;
+	height: var(--_ui5_shellbar_root_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
@@ -26,14 +28,14 @@
 ::slotted([ui5-button][slot="startButton"]) {
 	height: 2.25rem;
 	padding: 0;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	border: none;
 	background: transparent;
 	outline-color: var(--_ui5_shellbar_logo_outline_color);
 	color: var(--sapShell_TextColor);
 	box-sizing: border-box;
 	cursor: pointer;
-	border-radius: 0.25rem;
+	border-radius: var(--_ui5_shellbar_button_border_radius);
 	position: relative;
 	font-size: 0.75rem;
 	font-weight: bold;
@@ -42,6 +44,10 @@
 	text-overflow: initial;
 }
 
+::slotted([ui5-button][slot="startButton"]) {
+	margin-inline-start: 0;
+}
+
 ::slotted([ui5-button][slot="startButton"]:hover),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
 .ui5-shellbar-button:hover,
@@ -64,6 +70,9 @@
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow {
+	border-top-color: var(--_ui5_shellbar_button_active_color);
+}
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
@@ -86,14 +95,16 @@ slot[name="profile"] {
 	border: none;
 }
 
-.ui5-shellbar-menu-button-title {
+.ui5-shellbar-menu-button-title,
+.ui5-shellbar-title {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	margin: 0;
-	font-size: 0.75rem;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	color: var(--sapShell_TextColor);
 	flex: auto;
 }
 
@@ -102,17 +113,8 @@ slot[name="profile"] {
 	justify-content: center;
 }
 
-:host(:not([primary-title])) .ui5-shellbar-menu-button span {
-	margin-left: 0;
-}
-
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button span {
-	margin-left: .5rem;
-}
-
 .ui5-shellbar-secondary-title {
 	display: inline-block;
-	margin: 0 0.5rem;
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapShell_TextColor);
 	line-height: 1rem;
@@ -124,7 +126,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
 	display: inline-block;
-	margin-left: 0.375rem;
+	margin-inline-start: 0.375rem;
 	width: 10px;
 	height: 10px;
 	width: 0px;
@@ -145,7 +147,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-overflow-container-middle {
 	align-self: center;
-	height: 2.5rem;
+	height: var(--_ui5_shellbar_overflow_container_middle_height);
 	width: 0;
 	flex-shrink: 0;
 }
@@ -154,64 +156,67 @@ slot[name="profile"] {
 	width: 3rem;
 }
 
-@keyframes Behind_layer {
-	0% {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes Top_layer {
-	0% {
-		transform: rotate(-360deg);
-	}
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-root {
-	padding: 0.25rem 1rem;
+	padding: 0 1rem;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0.25rem 1rem;
-}
-
-:host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
-	margin-right: 0;
+	padding: 0 1rem;
 }
 
 :host([breakpoint-size="M"]) .ui5-shellbar-root {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="L"]) .ui5-shellbar-root {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-root {
-	padding: 0.25rem 3rem;
+	padding: 0 3rem;
 }
 
 :host([breakpoint-size="XXL"]) .ui5-shellbar-root {
-	padding: 0.25rem 3rem;
+	padding: 0 3rem;
 }
 
 .ui5-shellbar-logo {
 	cursor: pointer;
 	max-height: 2rem;
+	overflow: hidden;
 }
 
 .ui5-shellbar-logo:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_outline_offset);
+	outline-offset: var(--_ui5_shellbar_logo_outline_offset);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-logo:hover {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
 .ui5-shellbar-button {
 	width: 2.5rem;
 }
 
+.ui5-shellbar-search-button {
+	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_search_button_border_radius);
+	--_ui5_shellbar_button_border_radius: var(--_ui5_shellbar_search_button_border_radius);
+	height: var(--_ui5_shellbar_search_button_size);
+	width: var(--_ui5_shellbar_search_button_size);
+	min-width: var(--_ui5_shellbar_search_button_size);
+}
+
 .ui5-shellbar-image-buttonImage {
 	border-radius: 50%;
 	width: 1.75rem;
@@ -231,13 +236,18 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-left {
+	padding: 0 0.125rem;
 	justify-content: flex-start;
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 	max-width: 75%;
 	flex-shrink: 0;
 	flex-grow: 0;
 }
 
+.ui5-shellbar-overflow-container-left > :nth-child(n) {
+	margin-inline-end: 0.5rem;
+}
+
 :host([show-co-pilot]) .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
 	max-width: calc(50% - 1.5rem);
@@ -252,24 +262,24 @@ slot[name="profile"] {
 	padding: 0.25rem 0.5rem;
 	cursor: text;
 	-webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
+	-moz-user-select: text;
 	user-select: text;
 }
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
 	-webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+	-moz-user-select: none;
 	user-select: none;
 	cursor: pointer;
+	border: var(--_ui5_shellbar_button_border);
 }
 
 :host(:not([with-logo])) .ui5-shellbar-menu-button {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-overflow-container-right {
+	padding: 0 0.125rem;
 	display: block;
 	overflow: hidden;
 	box-sizing: border-box;
@@ -283,12 +293,15 @@ slot[name="profile"] {
 }
 
 :host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
-	margin-left: 8rem;
+	margin-inline-start: 8rem;
 }
 
 .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
 	justify-content: flex-end;
+	height: inherit;
+	align-items: center;
+	float: var(--_ui5_shellbar_overflow_container_float);
 }
 
 .ui5-shellbar-overflow-button {
@@ -303,13 +316,8 @@ slot[name="profile"] {
 	display: none;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-logo + .ui5-shellbar-menu-button-title,
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button + .ui5-shellbar-menu-button-title {
-	display: none;
-}
-
 :host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-overflow-button-shown {
@@ -322,16 +330,17 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-coPilot {
+	height: 100%;
 	background-color: transparent;
 	cursor: pointer;
 }
 
 :host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
@@ -345,6 +354,7 @@ slot[name="profile"] {
 	height: 1rem;
 	min-width: 1rem;
 	background: var(--sapContent_BadgeBackground);
+	border: var(--_ui5_shellbar_button_badge_border);
 	color: var(--sapContent_BadgeTextColor);
 	top: 0.125rem;
 	left: 1.5rem;
@@ -368,13 +378,14 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-menu-button {
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 }
 
 .ui5-shellbar-search-field {
+	align-items: center;
 	flex-grow: 1;
 	min-width: 240px;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	max-width: 25rem;
 }
 
@@ -401,15 +412,20 @@ slot[name="profile"] {
 }
 
 ::slotted([ui5-input]) {
-	background-color: var(--sapShellColor);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-	color: var(--sapShell_TextColor);
-	height: 100%;
+	background: var(--_ui5_shellbar_search_field_background);
+	border: var(--_ui5_shellbar_search_field_border);
+	color: var(--_ui5_shellbar_search_field_color);
+	height: 2.25rem;
 	width: 100%;
 }
 
+::slotted([ui5-input]:hover) {
+	background: var(--_ui5_shellbar_search_field_background_hover);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+}
+
 ::slotted([ui5-input][focused]) {
-	outline: 1px dotted var(--sapContent_ContrastFocusColor);
+	outline: var(--_ui5_shellbar_search_field_outline_focused);
 }
 
 ::slotted([slot="logo"]) {
@@ -417,33 +433,15 @@ slot[name="profile"] {
 	pointer-events: none;
 }
 
-
-/**
-* IE styles
-*/
-[ui5-input][value-state]:not([readonly]) {
-	background: var(--sapShellColor);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-}
-
-[ui5-input][value-state]:not([readonly]):hover,
-[ui5-input]:not([value-state]):not([readonly]):hover {
-	background: var(--sapShell_Hover_Background);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-}
-
-[ui5-input][value-state]:not([value-state="None"])[focused] {
-	outline: 1px dotted var(--sapContent_ContrastFocusColor);
-}
-/* IE styles end */
-
 .ui5-shellbar-copilot-wrapper {
 	position: relative;
 	outline: none;
 	box-sizing: border-box;
+	height: 100%;
 }
 
 .ui5-shellbar-copilot-wrapper:hover {
+	border-radius: var(--sapButton_BorderCornerRadius);
 	background: var(--sapShell_Hover_Background);
 }
 
@@ -452,17 +450,26 @@ slot[name="profile"] {
 	background: var(--sapShell_Active_Background);
 }
 
+.ui5-shellbar-copilot-wrapper:hover::after,
 .ui5-shellbar-copilot-wrapper:focus::after {
 	content: "";
 	position: absolute;
-	height: calc(100% - 0.75rem);
-	border: var(--_ui5_shellbar_logo_outline);
-	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
+	left: var(--_ui5_shellbar_copilot_focus_offset);
+	right: var(--_ui5_shellbar_copilot_focus_offset);
+	top: var(--_ui5_shellbar_copilot_focus_offset);
+	bottom: var(--_ui5_shellbar_copilot_focus_offset);
+	outline: none;
 	pointer-events: none;
-	left: 0;
-	top: 0.25rem;
-	right: 0;
-	z-index: 1;
+	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
+}
+
+.ui5-shellbar-copilot-wrapper:hover::after {
+	background: transparent;
+	box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
+.ui5-shellbar-copilot-wrapper:focus::after {
+	border: var(--_ui5_shellbar_logo_outline);
 }
 
 .ui5-shellbar-co-pilot-placeholder {
@@ -494,41 +501,8 @@ slot[name="profile"] {
 	stop-opacity: 0.2;
 }
 
-:host [dir="rtl"] ::slotted([ui5-button][slot="startButton"]) {
-	margin-left: 0.5rem;
-	margin-right: 0;
-}
-
-:host [dir="rtl"] .ui5-shellbar-menu-button {
-	margin-right: 0.5rem;
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
-	margin-right: 0.375rem;
-	margin-left: 0;
-}
-
-:host(:not([show-search-field])) [dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-right: 8rem;
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
-	float: left;
-}
-
-:host([breakpoint-size="S"]) [dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-right: 0;
-}
-
 ::slotted([ui5-button][slot="startButton"]) {
-	margin-right: 0.5rem;
-	margin-left: 0;
+	margin-inline: 0 0.5rem;
 	justify-content: center;
 	align-items: center;
 }

package/src/themes/SideNavigation.css

@@ -2,39 +2,61 @@
     display: inline-block;
     width: 15rem;
     height: 100%;
-    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
     transition: width .25s;
-    --_ui5-tree-toggle-box-width: 1rem;
+    --_ui5-tree-toggle-box-width: var(--_ui5_side_navigation_icon_padding);
+    --_ui5_list_item_icon_size: var(--_ui5_side_navigation_icon_size);
+    --_ui5-tree-toggle-icon-size: var(--_ui5_side_navigation_toggle_icon_size);
+    --_ui5_list_item_title_size: var(--sapFontLargeSize);
+    --_ui5_list_item_icon_padding-inline-end: var(--_ui5_side_navigation_icon_padding);
+    --_ui5-tree-indent-step: var(--_ui5_side_navigation_indent_step);
 }
 
 :host([collapsed]) {
-    width: 3rem;
-    min-width: 3rem;
+    width: var(--_ui5_side_navigation_collapsed_state_width);
+}
+
+.ui5-sn-root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: var(--sapList_Background);
+    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
+    box-shadow: var(--sapContent_Shadow0);
+}
+
+.ui5-sn-items-tree {
+    overflow: auto;
 }
 
 .ui5-sn-bottom-content-border {
     width: 100%;
-    padding: 0 0.5rem;
+    padding: 0 1rem;
     margin: 0.25rem 0;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
 }
 
+:host([collapsed]) .ui5-sn-bottom-content-border {
+    padding: 0 0.5rem;
+}
+
 .ui5-sn-bottom-content-border > span {
-    width: 90%;
+    width: 100%;
     height: .125rem;
-    background: var(--sapList_GroupHeaderBorderColor);
+    background: var(--_ui5_side_navigation_separator_backgound);
 }
 
-.ui5-sn-root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background: var( --sapList_Background);
+.ui5-sn-spacer {
+    flex: 1;
+    min-height: 0;
 }
 
-.ui5-sn-spacer {
-    flex: auto;
-    min-height: 3rem;
+[ui5-tree]::part(toggle-icon) {
+    color: var(--sapContent_NonInteractiveIconColor);
+}
+
+[ui5-tree]::part(icon) {
+    color: var(--_ui5_side_navigation_icon_color);
 }

package/src/themes/SideNavigationPopover.css

@@ -1,13 +1,3 @@
-.ui5-side-navigation-popover [ui5-li][focused]:first-child::part(native-li)::after {
-	border-top-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-top-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
-
-.ui5-side-navigation-popover [ui5-li][focused]:last-child::part(native-li)::after {
-	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
-
 .ui5-side-navigation-popover::part(content) {
 	padding: 0;
 }

package/src/themes/TimelineItem.css

@@ -80,8 +80,8 @@
 	border: 1px solid var(--sapContent_NonInteractiveIconColor);
 	background-color: var(--sapContent_NonInteractiveIconColor);
 	border-radius: 50%;
-	width: .4375rem;
-	height: .4375rem;
+	width: 0.375rem;
+	height: 0.375rem;
 	position: absolute;
 	top: 0.9375rem;
 	left: 50%;
@@ -131,13 +131,13 @@
 
 .ui5-tli-bubble {
 	background: var(--sapGroup_ContentBackground);
-	border: 1px solid var(--sapList_BorderColor);
+	border: 1px solid var(--_ui5_TimelineItem_bubble_border_color);
 	box-sizing: border-box;
-	border-radius: 0.25rem;
+	border-radius: var(--_ui5_TimelineItem_bubble_border_radius);
 	flex: 1;
 	position: relative;
 	margin-left: .5rem;
-	padding: var(--_ui5_tl_bubble_padding);
+	padding: var(--_ui5_TimelineItem_bubble_content_padding);
 }
 
 :host([layout="Horizontal"]) .ui5-tli-bubble {
@@ -152,7 +152,7 @@
 .ui5-tli-bubble:focus::after {
 	content: "";
     border: var(--_ui5_TimelineItem_bubble_border_width) var(--_ui5_TimelineItem_bubble_border_style) var(--sapContent_FocusColor);
-    border-radius: var(--_ui5_TimelineItem_bubble_border_radius);
+    border-radius: var(--_ui5_TimelineItem_bubble_focus_border_radius);
 	position: absolute;
 	top: var(--_ui5_TimelineItem_bubble_border_top);
 	right: var(--_ui5_TimelineItem_bubble_border_right);
@@ -162,8 +162,8 @@
 }
 
 :host([layout="Horizontal"]) .ui5-tli-bubble:focus::after {
-	top: -0.625rem;
-	left: -0.125rem;
+	top: var(--_ui5_TimelineItem_horizontal_bubble_focus_top_offset);
+	left: var(--_ui5_TimelineItem_horizontal_bubble_focus_left_offset);
 }
 
 .ui5-tli-bubble-arrow {
@@ -179,7 +179,7 @@
 .ui5-tli-bubble-arrow::before {
 	content: "";
 	background: var(--sapGroup_ContentBackground);
-	border: 1px solid var(--sapList_BorderColor);
+	border: 1px solid var(--_ui5_TimelineItem_bubble_border_color);
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -216,29 +216,28 @@
 .ui5-tli-title,
 .ui5-tli-desc {
 	color: var(--sapTextColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-weight: 400;
 	font-size: var(--sapFontSize);
 }
 
 .ui5-tli-title span {
 	display: inline-block;
-	vertical-align: top;
 }
 
 .ui5-tli-subtitle {
 	color: var(--sapContent_LabelColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-weight: 400;
 	font-size: var(--sapFontSmallSize);
-	padding-top: .375rem;
+	padding-top: var(--_ui5_TimelineItem_bubble_content_subtitle_padding_top);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .ui5-tli-desc {
-	padding-top: .75rem;
+	padding-top: var(--_ui5_TimelineItem_bubble_content_description_padding_top);
 }
 
 [dir=rtl] .ui5-tli-bubble-arrow--left {