@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/src/themes/Avatar.css

@@ -1,6 +1,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	box-sizing: border-box;
+	position: relative;
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -26,18 +27,13 @@
 	color: var(--ui5-avatar-initials-color);
 }
 
-/* Shapes */
-:host([shape="Square"]),
-:host([shape="Square"]) ::slotted(*){
-	border-radius: .25rem;
-}
-
-:host([shape="Square"]) .ui5-avatar-root {
-	border-radius: inherit;
-}
-
-:host([shape="Square"]) .ui5-avatar-img {
-	border-radius: inherit;
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	height: 100%;
+	width: 100%;
 }
 
 /* Sizes */
@@ -81,45 +77,52 @@
 
 /* Icon */
 :host .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_fontsize_S);
+	width: var(--_ui5_avatar_fontsize_S);
 	color: inherit;
 }
 
 :host([_size="XS"]) .ui5-avatar-icon,
 :host([size="XS"]) .ui5-avatar-icon {
-	height: 1rem;
-	width: 1rem;
+	height: var(--_ui5_avatar_icon_XS);
+	width: var(--_ui5_avatar_icon_XS);
 }
 
 :host([_size="S"]) .ui5-avatar-icon,
 :host([size="S"]) .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_icon_S);
+	width: var(--_ui5_avatar_icon_S);
 }
 
 :host([_size="M"]) .ui5-avatar-icon,
 :host([size="M"]) .ui5-avatar-icon {
-	height: 2rem;
-	width: 2rem;
+	height: var(--_ui5_avatar_icon_M);
+	width: var(--_ui5_avatar_icon_M);
 }
 
 :host([_size="L"]) .ui5-avatar-icon,
 :host([size="L"]) .ui5-avatar-icon {
-	height: 2.5rem;
-	width: 2.5rem;
+	height: var(--_ui5_avatar_icon_L);
+	width: var(--_ui5_avatar_icon_L);
 }
 
 :host([_size="XL"]) .ui5-avatar-icon,
 :host([size="XL"]) .ui5-avatar-icon {
-	height: 3rem;
-	width: 3rem;
+	height: var(--_ui5_avatar_icon_XL);
+	width: var(--_ui5_avatar_icon_XL);
 }
 
 ::slotted(*) {
 	border-radius: 50%;
     width: 100%;
     height: 100%;
+	pointer-events: none;
+}
+
+/* Shapes */
+:host([shape="Square"]),
+:host([shape="Square"]) ::slotted(*) {
+	border-radius: var(--ui5-avatar-border-radius);
 }
 
 :host(:not([color-scheme])),
@@ -128,100 +131,134 @@
 :host([color-scheme="Accent6"]) {
 	background-color: var(--ui5-avatar-accent6);
 	color: var(--ui5-avatar-accent6-color);
+	border-color: var(--ui5-avatar-accent6-border-color);
 }
 
 :host([_color-scheme="Accent1"]),
 :host([color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
 	color: var(--ui5-avatar-accent1-color);
+	border-color: var(--ui5-avatar-accent1-border-color);
 }
 
 :host([_color-scheme="Accent2"]),
 :host([color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
 	color: var(--ui5-avatar-accent2-color);
+	border-color: var(--ui5-avatar-accent2-border-color);
 }
 
 :host([_color-scheme="Accent3"]),
 :host([color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
 	color: var(--ui5-avatar-accent3-color);
+	border-color: var(--ui5-avatar-accent3-border-color);
 }
 
 :host([_color-scheme="Accent4"]),
 :host([color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
 	color: var(--ui5-avatar-accent4-color);
+	border-color: var(--ui5-avatar-accent4-border-color);
 }
 
 :host([_color-scheme="Accent5"]),
 :host([color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
 	color: var(--ui5-avatar-accent5-color);
+	border-color: var(--ui5-avatar-accent5-border-color);
 }
 
 :host([_color-scheme="Accent7"]),
 :host([color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
 	color: var(--ui5-avatar-accent7-color);
+	border-color: var(--ui5-avatar-accent7-border-color);
 }
 
 :host([_color-scheme="Accent8"]),
 :host([color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
 	color: var(--ui5-avatar-accent8-color);
+	border-color: var(--ui5-avatar-accent8-border-color);
 }
 
 :host([_color-scheme="Accent9"]),
 :host([color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
 	color: var(--ui5-avatar-accent9-color);
+	border-color: var(--ui5-avatar-accent9-border-color);
 }
 
 :host([_color-scheme="Accent10"]),
 :host([color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
 	color: var(--ui5-avatar-accent10-color);
+	border-color: var(--ui5-avatar-accent10-border-color);
 }
 
 :host([_color-scheme="Placeholder"]),
 :host([color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
+	border-color: var(--ui5-avatar-placeholder-border-color);
 }
 
 :host([_has-image]) {
 	background-color: transparent;
+	vertical-align: middle;
 }
 
-:host([image-fit-type="Contain"]) .ui5-avatar-img {
-	background-size: contain;
+.ui5-avatar-initials {
+	color: inherit;
 }
 
-.ui5-avatar-root {
-	display: flex;
-	align-items: center;
+/* Slotted Badge */
+::slotted([slot="badge"]) {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	background: var(--sapButton_Emphasized_Background);
+	border: var(--sapButton_Emphasized_Background);
+	border-radius: 1rem;
+	color: var(--sapContent_BadgeTextColor);
 	justify-content: center;
-	outline: none;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
 }
 
-.ui5-avatar-root,
-.ui5-avatar-img {
-	height: 100%;
-	width: 100%;
-	border-radius: 50%;
+::slotted([ui5-badge][slot="badge"]) {
+	padding: 0.1875rem;
 }
 
-.ui5-avatar-img {
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
+:host([_size="L"]) ::slotted([slot="badge"]),
+:host([size="L"]) ::slotted([slot="badge"]) {
+	width: 1.25rem;
+	height: 1.25rem;
 }
 
-.ui5-avatar-initials {
-	color: inherit;
+:host([_size="XL"]) ::slotted([slot="badge"]),
+:host([size="XL"]) ::slotted([slot="badge"]) {
+	padding: 0.375rem;
+	width: 1.75rem;
+	height: 1.75rem;
 }
 
-::slotted(*) {
-	pointer-events: none;
+:host([shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.125rem;
+	right: -0.125rem;
+}
+
+:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.1875rem;
+	right: -0.1875rem;
+}
+
+:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.25rem;
+	right: -0.25rem;
 }

package/src/themes/AvatarGroup.css

@@ -10,6 +10,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -37,12 +38,13 @@
 	border-radius: 50%;
 	display: inline-flex;
 	text-overflow: initial;
+	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
 ::slotted([ui5-button][focused]),
 .ui5-avatar-group-overflow-btn[focused] {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Badge.css

@@ -2,21 +2,19 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	height: var(--_ui5-badge-height);
+	height: 1rem;
 	min-width: 1.125em;
 	max-width: 100%;
 	padding: 0 0.3125em;
 	color: var(--sapAccentColor1);
 	background: var(--sapLegendBackgroundColor1);
-	border: var(--_ui5-badge-border);
-	border-inline-start: var(--_ui5-badge-left-border);
-	border-radius: var(--_ui5-badge-border-radius);
+	border: 0.0625em solid;
+	border-radius: 0.5rem;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
-	font-weight: var(--_ui5-badge-font-weight);
+	font-weight: bold;
 	text-align: center;
 	letter-spacing: 0.0125em;
-	transition: all .2s ease-in-out;
 }
 
 :host([color-scheme]:hover),
@@ -30,7 +28,7 @@
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
-	pointer-events: var(--_ui5_badge_pointer_events);
+	pointer-events: none;
 }
 
 .ui5-badge-text {
@@ -40,9 +38,9 @@
 	font-weight: inherit;
 	text-overflow: ellipsis;
 	line-height: 1;
-	text-transform: var(--_ui5-badge-text-transform);
+	text-transform: uppercase;
 	letter-spacing: inherit;
-	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
 }
 
 :host(:hover) .ui5-badge-text {
@@ -61,19 +59,8 @@
 	color: inherit;
 }
 
-/* IE 11 specific selector */
-[ui5-badge] [ui5-icon][slot="icon"] {
-	display: flex;
-}
-
 :host([_has-icon]) .ui5-badge-text {
-	padding-left: 0.125em;
-}
-
-/* RTL */
-:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
-	padding-left: 0;
-	padding-right: 0.125em;
+	padding-inline-start: 0.125rem;
 }
 
 /* Scheme 1 */
@@ -83,16 +70,6 @@
 	color: var(--ui5-badge-color-scheme-1-color);
 }
 
-:host([color-scheme="1"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-1-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-1-shadow);
-}
-
-:host([active][color-scheme="1"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
-	color: var(--ui5-badge-color-scheme-1-active-color);
-}
-
 /* Scheme 2 */
 :host([color-scheme="2"]) {
 	background-color: var(--ui5-badge-color-scheme-2-background);
@@ -100,16 +77,6 @@
 	color: var(--ui5-badge-color-scheme-2-color);
 }
 
-:host([color-scheme="2"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-2-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-2-shadow);
-}
-
-:host([active][color-scheme="2"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
-	color: var(--ui5-badge-color-scheme-2-active-color);
-}
-
 /* Scheme 3 */
 :host([color-scheme="3"]) {
 	background-color: var(--ui5-badge-color-scheme-3-background);
@@ -117,16 +84,6 @@
 	color: var(--ui5-badge-color-scheme-3-color);
 }
 
-:host([color-scheme="3"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-3-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-3-shadow);
-}
-
-:host([active][color-scheme="3"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
-	color: var(--ui5-badge-color-scheme-3-active-color);
-}
-
 /* Scheme 4 */
 :host([color-scheme="4"]) {
 	background-color: var(--ui5-badge-color-scheme-4-background);
@@ -134,16 +91,6 @@
 	color: var(--ui5-badge-color-scheme-4-color);
 }
 
-:host([color-scheme="4"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-4-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-4-shadow);
-}
-
-:host([active][color-scheme="4"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-4-active-shadow);
-	color: var(--ui5-badge-color-scheme-4-active-color);
-}
-
 /* Scheme 5 */
 :host([color-scheme="5"]) {
 	background-color: var(--ui5-badge-color-scheme-5-background);
@@ -151,16 +98,6 @@
 	color: var(--ui5-badge-color-scheme-5-color);
 }
 
-:host([color-scheme="5"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-5-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-5-shadow);
-}
-
-:host([active][color-scheme="5"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
-	color: var(--ui5-badge-color-scheme-5-active-color);
-}
-
 /* Scheme 6 */
 :host([color-scheme="6"]) {
 	background-color: var(--ui5-badge-color-scheme-6-background);
@@ -168,16 +105,6 @@
 	color: var(--ui5-badge-color-scheme-6-color);
 }
 
-:host([color-scheme="6"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-6-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-6-shadow);
-}
-
-:host([active][color-scheme="6"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
-	color: var(--ui5-badge-color-scheme-6-active-color);
-}
-
 /* Scheme 7 */
 :host([color-scheme="7"]) {
 	background-color: var(--ui5-badge-color-scheme-7-background);
@@ -185,16 +112,6 @@
 	color: var(--ui5-badge-color-scheme-7-color);
 }
 
-:host([color-scheme="7"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-7-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-7-shadow);
-}
-
-:host([active][color-scheme="7"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
-	color: var(--ui5-badge-color-scheme-7-active-color);
-}
-
 /* Scheme 8 */
 :host([color-scheme="8"]) {
 	background-color: var(--ui5-badge-color-scheme-8-background);
@@ -202,16 +119,6 @@
 	color: var(--ui5-badge-color-scheme-8-color);
 }
 
-:host([color-scheme="8"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-8-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-8-shadow);
-}
-
-:host([active][color-scheme="8"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
-	color: var(--ui5-badge-color-scheme-8-active-color);
-}
-
 /* Scheme 9 */
 :host([color-scheme="9"]) {
 	background-color: var(--ui5-badge-color-scheme-9-background);
@@ -219,16 +126,6 @@
 	color: var(--ui5-badge-color-scheme-9-color);
 }
 
-:host([color-scheme="9"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-9-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-9-shadow);
-}
-
-:host([active][color-scheme="9"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
-	color: var(--ui5-badge-color-scheme-9-active-color);
-}
-
 /* Scheme 10 */
 :host([color-scheme="10"]) {
 	background-color: var(--ui5-badge-color-scheme-10-background);
@@ -236,12 +133,14 @@
 	color: var(--ui5-badge-color-scheme-10-color);
 }
 
-:host([color-scheme="10"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-10-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-10-shadow);
-}
-
-:host([active][color-scheme="10"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
-	color: var(--ui5-badge-color-scheme-10-active-color);
-}
+/* ---Slotted Badges--- */
+/* [ui5-avatar] - Badge icon styles */
+/* Make icon take full width minus padding.
+ [ui5-avatar] is the only component using an icon for badge,
+ therefore no additional scoping is needed. */
+:host([slot="badge"]) ::slotted([ui5-icon][slot="icon"]) {
+	width: 100%;
+	height: 100%;
+	min-width: 100%;
+	min-height: 100%;
+}

package/src/themes/Breadcrumbs.css

@@ -22,11 +22,14 @@
     -webkit-flex: 1;
     -webkit-box-flex: 1;
     flex: 1 1 auto;
+    /* Fix extra height in ul -> li element */
+    font-size: 0;
+    align-self: center;
 }
 
 .ui5-breadcrumbs-current-location > span:focus {
-	outline-offset: -1px;
-	outline: 1px dotted var(--sapContent_FocusColor);
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
@@ -41,6 +44,10 @@
     color: var(--sapLinkColor);
 }
 
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+    color: var(--_ui5_link_focus_color);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
     vertical-align: middle;

package/src/themes/BreadcrumbsPopover.css

@@ -1,3 +1,7 @@
+.ui5-breadcrumbs-popover::part(content) {
+    padding: 0;
+}
+
 .ui5-breadcrumbs-popover-footer {
     display: flex;
     justify-content: flex-end;

package/src/themes/BrowserScrollbar.css

@@ -1,25 +1,25 @@
-::-webkit-scrollbar:horizontal {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar:horizontal {
 	height: var(--sapScrollBar_Dimension);
 }
 
-::-webkit-scrollbar:vertical {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar:vertical {
 	width: var(--sapScrollBar_Dimension);
 }
 
-::-webkit-scrollbar {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 	border-left: var(--browser_scrollbar_border);
 }
 
-::-webkit-scrollbar-thumb {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar-thumb {
 	border-radius: var(--browser_scrollbar_border_radius);
 	background-color: var(--sapScrollBar_FaceColor);
 }
 
-::-webkit-scrollbar-thumb:hover {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar-thumb:hover {
 	background-color: var(--sapScrollBar_Hover_FaceColor);
 }
 
-::-webkit-scrollbar-corner {
+:not(.ui5-content-native-scrollbars) ::-webkit-scrollbar-corner {
 	background-color: var(--sapScrollBar_TrackColor);
 }

package/src/themes/BusyIndicator.css

@@ -6,17 +6,6 @@
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([_is-busy]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
-	opacity: 0.6;
-}
-
-/**
- * IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
- */
-:host([_is-busy]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
-	opacity: 0.95;
-}
-
 :host([size="Small"]) .ui5-busy-indicator-root {
 	min-width: 1.5rem;
 	min-height: .5rem;
@@ -131,13 +120,11 @@
 	0%, 50%, 100% {
 		-webkit-transform: scale(0.5);
 		-moz-transform: scale(0.5);
-		-ms-transform: scale(0.5);
 		transform: scale(0.5);
 	}
 	25% {
 		-webkit-transform: scale(1);
 		-moz-transform: scale(1);
-		-ms-transform: scale(1);
 		transform: scale(1);
 	}
 }