@ui5/webcomponents-fiori 1.3.1 → 1.6.0

package/src/themes/MediaGallery.css

@@ -1,158 +1,153 @@
 :host {
-    height:100%;
+	height:100%;
 }
 
 :host,
 .ui5-media-gallery-display-wrapper,
 .ui5-media-gallery-display {
-    width: 100%;
+	width: 100%;
 }
 
 .ui5-media-gallery-root {
-    width: inherit;
-    height: inherit;
-    background: var(--sapBaseColor);
-    display: flex;
-    flex-direction: column;
-    position: relative;
+	width: inherit;
+	height: inherit;
+	background: var(--sapBaseColor);
+	display: flex;
+	flex-direction: column;
+	position: relative;
 }
 
 :host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
-    flex-direction: column-reverse;
+	flex-direction: column-reverse;
 }
 
-:host([effective-layout="Horizontal"]) .ui5-media-gallery-root,
-:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root[dir="rtl"] {
-    flex-direction: row-reverse;
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-root {
+	flex-direction: row-reverse;
 }
 
-:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root,
-:host([effective-layout="Horizontal"]) .ui5-media-gallery-root[dir="rtl"] {
-    flex-direction: row;
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root {
+	flex-direction: row;
 }
 
 /* DISPLAY */
 
 .ui5-media-gallery-display-wrapper {
-    display: flex;
-    justify-content: center;
-    position: relative;
+	display: flex;
+	justify-content: center;
+	position: relative;
 }
 
 /* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
 :host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
-    flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
-    flex-basis: 0;
+	flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
+	flex-basis: 0;
 }
 
 .ui5-media-gallery-display {
-    position:relative;
-    margin: 1rem;
-    display: flex;
-    justify-content: center;
+	position:relative;
+	margin: 1rem;
+	display: flex;
+	justify-content: center;
 }
 
 .ui5-media-gallery-display [ui5-media-gallery-item] {
-    z-index: 1;
+	z-index: 1;
 }
 
 /* mobile platform */
 [ui5-carousel] {
-    width: calc(100% - 2rem);
+	width: calc(100% - 2rem);
 }
 [ui5-carousel]::part(item) {
-    padding: 0;
-    overflow: hidden;
+	padding: 0;
+	overflow: hidden;
 }
 
 /* THUMBNAILS */
 .ui5-media-gallery-thumbnails-wrapper {
-    margin: 1rem 0 0 0;
+	margin-block: 1rem 0;
 }
 :host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
-    margin: 0 0 1rem 0;
+	margin-block: 0 1rem;
 }
 :host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
-    margin: 0 1rem 0 0;
+	margin-inline: 0 1rem;
 }
 :host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
-    margin: 0 0 0 1rem;
-}
-:host(:not([effective-layout="Horizontal"])) [dir="rtl"] .ui5-media-gallery-thumbnails-wrapper {
-    margin-right: 1rem;
+	margin-inline: 1rem 0;
 }
 
 /* show all thumbnails in a single scrollable row */
 :host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
-    overflow-x: auto;
-    overflow-y: hidden;
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 /* show all thumbnails in a scrollable area with multiple columns */
 :host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
-    overflow-y: auto;
-    overflow-x: hidden;
-    flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
-    flex-basis: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
+	flex-basis: 0;
 }
 
 .ui5-media-gallery-thumbnails-wrapper ul {
-    height: 5rem;
-    display: flex;
-    flex-wrap: nowrap;
-    padding-left: 0; /* disable browser default css */
-    margin-top: 0; /* disable browser default css */
-    margin-bottom: 0; /* disable browser default css */
-    list-style-type: none; /* disable browser default css */
-    padding-inline-start: 0; /* disable browser default css */
+	height: 5rem;
+	display: flex;
+	flex-wrap: nowrap;
+	padding-left: 0; /* disable browser default css */
+	margin-top: 0; /* disable browser default css */
+	margin-bottom: 0; /* disable browser default css */
+	list-style-type: none; /* disable browser default css */
+	padding-inline-start: 0; /* disable browser default css */
 }
 
 /* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
 :host([effective-layout="Horizontal"]) ul {
-    width: 5rem;
-    flex-wrap: wrap;
+	width: 5rem;
+	flex-wrap: wrap;
 }
 /* two columns on M-size */
 :host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
-    width: 10rem;
+	width: 10rem;
 }
 /* three columns on L-size */
 :host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
-    width: 15rem;
+	width: 15rem;
 }
 /* four columns on XL-size */
 :host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
-    width: 20rem;
+	width: 20rem;
 }
 
 .ui5-media-gallery-thumbnail,
 .ui5-media-gallery-overflow [ui5-button] {
-    width: 4rem;
-    height: 4rem;
-    flex-shrink: 0;
+	width: 4rem;
+	height: 4rem;
+	flex-shrink: 0;
 }
 
 .ui5-media-gallery-overflow [ui5-button] {
-    background: var(--_ui5_media_gallery_overflow_btn_background);
-    color: var(--_ui5_media_gallery_overflow_btn_color);
-    border: var(--_ui5_media_gallery_overflow_btn_border);
+	background: var(--_ui5_media_gallery_overflow_btn_background);
+	color: var(--_ui5_media_gallery_overflow_btn_color);
+	border: var(--_ui5_media_gallery_overflow_btn_border);
 }
 
 .ui5-media-gallery-thumbnail,
 .ui5-media-gallery-overflow {
-    margin: 0 0 0 1rem;
+	margin: 0 0 0 1rem;
 }
 
 :host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
 :host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
-    margin: 1rem 0 0 1rem;
+	margin: 1rem 0 0 1rem;
 }
 
 :host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
 :host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
-    margin: 1rem 0 0 1rem;
+	margin: 1rem 0 0 1rem;
 }
 
 :host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
 :host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
-    margin: 1rem 1rem 0 0;
+	margin: 1rem 1rem 0 0;
 }

package/src/themes/MediaGalleryItem.css

@@ -1,131 +1,130 @@
-:host {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-}
-
-:host([_square]) {
-    height: 0;
-    padding-top: 100%;
-}
-
-.ui5-media-gallery-item-root {
-    width: 100%;
-    height: 100%;
-    display: flex;
-}
-
-:host([_square]) .ui5-media-gallery-item-root {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-:host([layout="Wide"]) .ui5-media-gallery-item-root {
-    align-items: center;
-}
-
-:host([_thumbnail-design]) .ui5-media-gallery-item-root {
-    border: var(--_ui5_media_gallery_thumbnail_border);
-    box-sizing: border-box;
-}
-
-:host([_interactive]) .ui5-media-gallery-item-root {
-    cursor: pointer;
-}
-
-/* hover */
-:host([_thumbnail-design]:not([disabled]):not([selected])) .ui5-media-gallery-item-root:hover {
-    border-color: var(--sapTile_Interactive_BorderColor);
-    background: var(--sapList_Hover_Background);
-}
-
-/* focused */
-:host([focused]) .ui5-media-gallery-item-root {
-	outline: var(--_ui5_media_gallery_thumbnail_focus_outline);
-	outline-offset: -1px;
-}
-
-/* selected */
-:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root {
-    border: var(--_ui5_media_gallery_thumbnail_selected_border);
-}
-
-/* selected focused */
-:host([_thumbnail-design][focused][selected]) .ui5-media-gallery-item-root {
-    outline-offset: -3px;
-}
-
-.ui5-media-gallery-item-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-:host([layout="Wide"]) .ui5-media-gallery-item-wrapper {
-    z-index: 1;
-}
-
-:host([layout="Wide"]:not([_thumbnail-design])) .ui5-media-gallery-item-wrapper {
-    height: calc(100% / 16 * 9);
-}
-
-/* resource not found icon */
-[ui5-icon] {
-    position: absolute;
-    width: 4.5rem;
-    height: 4.55rem;
-    align-self: center;
-}
-
-.ui5-media-gallery-item-mask-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-:host(:not([_thumbnail-design])) .ui5-media-gallery-item-mask-layer {
-    z-index: 2;
-    background: var(--sapBaseColor);
-    mix-blend-mode: multiply;
-    opacity: 0.2;
-    box-shadow: var(--_ui5_media_gallery_item_overlay_box_shadow);
-    pointer-events: none;
-}
-
-:host(:not([_thumbnail-design])[layout="Wide"]) .ui5-media-gallery-item-mask-layer {
-    z-index: 0;
-}
-
-/* disabled state */
-:host([disabled]) .ui5-media-gallery-item-mask-layer {
-    z-index: 2;
-    background: var(--sapContent_ImagePlaceholderBackground);
-    opacity: 0.5;
-    cursor: default;
-}
-
-/* stretch the slotted thumbnails and videos */
-::slotted([slot^=thumbnail]),
-:host([layout="Wide"]) ::slotted(*) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-/* fit the slotted images within the host container,
-preserving their proportions */
-::slotted(*) {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    margin: auto;
-}
+:host {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+}
+
+:host([_square]) {
+    height: 0;
+    padding-top: 100%;
+}
+
+.ui5-media-gallery-item-root {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+:host([_square]) .ui5-media-gallery-item-root {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+:host([layout="Wide"]) .ui5-media-gallery-item-root {
+    align-items: center;
+}
+
+:host([_thumbnail-design]) .ui5-media-gallery-item-root {
+    border: var(--_ui5_media_gallery_thumbnail_border);
+    box-sizing: border-box;
+}
+
+:host([_interactive]) .ui5-media-gallery-item-root {
+    cursor: pointer;
+}
+
+/* hover */
+:host([_thumbnail-design]:not([disabled]):not([selected])) .ui5-media-gallery-item-root:hover {
+    border-color: var(--sapTile_Interactive_BorderColor);
+    background: var(--sapList_Hover_Background);
+}
+
+/* focused */
+:host([focused]) .ui5-media-gallery-item-root {
+	outline: var(--_ui5_media_gallery_thumbnail_focus_outline);
+	outline-offset: -1px;
+}
+
+/* selected */
+:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root {
+    border: var(--_ui5_media_gallery_thumbnail_selected_border);
+}
+
+/* selected focused */
+:host([_thumbnail-design][focused][selected]) .ui5-media-gallery-item-root {
+    outline-offset: -3px;
+}
+
+.ui5-media-gallery-item-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+:host([layout="Wide"]) .ui5-media-gallery-item-wrapper {
+    z-index: 1;
+}
+
+:host([layout="Wide"]:not([_thumbnail-design])) .ui5-media-gallery-item-wrapper {
+    height: calc(100% / 16 * 9);
+}
+
+/* resource not found icon */
+[ui5-icon] {
+    position: absolute;
+    width: 4.5rem;
+    height: 4.55rem;
+    align-self: center;
+}
+
+.ui5-media-gallery-item-mask-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+:host(:not([_thumbnail-design])) .ui5-media-gallery-item-mask-layer {
+    z-index: 2;
+    background: var(--sapBaseColor);
+    mix-blend-mode: multiply;
+    opacity: 0.2;
+    box-shadow: var(--_ui5_media_gallery_item_overlay_box_shadow);
+    pointer-events: none;
+}
+
+:host(:not([_thumbnail-design])[layout="Wide"]) .ui5-media-gallery-item-mask-layer {
+    z-index: 0;
+}
+
+/* disabled state */
+:host([disabled]) .ui5-media-gallery-item-mask-layer {
+    z-index: 2;
+    background: var(--sapContent_ImagePlaceholderBackground);
+    opacity: 0.5;
+    cursor: default;
+}
+
+/* stretch the slotted thumbnails and videos */
+::slotted([slot^=thumbnail]),
+:host([layout="Wide"]) ::slotted(*) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* fit the slotted images within the host container,
+preserving their proportions */
+::slotted(*) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    margin: auto;
+}

package/src/themes/NotificationListGroupItem.css

@@ -26,6 +26,7 @@
 }
 
 .ui5-nli-group-header {
+	background: var(--sapList_GroupHeaderBackground);
 	display: flex;
 	align-items: center;
 	padding-block: 0.75rem 0.25rem;
@@ -64,6 +65,6 @@
 }
 
 /* fix for blue background color on tap (touchscreen devices) */
-:host([ui5-li-notification-group]) { 
+:host([ui5-li-notification-group]) {
 	-webkit-tap-highlight-color: transparent;
 }

package/src/themes/NotificationListItem.css

@@ -27,23 +27,6 @@
 	font-weight: normal;
 }
 
-/* IE */
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-description {
-	max-height: 32px;
-}
-
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-title-text {
-	max-height: 32px;
-}
-
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-title-text {
-	max-height: inherit;
-}
-
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-description  {
-	max-height: inherit;
-}
-
 :host(:first-of-type) {
 	border-top-left-radius: var(--_ui5-notification_item-border-raius);
 	border-top-right-radius: var(--_ui5-notification_item-border-raius);
@@ -109,7 +92,6 @@
 	color: var(--sapTextColor);
 	font-size: var(--sapFontSize);
 	box-sizing: border-box;
-	box-sizing: border-box;
 }
 
 /*  Footer */
@@ -120,19 +102,13 @@
 	padding-top: 0.5rem;
 	box-sizing: border-box;
 	flex-wrap: wrap;
+	align-items: center;
 }
 
 .ui5-nli-footer-divider {
 	position: relative;
 	align-items: center;
-	margin-inline-start: 0.5rem;
-	margin-inline-end: 0.625rem;
-}
-
-.ui5-nli-footer-divider::after {
-	position: absolute;
-	content: ".";
-	top: -20%;
+	margin-inline: 0.5rem;
 }
 
 .ui5-nli-footer-showMore {
@@ -151,4 +127,4 @@
 .ui5-nli-actions {
 	display: flex;
 	box-sizing: border-box;
-}
+}

package/src/themes/NotificationPrioIcon.css

@@ -1,7 +1,7 @@
 .ui5-prio-icon {
 	min-width: 1rem;
 	min-height: 1rem;
-	padding-inline-end: 0.5rem;
+	padding-inline-end: 0.625rem;
 }
 
 .ui5-prio-icon--message-error {

package/src/themes/Page.css

@@ -2,7 +2,7 @@
 :host(:not([hidden])) {
     width: 100%;
     height: 100%;
-    display: inline-block;
+    display: block;
 }
 
 .ui5-page-root {

package/src/themes/ProductSwitchItem.css

@@ -43,7 +43,6 @@
 
 .ui5-product-switch-item-root {
 	user-select: none;
-	-ms-user-select: none;
 	width: 100%;
 	height: 100%;
 	flex-direction: column;