@ui5/webcomponents-fiori 1.0.0 → 1.0.1

package/src/themes/ProductSwitchItem.css

@@ -0,0 +1,179 @@
+:host {
+	width: var(--_ui5_product_switch_item_width);
+	height: var(--_ui5_product_switch_item_height);
+	margin: .25rem;
+	border-radius: .25rem;
+	box-sizing: border-box;
+	background:var(--sapList_Background);
+}
+
+:host([selected]) {
+	background: var(--sapList_SelectionBackgroundColor);
+	border: 0.125rem solid var(--sapList_SelectionBorderColor);
+}
+
+:host(:hover) {
+	background:var(--sapList_Hover_Background);
+}
+
+:host([selected]:hover) {
+	background: var(--sapList_Hover_SelectionBackground);
+}
+
+
+:host([active]),
+:host([selected][active])  {
+	background: var(--sapList_Active_Background);
+}
+
+:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-icon,
+:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title,
+:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+	color:var(--sapList_Active_TextColor);
+}
+
+:host([focused]) {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset:var(--_ui5_product_switch_item_outline_offset)
+}
+
+:host([active][focused]) {
+	outline-color: var(--_ui5_product_switch_item_active_outline_color);
+}
+
+.ui5-product-switch-item-root {
+	user-select: none;
+	-ms-user-select: none;
+	width: 100%;
+	height: 100%;
+	flex-direction: column;
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	outline: none;
+	box-sizing: border-box;
+	padding: .5rem;
+	padding-top: 4rem;
+	cursor: pointer;
+	border: var(--_ui5_product_switch_item_border);
+}
+
+:host([icon]) .ui5-product-switch-item-root {
+	padding-top: .5rem;
+}
+
+:host([selected]) .ui5-product-switch-item-root {
+	padding: .375rem;
+}
+
+.ui5-product-switch-item-root .ui5-product-switch-item-icon {
+	width: 3rem;
+	height: 3rem;
+	padding: .75rem;
+	margin-bottom: .5rem;
+	box-sizing: border-box;
+	color: var(--sapContent_IconColor);
+	pointer-events: none;
+}
+
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	max-width: 10.25rem;
+}
+
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle,
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
+	line-height: 1.25rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+	pointer-events: none;
+	text-align: center;
+}
+
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
+	font-size:var( --sapFontHeader6Size);
+	color:var(--sapGroup_TitleTextColor);
+}
+
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title:only-child {
+	white-space: normal;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+	font-size:var( --sapFontSmallSize);
+	color:var(--sapContent_LabelColor);
+}
+
+@media only screen and (max-width: 600px) {
+	:host {
+		margin: 0;
+		width: 100%;
+		width: 100%;
+		max-width: 600px;
+		height: 5rem;
+		border-radius: 0;
+	}
+
+	.ui5-product-switch-item-root {
+		padding: 0 1rem;
+		flex-direction: row;
+	}
+
+	:host([icon]) .ui5-product-switch-item-root {
+		padding-top: 0;
+	}
+
+	.ui5-product-switch-item-root .ui5-product-switch-item-icon {
+		padding: .875rem;
+		color: var(--sapContent_NonInteractiveIconColor);
+		margin: 0 .75rem 0 0;
+	}
+
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
+		align-items: flex-start;
+		max-width: 100%;
+	}
+
+	:host([icon]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content {
+		max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/
+	}
+
+
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle,
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
+		line-height: normal;
+	}
+
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
+		font-size: var(--sapFontSize);
+		padding-top: .75rem;
+	}
+}
+
+[ui5-product-switch-item][focused] {
+	outline: none;
+	position: relative;
+}
+
+[ui5-product-switch-item][focused] .ui5-product-switch-item-root::after {
+	content: "";
+	position: absolute;
+	border-color: var(--_ui5_product_switch_item_outline_color);
+	border-width: var(--_ui5_product_switch_item_outline_width);
+	border-style: dotted;
+	top: var(--_ui5_product_switch_item_outline_offset_positive);
+	bottom:  var(--_ui5_product_switch_item_outline_offset_positive);
+	left:  var(--_ui5_product_switch_item_outline_offset_positive);
+	right:  var(--_ui5_product_switch_item_outline_offset_positive);
+}
+
+[ui5-product-switch-item][active][focused] .ui5-product-switch-item-root::after {
+	border-color: var(--_ui5_product_switch_item_active_outline_color);
+}

package/src/themes/ShellBar.css

@@ -0,0 +1,534 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-shellbar-root {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--sapShellColor);
+	height: 2.75rem;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+	box-sizing: border-box;
+}
+
+.ui5-shellbar-menu-button,
+.ui5-shellbar-button,
+.ui5-shellbar-image-button,
+::slotted([ui5-button][slot="startButton"]) {
+	height: 2.25rem;
+	padding: 0;
+	margin-left: 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;
+	position: relative;
+	font-size: 0.75rem;
+	font-weight: bold;
+	white-space: initial;
+	overflow: initial;
+	text-overflow: initial;
+}
+
+::slotted([ui5-button][slot="startButton"]:hover),
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
+.ui5-shellbar-button:hover,
+.ui5-shellbar-image-button:hover {
+	background: var(--sapShell_Hover_Background);
+}
+
+
+::slotted([ui5-button][slot="startButton"]:hover),
+.ui5-shellbar-button:hover,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+}
+
+::slotted([ui5-button][slot="startButton"][active]),
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
+.ui5-shellbar-button[active],
+.ui5-shellbar-image-button:active {
+	background: var(--sapShell_Active_Background);
+	color: var(--_ui5_shellbar_button_active_color);
+}
+
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus {
+	outline: var(--_ui5_shellbar_logo_outline);
+	outline-offset: var(--_ui5_shellbar_outline_offset);
+}
+
+slot[name="profile"] {
+	min-width: 0;
+}
+
+::slotted([ui5-avatar][slot="profile"]) {
+	min-width: 0;
+	width: 2rem;
+	height: 2rem;
+	padding: .25rem;
+	pointer-events: none;
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
+	border: none;
+}
+
+.ui5-shellbar-menu-button-title {
+	display: inline-block;
+	font-family: "72override", var(--sapFontFamily);
+	margin: 0;
+	font-size: 0.75rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: auto;
+}
+
+:host(:not([primary-title])) .ui5-shellbar-menu-button {
+	min-width: 2.25rem;
+	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;
+	font-weight: normal;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
+	display: inline-block;
+	margin-left: 0.375rem;
+	width: 10px;
+	height: 10px;
+	width: 0px;
+	height: 0px;
+	color: var(--sapShell_InteractiveTextColor);
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-overflow-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	overflow: hidden;
+}
+
+.ui5-shellbar-overflow-container-middle {
+	align-self: center;
+	height: 2.5rem;
+	width: 0;
+	flex-shrink: 0;
+}
+
+:host([show-co-pilot]) .ui5-shellbar-overflow-container-middle {
+	width: 3rem;
+}
+
+@keyframes Behind_layer {
+	0% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes Top_layer {
+	0% {
+		transform: rotate(-360deg);
+	}
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-root {
+	padding: 0.25rem 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;
+}
+
+:host([breakpoint-size="M"]) .ui5-shellbar-root {
+	padding: 0.25rem 2rem;
+}
+
+:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
+	padding: 0.25rem 2rem;
+}
+
+:host([breakpoint-size="L"]) .ui5-shellbar-root {
+	padding: 0.25rem 2rem;
+}
+
+:host([breakpoint-size="XL"]) .ui5-shellbar-root {
+	padding: 0.25rem 3rem;
+}
+
+:host([breakpoint-size="XXL"]) .ui5-shellbar-root {
+	padding: 0.25rem 3rem;
+}
+
+.ui5-shellbar-logo {
+	cursor: pointer;
+	max-height: 2rem;
+}
+
+.ui5-shellbar-logo:focus {
+	outline: var(--_ui5_shellbar_logo_outline);
+	outline-offset: var(--_ui5_shellbar_outline_offset);
+}
+
+.ui5-shellbar-button {
+	width: 2.5rem;
+}
+
+.ui5-shellbar-image-buttonImage {
+	border-radius: 50%;
+	width: 1.75rem;
+	height: 1.75rem;
+	display: flex;
+	background-size: cover;
+}
+
+.ui5-shellbar-image-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-width: 2.25rem;
+	height: 2.25rem;
+	display: inline-flex;
+	padding: 0;
+}
+
+.ui5-shellbar-overflow-container-left {
+	justify-content: flex-start;
+	margin-right: 0.5rem;
+	max-width: 75%;
+	flex-shrink: 0;
+	flex-grow: 0;
+}
+
+:host([show-co-pilot]) .ui5-shellbar-overflow-container-left {
+	flex-basis: 50%;
+	max-width: calc(50% - 1.5rem);
+}
+
+
+.ui5-shellbar-menu-button {
+	white-space: nowrap;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: 0.25rem 0.5rem;
+	cursor: text;
+	-webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-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;
+	user-select: none;
+	cursor: pointer;
+}
+
+:host(:not([with-logo])) .ui5-shellbar-menu-button {
+	margin-left: 0;
+}
+
+.ui5-shellbar-overflow-container-right {
+	display: block;
+	overflow: hidden;
+	box-sizing: border-box;
+	white-space: nowrap;
+	flex: 1 1 auto;
+	max-width: 100%;
+}
+
+:host([show-co-pilot]) .ui5-shellbar-overflow-container-right {
+	flex-basis: 0%;
+}
+
+:host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
+	margin-left: 8rem;
+}
+
+.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.ui5-shellbar-overflow-button {
+	display: none;
+}
+
+:host([breakpoint-size="M"]) .ui5-shellbar-secondary-title {
+	display: none;
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-secondary-title {
+	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;
+}
+
+.ui5-shellbar-overflow-button-shown {
+	display: inline-block;
+}
+
+.ui5-shellbar-hidden-button,
+.ui5-shellbar-invisible-button {
+	visibility: hidden;
+}
+
+.ui5-shellbar-coPilot {
+	background-color: transparent;
+	cursor: pointer;
+}
+
+:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
+	margin-left: 1rem;
+}
+
+:host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
+	margin-left: 1rem;
+}
+
+:host(:not([notifications-count])) .ui5-shellbar-bell-button {
+	position: relative;
+}
+
+:host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button::before,
+.ui5-shellbar-button[data-count]::before {
+	position: absolute;
+	width: auto;
+	height: 1rem;
+	min-width: 1rem;
+	background: var(--sapContent_BadgeBackground);
+	color: var(--sapContent_BadgeTextColor);
+	top: 0.125rem;
+	left: 1.5rem;
+	padding: .25rem;
+	border-radius: 1rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	z-index: 2;
+	box-sizing: border-box;
+}
+
+:host([notifications-count]:not([notifications-count=""])) .ui5-shellbar-bell-button::before {
+	content: attr(data-ui5-notifications-count);
+}
+
+.ui5-shellbar-button[data-count]::before {
+	content: attr(data-count);
+}
+
+.ui5-shellbar-menu-button {
+	margin-left: 0.5rem;
+}
+
+.ui5-shellbar-search-field {
+	flex-grow: 1;
+	min-width: 240px;
+	margin-left: 0.5rem;
+	max-width: 25rem;
+}
+
+.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
+	height: 2.25rem;
+	width: 100%;
+}
+
+.ui5-shellbar-search-full-width-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: var(--sapShellColor);
+	height: 100%;
+	width: 100%;
+	z-index: 100;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button {
+	width: auto;
+}
+
+::slotted([ui5-input]) {
+	background-color: var(--sapShellColor);
+	border: 1px solid var(--sapShell_InteractiveBorderColor);
+	color: var(--sapShell_TextColor);
+	height: 100%;
+	width: 100%;
+}
+
+::slotted([ui5-input][focused]) {
+	outline: 1px dotted var(--sapContent_ContrastFocusColor);
+}
+
+::slotted([slot="logo"]) {
+	max-height: 2rem;
+	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;
+}
+
+.ui5-shellbar-copilot-wrapper:hover {
+	background: var(--sapShell_Hover_Background);
+}
+
+.ui5-shellbar-copilot-wrapper:active,
+.ui5-shellbar-copilot-wrapper[active] {
+	background: var(--sapShell_Active_Background);
+}
+
+.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);
+	pointer-events: none;
+	left: 0;
+	top: 0.25rem;
+	right: 0;
+	z-index: 1;
+}
+
+.ui5-shellbar-co-pilot-placeholder {
+	width: 2.75rem;
+	height: 2.75rem;
+}
+
+.ui5-shellbar-co-pilot-circle {
+	fill: var(--sapShellColor);
+}
+
+.ui5-shellbar-co-pilot-color1 {
+	stop-color: var(--_ui5_shellbar_copilot_stop_color1);
+}
+
+.ui5-shellbar-co-pilot-color2 {
+	stop-color: var(--_ui5_shellbar_copilot_stop_color2);
+}
+
+.ui5-shellbar-co-pilot-opacity7 {
+	stop-opacity: 0.7;
+}
+
+.ui5-shellbar-co-pilot-opacity36 {
+	stop-opacity: 0.36;
+}
+
+.ui5-shellbar-co-pilot-opacity2 {
+	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;
+	justify-content: center;
+	align-items: center;
+}
+
+::slotted([ui5-button][profile-btn]) {
+	width: auto;
+}