@ui5/webcomponents-fiori 1.0.0 → 1.0.1

package/src/themes/IllustratedMessage.css

@@ -0,0 +1,167 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 1rem;
+}
+
+.ui5-illustrated-message-root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.ui5-illustrated-message-illustration {
+    margin-bottom: 2rem;
+}
+
+.ui5-illustrated-message-title {
+    text-align: center;
+    margin-bottom: 0.5rem;
+    line-height: 1.3;
+    max-width: 30rem;
+}
+
+.ui5-illustrated-message-subtitle {
+    text-align: center;
+    font-size: var(--sapFontLargeSize);
+    font-family: var(--sapFontFamily);
+    line-height: 1.4;
+    color: var(--sapContent_LabelColor);
+    margin-bottom: 2rem;
+    max-width: 30rem;
+}
+
+.ui5-illustrated-message-actions {
+    margin-bottom: 2rem;
+}
+
+:host([media="dialog"]) .ui5-illustrated-message-illustration {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+}
+
+:host([media="dialog"]) .ui5-illustrated-message-title {
+    margin-bottom: 0.25rem;
+    font-size: var(--sapFontHeader4Size);
+    max-width: 20rem;
+}
+
+:host([media="dialog"]) .ui5-illustrated-message-subtitle {
+    font-size: var(--sapFontSize);
+    max-width: 20rem;
+}
+
+:host([media="dialog"]) .ui5-illustrated-message-actions {
+    margin-bottom: 0rem;
+}
+
+:host([media="spot"]) .ui5-illustrated-message-illustration {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+:host([media="spot"]) .ui5-illustrated-message-title {
+    margin-bottom: 0.25rem;
+    font-size: var(--sapFontHeader5Size);
+    line-height: 1.25rem;
+    max-width: 16rem;
+}
+
+:host([media="spot"]) .ui5-illustrated-message-subtitle {
+    font-size: var(--sapFontSize);
+    max-width: 16rem;
+    margin-bottom: 1rem;
+}
+
+:host([media="spot"]) .ui5-illustrated-message-actions {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+:host([media="base"]) .ui5-illustrated-message-illustration {
+    display: none;
+}
+
+:host([media="base"]) .ui5-illustrated-message-title {
+    margin-bottom: 0.25rem;
+    font-size: var(--sapFontHeader5Size);
+    line-height: 1.25rem;
+    max-width: 10rem;
+}
+
+:host([media="base"]) .ui5-illustrated-message-subtitle {
+    font-size: var(--sapFontSize);
+    max-width: 10rem;
+    margin-bottom: 0rem;
+}
+
+.ui5-illustrated-message-util {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+:host([invalid]) .ui5-illustrated-message-illustration,
+:host([invalid]:not([title-text])) .ui5-illustrated-message-title,
+:host([invalid]:not([subtitle-text])) .ui5-illustrated-message-subtitle {
+    display: none;
+}
+
+.sapIllus_BackgroundColor {
+    fill: var(--sapIllus_BackgroundColor);
+}
+
+.sapIllus_BrandColorPrimary {
+    fill: var(--sapIllus_BrandColorPrimary);
+}
+
+.sapIllus_BrandColorSecondary {
+    fill: var(--sapIllus_BrandColorSecondary);
+}
+
+.sapIllus_StrokeDetailColor {
+    fill: var(--sapIllus_StrokeDetailColor);
+}
+
+.sapIllus_Layering1 {
+    fill: var(--sapIllus_Layering1);
+}
+
+.sapIllus_Layering2 {
+    fill: var(--sapIllus_Layering2);
+}
+
+.sapIllus_ObjectFillColor {
+    fill: var(--sapIllus_ObjectFillColor);
+}
+
+.sapIllus_AccentColor {
+    fill: var(--sapIllus_AccentColor);
+}
+
+.sapIllus_NoColor {
+    fill: var(--sapIllus_NoColor);
+}
+
+.sapIllus_PatternShadow {
+    fill: var(--sapIllus_PatternShadow);
+}
+
+.sapIllus_PatternHighlight {
+    fill: var(--sapIllus_PatternHighlight);
+}
+
+.sapIllus_NoColor_Fill {
+    fill: var(--sapIllus_NoColor);
+}
+.sapIllus_BrandColorPrimary_Fill {
+    fill: var(--sapIllus_BrandColorPrimary);
+}
+.sapIllus_ObjectFillColor_Fill {
+    fill: var(--sapIllus_ObjectFillColor);
+}

package/src/themes/InvisibleTextStyles.css

@@ -0,0 +1,9 @@
+.ui5-hidden-text {
+	position: absolute;
+	clip: rect(1px,1px,1px,1px);
+	user-select: none;
+	left: -1000px; /* ensure the invisible texts are never part of the viewport */
+	top: -1000px;
+	pointer-events: none;
+	font-size: 0;
+}

package/src/themes/NotifactionOverflowActionsPopover.css

@@ -0,0 +1,5 @@
+.ui5-notification-overflow-list {
+	display: flex;
+	flex-direction: column;
+	padding: 0 0.5rem;
+}

package/src/themes/NotificationListGroupItem.css

@@ -0,0 +1,72 @@
+@import "./NotificationListItemBase.css";
+@import "./NotificationPrioIcon.css";
+
+:host {
+	--_ui5-notification_item-border-raius: 0px;
+}
+
+:host(:not([collapsed])) .ui5-nli-group-toggle-btn {
+	transform: rotate(90deg);
+}
+
+:host([collapsed]) .ui5-nli-group-items {
+	display: none;
+}
+
+:host([read]) .ui5-nli-group-title-text {
+	font-weight: normal;
+}
+
+.ui5-nli-group-root {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-nli-group-header {
+	display: flex;
+	align-items: center;
+	padding: 0.75rem 0.5rem 0.25rem 0.75rem;
+	width: 100%;
+	border-bottom: 0.0625rem solid var(--sapList_GroupHeaderBorderColor);
+	box-sizing: border-box;
+	cursor: default;
+}
+
+.ui5-nli-group-toggle-btn {
+	margin-right: 0.75rem;
+	cursor: pointer;
+}
+
+.ui5-nli-group-title-text {
+	color: var(--sapGroup_TitleTextColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontHeader6Size);
+	font-weight: bold;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui5-nli-group-divider {
+	flex: 1;
+}
+
+.ui5-nli-group-counter {
+	margin-left: 0.25rem;
+	margin-right: 1rem;
+	color: var(--sapList_TableGroupHeaderTextColor);
+	font-size: var(--sapFontHeader6Size);
+	font-family: "72override", var(--sapFontHeaderFamily);
+}
+
+[dir="rtl"] .ui5-nli-group-toggle-btn {
+	margin-left: 1rem;
+}
+
+[dir="rtl"] .ui5-nli-group-counter {
+	margin-right: 0.25rem;
+	margin-left: 1rem;
+}

package/src/themes/NotificationListItem.css

@@ -0,0 +1,164 @@
+@import "./NotificationListItemBase.css";
+@import "./NotificationPrioIcon.css";
+
+:host([wrapping-type="None"]) .ui5-nli-title-text {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+:host(:not([wrapping-type="Normal"])) .ui5-nli-description {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+:host([_show-more-pressed]) .ui5-nli-title-text {
+	-webkit-line-clamp: unset;
+}
+
+:host([_show-more-pressed]) .ui5-nli-description  {
+	-webkit-line-clamp: unset;
+}
+
+:host([read]) .ui5-nli-title-text {
+	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);
+}
+
+:host(:last-of-type) {
+	border-bottom-left-radius: var(--_ui5-notification_item-border-raius);
+	border-bottom-right-radius: var(--_ui5-notification_item-border-raius);
+}
+
+:host(:first-of-type) .ui5-nli-focusable:after {
+	border-top-left-radius: var(--_ui5-notification_item-border-raius);
+	border-top-right-radius: var(--_ui5-notification_item-border-raius);
+}
+:host(:last-of-type) .ui5-nli-focusable:after {
+	border-bottom-left-radius: var(--_ui5-notification_item-border-raius);
+	border-bottom-right-radius: var(--_ui5-notification_item-border-raius);
+}
+/* End */
+
+.ui5-nli-root {
+	display: flex;
+	flex-direction: row-reverse;
+	position: relative;
+	width: 100%;
+	padding: 1rem 0.5rem 1rem 1rem;
+	box-sizing: border-box;
+	cursor: pointer;
+}
+
+.ui5-nli-content {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0; /* fixes Chrome flex issue */
+	width: 100%;
+	padding: 0 1rem 0 0.75rem;
+	font-family: "72override", var(--sapFontFamily);
+	box-sizing: border-box;
+}
+
+.ui5-nli-title-text-wrapper {
+	display: flex;
+	flex-direction: row;
+}
+
+.ui5-nli-title-text {
+	display: flex;
+	margin-bottom: 0.25rem;
+	box-sizing: border-box;
+}
+
+.ui5-nli-title-text {
+	color: var(--sapGroup_TitleTextColor);
+	font-weight: bold;
+	font-size: var(--sapFontHeader6Size);
+}
+
+.ui5-nli-description {
+	display: flex;
+	margin-top: 0.5rem;
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSize);
+	box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*  Footer */
+.ui5-nli-footer {
+	display: flex;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSize);
+	padding-top: 0.5rem;
+	box-sizing: border-box;
+	flex-wrap: wrap;
+}
+
+.ui5-nli-footer-divider {
+	position: relative;
+	align-items: center;
+	margin-left: 0.5rem;
+	margin-right: 0.625rem;
+}
+
+.ui5-nli-footer-divider::after {
+	position: absolute;
+	content: ".";
+	top: -20%;
+}
+
+.ui5-nli-footer-showMore {
+	margin-left: 1rem;
+}
+
+::slotted([slot^="footnotes"]) {
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSize);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+/* Actions */
+.ui5-nli-actions {
+	display: flex;
+	box-sizing: border-box;
+}
+
+/* RTL */
+
+[dir="rtl"] .ui5-nli-footer-divider {
+	margin-right: 0.5rem;
+	margin-left: 0.625rem;
+}
+
+[dir="rtl"] .ui5-nli-footer-showMore {
+	margin-right: 1rem;
+}

package/src/themes/NotificationListItemBase.css

@@ -0,0 +1,57 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+	min-height: var(--_ui5_list_item_base_height);
+	background: var(--ui5-listitem-background-color);
+	cursor: pointer;
+}
+
+:host([has-border]) {
+	border-bottom: var(--ui5-listitem-border-bottom);
+}
+
+:host([focused]) .ui5-nli-focusable {
+	outline: none;
+}
+
+:host([focused]) .ui5-nli-focusable:after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	pointer-events: none;
+}
+
+:host([busy])  {
+	opacity: 0.6;
+	pointer-events: none;
+}
+
+:host([busy]) .ui5-nli-busy {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.ui5-nli-action {
+	flex-shrink: 0;
+	margin-right: 0.5rem;
+}
+
+.ui5-nli-overflow-btn {
+	margin-right: 0.5rem;
+}
+
+[dir="rtl"] .ui5-nli-group-action {
+	margin-left: 0.5rem;
+}
+
+[dir="rtl"] .ui5-nli-overflow-btn {
+	margin-left: 0.5rem;
+}

package/src/themes/NotificationPrioIcon.css

@@ -0,0 +1,22 @@
+.ui5-prio-icon {
+	min-width: 1rem;
+	min-height: 1rem;
+	padding-right: 0.5rem;
+}
+
+.ui5-prio-icon--message-error {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-prio-icon--message-warning {
+	color: var(--sapCriticalElementColor);
+}
+
+.ui5-prio-icon--message-success {
+	color: var(--sapPositiveElementColor);
+}
+
+[dir=rtl] .ui5-prio-icon {
+	padding-left: .5rem;
+	padding-right: 0rem;
+}

package/src/themes/Page.css

@@ -0,0 +1,129 @@
+
+:host(:not([hidden])) {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+
+.ui5-page-root {
+    height: inherit;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+    box-sizing: border-box;
+    background-color: inherit;
+}
+
+.ui5-page-header-root {
+    z-index: 1;
+}
+
+.ui5-page-content-root {
+    overflow: hidden auto;
+    position: absolute;
+    will-change: scroll-position;
+    width: 100%;
+    top: 2.75rem;
+    bottom: 0;
+    box-sizing: border-box;
+}
+
+.ui5-page-footer-root {
+    width: 100%;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+}
+
+:host([floating-footer]) .ui5-page-footer-root {
+    opacity: 1;
+    bottom: 0.5rem;
+}
+/*** Responsive paddings ***/
+
+:host([media-range="S"]) .ui5-page-content-root,
+:host([media-range="S"][floating-footer]) .ui5-page-footer-root {
+	padding: 0 1rem;
+}
+
+:host([media-range="S"]) ::slotted([ui5-bar][slot="header"]) {
+    box-sizing: border-box;
+    padding: 0 .25rem;
+}
+
+:host([media-range="M"]) .ui5-page-content-root,
+:host([media-range="L"]) .ui5-page-content-root,
+:host([media-range="M"][floating-footer]) .ui5-page-footer-root,
+:host([media-range="L"][floating-footer]) .ui5-page-footer-root {
+	padding: 0 2rem;
+}
+
+:host([media-range="M"]) ::slotted([ui5-bar][slot="header"]),
+:host([media-range="L"]) ::slotted([ui5-bar][slot="header"]) {
+    box-sizing: border-box;
+    padding: 0 1.25rem;
+}
+
+:host([media-range="XL"]) .ui5-page-content-root,
+:host([media-range="XL"][floating-footer]) .ui5-page-footer-root {
+	padding: 0 3rem;
+}
+
+:host([media-range="XL"]) ::slotted([ui5-bar][slot="header"]) {
+    box-sizing: border-box;
+    padding: 0 2.25rem;
+}
+
+:host([disable-scrolling]) .ui5-page-content-root {
+    overflow: hidden;
+}
+
+:host([hide-footer]:not([floating-footer])) .ui5-page-footer-root {
+    display: none;
+}
+
+:host([floating-footer]:not([hide-footer])) .ui5-page-footer-root {
+    animation: bounceShow 0.35s forwards ease-in-out;
+}
+
+:host([floating-footer][hide-footer]) .ui5-page-footer-root {
+    animation: bounceHide 0.35s forwards ease-in-out;
+}
+
+/* BackgroundDesign */
+:host([background-design="Solid"]) {
+    background-color: var(--sapBackgroundColor);
+}
+
+:host([background-design="Transparent"]) {
+    background-color: transparent;
+}
+
+:host([background-design="List"]) {
+    background-color: var(--_ui5_page_list_bg);
+}
+
+/* Footer animation */
+@keyframes bounceShow {
+    0% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes bounceHide {
+    0% {
+        transform: translateY(-5%);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}

package/src/themes/ProductSwitch.css

@@ -0,0 +1,30 @@
+:host {
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+}
+
+.ui5-product-switch-root {
+	display: flex;
+	flex-wrap: wrap;
+	width: 752px; /* 4 * item size */
+	padding: 1.25rem .75rem;
+}
+
+:host([desktop-columns="3"]) .ui5-product-switch-root {
+	width: 564px; /* 3 * item size */
+}
+
+@media only screen and (max-width: 900px) {
+	.ui5-product-switch-root {
+		width: 564px; /* 3 * item size */
+	}
+}
+
+@media only screen and (max-width: 600px) {
+	.ui5-product-switch-root,
+	:host([desktop-columns="3"]) .ui5-product-switch-root {
+		flex-direction: column;
+		padding: 0;
+		width: 100%;
+	}
+}