@ui5/webcomponents 0.0.0-11d529e8a → 0.0.0-1e08ebdef

package/src/themes/AvatarGroup.css

@@ -0,0 +1,82 @@
+@import "./TapHighlightColor.css";
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-avatar-group-items:focus {
+	outline: none;
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:focus {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+}
+
+.ui5-avatar-group-root {
+	display: flex;
+}
+
+.ui5-avatar-group-items {
+	white-space: nowrap;
+	position: relative;
+	display: inline-flex;
+}
+
+:host([type="Group"]) .ui5-avatar-group-items {
+	cursor: pointer;
+}
+
+:host([type="Group"]) ::slotted([ui5-button]),
+:host([type="Group"]) ::slotted([ui5-avatar]) {
+	pointer-events: none;
+}
+
+::slotted([ui5-button]:not([hidden])),
+.ui5-avatar-group-overflow-btn:not([hidden]) {
+	--_ui5_button_base_padding: 0;
+	border-radius: 50%;
+	display: inline-flex;
+	text-overflow: initial;
+}
+
+::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);
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {
+	height: 2rem;
+	width: 2rem;
+	min-width: 2rem;
+	font-size: .75rem;
+}
+
+::slotted([ui5-button]),
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s {
+	height: 3rem;
+	width: 3rem;
+	min-width: 3rem;
+	font-size: 1.125rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m {
+	height: 4rem;
+	width: 4rem;
+	min-width: 4rem;
+	font-size: 1.625rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l {
+	height: 5rem;
+	width: 5rem;
+	min-width: 5rem;
+	font-size: 2rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl {
+	height: 7rem;
+	width: 7rem;
+	min-width: 7rem;
+	font-size: 2.75rem;
+}

package/src/themes/Badge.css

@@ -0,0 +1,257 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	height: var(--_ui5-badge-height);
+	min-width: 1.125em;
+	max-width: 100%;
+	padding: var(--_ui5-badge-padding);
+	color: var(--sapAccentColor1);
+	background: var(--_ui5-badge-background-position) / var(--_ui5-badge-background-size) var(--_ui5-badge-background) var(--_ui5-badge-background-repeat) var(--_ui5-badge-background-image);
+	border: var(--_ui5-badge-border);
+	border-inline-start: var(--_ui5-badge-left-border);
+	border-radius: var(--_ui5-badge-border-radius);
+	box-sizing: border-box;
+	font-family: "72override", var(--sapFontFamily);
+	font-weight: var(--_ui5-badge-font-weight);
+	text-align: center;
+	letter-spacing: 0.0125em;
+	transition: all .2s ease-in-out;
+}
+
+:host([color-scheme]:hover),
+:host(:not([color-scheme]):hover) {
+	cursor: var(--_ui5-badge-cursor);
+}
+
+.ui5-badge-root {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	pointer-events: var(--_ui5_badge_pointer_events);
+}
+
+.ui5-badge-text {
+	width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	font-weight: inherit;
+	text-overflow: ellipsis;
+	line-height: 1;
+	text-transform: var(--_ui5-badge-text-transform);
+	letter-spacing: inherit;
+	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+}
+
+:host(:hover) .ui5-badge-text {
+	cursor: var(--_ui5-badge-cursor);
+}
+
+:host([_icon-only]) {
+	padding: 0 0.1875em;
+}
+
+::slotted([ui5-icon]) {
+	width: 0.75em;
+	height: 0.75em;
+	min-width: 0.75em;
+	min-height: 0.75em;
+	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;
+}
+
+/* Scheme 1 */
+:host([color-scheme="1"]) {
+	background-color: var(--ui5-badge-color-scheme-1-background);
+	border-color: var(--ui5-badge-color-scheme-1-border);
+	background-image: var(--ui5-badge-color-scheme-1-background-image);
+	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([color-scheme="1"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-2-border);
+	background-image: var(--ui5-badge-color-scheme-2-background-image);
+	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([color-scheme="2"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-3-border);
+	background-image: var(--ui5-badge-color-scheme-3-background-image);
+	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([color-scheme="3"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-4-border);
+	background-image: var(--ui5-badge-color-scheme-4-background-image);
+	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([color-scheme="4"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-5-border);
+	background-image: var(--ui5-badge-color-scheme-5-background-image);
+	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([color-scheme="5"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-6-border);
+	background-image: var(--ui5-badge-color-scheme-6-background-image);
+	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([color-scheme="6"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-7-border);
+	background-image: var(--ui5-badge-color-scheme-7-background-image);
+	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([color-scheme="7"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-8-border);
+	background-image: var(--ui5-badge-color-scheme-8-background-image);
+	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([color-scheme="8"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-9-border);
+	background-image: var(--ui5-badge-color-scheme-9-background-image);
+	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([color-scheme="9"]:active: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);
+	border-color: var(--ui5-badge-color-scheme-10-border);
+	background-image: var(--ui5-badge-color-scheme-10-background-image);
+	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([color-scheme="10"]:active:hover) {
+	box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
+	color: var(--ui5-badge-color-scheme-10-active-color);
+}

package/src/themes/Breadcrumbs.css

@@ -0,0 +1,99 @@
+.ui5-breadcrumbs-root {
+    white-space: nowrap;
+    outline: none;
+    margin: 0 0 0.5rem 0;
+}
+
+.ui5-breadcrumbs-root > ol {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.ui5-breadcrumbs-root > ol > li {
+    display: inline;
+}
+
+.ui5-breadcrumbs-current-location {
+    min-width: 1%;
+    -webkit-flex: 1;
+    -webkit-box-flex: 1;
+    flex: 1 1 auto;
+}
+
+.ui5-breadcrumbs-current-location > span:focus {
+	outline-offset: -1px;
+	outline: 1px dotted var(--sapContent_FocusColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
+    display: none
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
+    width: var(--sapFontSize);
+    height: var(--sapFontSize);
+    padding-left: .675rem;
+    vertical-align: text-top;
+    color: var(--sapLinkColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
+    content: "...";
+    vertical-align: middle;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+/* underline icon on hover */
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
+    content: "";
+    position: absolute;
+    border-bottom: 0.0625rem solid;
+    top: 0;
+    left: 0;
+    bottom: 1px;
+    right: 0;
+}
+
+/* links separator */
+[ui5-link]::after {
+    content: "/"; /* default separator is "Slash" */
+    padding: 0 .25rem;
+    cursor: auto;
+    color: var(--sapContent_LabelColor);
+    display: flex;
+    align-items: flex-end;
+}
+
+.ui5-breadcrumbs-popover-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+/* separator styles */
+:host([separator-style="BackSlash"]) [ui5-link]::after {
+    content: "\\";
+}
+
+:host([separator-style="DoubleBackSlash"]) [ui5-link]::after {
+    content: "\\\\";
+}
+
+:host([separator-style="DoubleGreaterThan"]) [ui5-link]::after {
+    content: ">>";
+}
+
+:host([separator-style="DoubleSlash"]) [ui5-link]::after {
+    content: "//";
+}
+
+:host([separator-style="GreaterThan"]) [ui5-link]::after {
+    content: ">";
+}

package/src/themes/BreadcrumbsPopover.css

@@ -0,0 +1,6 @@
+.ui5-breadcrumbs-popover-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding-right: 0.5rem;
+}

package/src/themes/BrowserScrollbar.css

@@ -0,0 +1,23 @@
+::-webkit-scrollbar:horizontal {
+	height: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar:vertical {
+	width: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--sapScrollBar_FaceColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--sapScrollBar_Hover_FaceColor);
+}
+
+::-webkit-scrollbar-corner {
+	background-color: var(--sapScrollBar_TrackColor);
+}

package/src/themes/BusyIndicator.css

@@ -0,0 +1,143 @@
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host([_is-busy]) {
+	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;
+}
+
+:host([size="Small"][text]:not([text=""])) .ui5-busy-indicator-root {
+	min-height: 1.75rem;
+}
+
+:host([size="Small"]) .ui5-busy-indicator-circle {
+	width: .5rem;
+	height: .5rem;
+}
+
+:host(:not([size])) .ui5-busy-indicator-root,
+:host([size="Medium"]) .ui5-busy-indicator-root {
+	min-width: 3rem;
+	min-height: 1rem;
+}
+
+:host(:not([size])[text]:not([text=""])) .ui5-busy-indicator-root,
+:host([size="Medium"][text]:not([text=""])) .ui5-busy-indicator-root {
+	min-height: 2.25rem;
+}
+
+:host(:not([size])) .ui5-busy-indicator-circle,
+:host([size="Medium"])  .ui5-busy-indicator-circle {
+	width: 1rem;
+	height: 1rem;
+}
+
+:host([size="Large"]) .ui5-busy-indicator-root {
+	min-width: 6rem;
+	min-height: 2rem;
+}
+
+:host([size="Large"][text]:not([text=""])) .ui5-busy-indicator-root {
+	min-height: 3.25rem;
+}
+
+:host([size="Large"]) .ui5-busy-indicator-circle {
+	width: 2rem;
+	height: 2rem;
+}
+
+.ui5-busy-indicator-root {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	background-color: inherit;
+}
+
+.ui5-busy-indicator-busy-area {
+	position: absolute;
+	z-index: 99;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: inherit;
+	flex-direction: column;
+}
+
+.ui5-busy-indicator-busy-area:focus {
+	outline: var(--_ui5_busy_indicator_focus_outline);
+	outline-offset: -2px;
+    border-radius: var(--_ui5_busy_indicator_focus_border_radius);
+}
+
+.ui5-busy-indicator-circles-wrapper {
+	line-height: 0;
+}
+
+.ui5-busy-indicator-circle {
+	display: inline-block;
+	background-color: currentColor;
+	border-radius: 50%;
+}
+
+.ui5-busy-indicator-circle::before {
+	content: "";
+	width: 100%;
+	height: 100%;
+	border-radius: 100%;
+}
+
+.circle-animation-0 {
+	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+	animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+	animation-delay: 400ms;
+}
+
+.ui5-busy-indicator-text {
+	width: 100%;
+	margin-top: .25rem;
+	text-align: center;
+}
+
+@keyframes grow {
+	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);
+	}
+}