@ui5/webcomponents-fiori 1.0.0 → 1.1.1

package/src/themes/TimelineItem.css

@@ -0,0 +1,287 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-tli-root {
+	display: flex;
+}
+
+:host([layout="Horizontal"]) .ui5-tli-root {
+	flex-direction: column;
+}
+
+:host([layout="Vertical"]) .ui5-tli-indicator {
+	position: relative;
+	width: 2rem;
+}
+
+:host([layout="Horizontal"]) .ui5-tli-indicator {
+	position: relative;
+	display: flex;
+	height: 2rem;
+	align-items: center;
+}
+
+:host([layout="Vertical"]) .ui5-tli-indicator::before {
+	content: "";
+	display: inline-block;
+	background-color: var(--sapContent_ForegroundBorderColor);
+	width: 1px;
+	position: absolute;
+	top: 2.125rem;
+	bottom: var(--_ui5_timeline_tli_indicator_before_bottom);
+	left: 50%;
+}
+
+:host([layout="Horizontal"]) .ui5-tli-indicator::before {
+	content: "";
+	display: inline-block;
+	background-color: var(--sapContent_ForegroundBorderColor);
+	height: 1px;
+	top: 50%;
+	position: absolute;
+	left: 2.0625rem;
+	right: var(--_ui5_timeline_tli_indicator_before_right);
+}
+:host([layout="Vertical"]) .ui5-tli-indicator.ui5-tli-indicator-large-line::before {
+	bottom: var(--_ui5_timeline_tli_indicator_before_without_icon_bottom);
+}
+
+:host([layout="Horizontal"]) .ui5-tli-indicator.ui5-tli-indicator-large-line::before{
+	right: var(--_ui5_timeline_tli_indicator_before_without_icon_right);
+}
+
+/* Line when no Icon is provided */
+:host([layout="Vertical"]:not([icon])) .ui5-tli-indicator::before {
+	bottom: var(--_ui5_timeline_tli_indicator_before_without_icon_bottom);
+	top: 1.875rem;
+}
+
+/* Line when no Icon is provided in horizontal*/
+:host([layout="Horizontal"]:not([icon])) .ui5-tli-indicator::before {
+	top: 50%;
+	right: var(--_ui5_timeline_tli_indicator_before_without_icon_right);
+	left: 1.6875rem;
+}
+
+:host([layout="Vertical"]:not([icon])) .ui5-tli-indicator.ui5-tli-indicator-short-line::before {
+	bottom: var(--_ui5_timeline_tli_indicator_before_bottom);
+}
+
+:host([layout="Horizontal"]:not([icon])) .ui5-tli-indicator.ui5-tli-indicator-short-line::before {
+	right: var(--_ui5_timeline_tli_indicator_before_right);
+}
+
+/* No Icon Dot */
+:host(:not([icon])) .ui5-tli-indicator::after {
+	content: "";
+	display: inline-block;
+	box-sizing: border-box;
+	border: 1px solid var(--sapContent_NonInteractiveIconColor);
+	background-color: var(--sapContent_NonInteractiveIconColor);
+	border-radius: 50%;
+	width: .4375rem;
+	height: .4375rem;
+	position: absolute;
+	top: 0.9375rem;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+/* No Icon Dot in Hotizontal */
+:host([layout="Horizontal"]:not([icon])) .ui5-tli-indicator::after {
+	top: 0.78125rem;
+	left: 0.9625rem;
+}
+
+:host(:last-child) .ui5-tli-indicator::before {
+	display: none;
+}
+
+:host(:last-child) .ui5-tli-indicator::before {
+	display: none;
+}
+
+.ui5-tli-icon-outer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: .25rem;
+	height: 1.625rem;
+	width: 2rem;
+}
+
+:host([layout="Horizontal"]) .ui5-tli-icon-outer {
+	margin-top: 0rem;
+	height: 1.3125rem;
+}
+
+.ui5-tli-icon {
+	color: var(--sapContent_NonInteractiveIconColor);
+	height: 1.375rem;
+	width: 1.375rem;
+}
+
+:host([layout="Horizontal"]) .ui5-tli-dummy-icon-container {
+	height: 1.375rem;
+	width: 1.375rem;
+	display: inline-block;
+	outline: none;
+}
+
+.ui5-tli-bubble {
+	background: var(--sapGroup_ContentBackground);
+	border: 1px solid var(--sapList_BorderColor);
+	box-sizing: border-box;
+	border-radius: 0.25rem;
+	flex: 1;
+	position: relative;
+	margin-left: .5rem;
+	padding: var(--_ui5_tl_bubble_padding);
+}
+
+:host([layout="Horizontal"]) .ui5-tli-bubble {
+	margin-top: .5rem;
+	margin-left: 0;
+}
+
+.ui5-tli-bubble:focus {
+	outline: none;
+}
+
+.ui5-tli-bubble:focus::after {
+	content: "";
+    border: var(--_ui5_TimelineItem_bubble_border_width) var(--_ui5_TimelineItem_bubble_border_style) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_TimelineItem_bubble_border_radius);
+	position: absolute;
+	top: var(--_ui5_TimelineItem_bubble_border_top);
+	right: var(--_ui5_TimelineItem_bubble_border_right);
+	bottom: var(--_ui5_TimelineItem_bubble_border_bottom);
+	left: var(--_ui5_TimelineItem_bubble_border_left);
+	pointer-events: none;
+}
+
+:host([layout="Horizontal"]) .ui5-tli-bubble:focus::after {
+	top: -0.625rem;
+	left: -0.125rem;
+}
+
+.ui5-tli-bubble-arrow {
+	width: var(--_ui5_TimelineItem_arrow_size);
+	padding-bottom: var(--_ui5_TimelineItem_arrow_size);
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+}
+
+.ui5-tli-bubble-arrow::before {
+	content: "";
+	background: var(--sapGroup_ContentBackground);
+	border: 1px solid var(--sapList_BorderColor);
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transform-origin: 0 100%;
+	transform: rotate(45deg);
+}
+
+:host([layout="Horizontal"]) .ui5-tli-bubble-arrow::before {
+	transform: rotate(315deg);
+}
+
+.ui5-tli-bubble-arrow--left {
+	left: calc(-1 * var(--_ui5_TimelineItem_arrow_size));
+}
+
+.ui5-tli-bubble-arrow--top {
+	top: calc(-1 * var(--_ui5_TimelineItem_arrow_size));
+}
+
+.ui5-tli-bubble-arrow--left::before {
+	left: 50%;
+	width: 50%;
+	transform-origin: 100% 100%;
+}
+
+.ui5-tli-bubble-arrow--top::before {
+	left: 42%;
+	width: 75%;
+	transform-origin: 152% 104%;
+}
+
+.ui5-tli-title,
+.ui5-tli-desc {
+	color: var(--sapTextColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-weight: 400;
+	font-size: var(--sapFontSize);
+}
+
+.ui5-tli-title span {
+	display: inline-block;
+	vertical-align: top;
+}
+
+.ui5-tli-subtitle {
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-weight: 400;
+	font-size: var(--sapFontSmallSize);
+	padding-top: .375rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui5-tli-desc {
+	padding-top: .75rem;
+}
+
+[dir=rtl] .ui5-tli-bubble-arrow--left {
+	right: calc(-1 * var(--_ui5_TimelineItem_arrow_size));
+	left: auto;
+	transform: scale(-1, 1);
+}
+
+[dir=rtl] .ui5-tli-bubble-arrow--top {
+	right: 0;
+	left: auto;
+	transform: scale(-1, 1);
+}
+
+[dir=rtl] .ui5-tli-bubble {
+	margin-left: auto;
+	margin-right: .5rem;
+}
+
+:host([layout="Horizontal"]) [dir=rtl] .ui5-tli-bubble {
+	margin-right: 0;
+}
+
+[dir=rtl] .ui5-tli-bubble:focus::after {
+	left: var(--_ui5_TimelineItem_bubble_rtl_left_offset);
+	right: var(--_ui5_TimelineItem_bubble_rtl_right_offset);
+}
+
+:host([layout="Horizontal"]) [dir=rtl]  .ui5-tli-bubble:focus::after {
+	right: 0
+}
+
+:host([layout="Horizontal"]:not([icon])) [dir=rtl] .ui5-tli-indicator::after {
+	right: 0.625rem;
+}
+
+/* Line when no Icon is provided in horizontal*/
+:host([layout="Horizontal"]:not([icon])) [dir=rtl] .ui5-tli-indicator::before {
+	right: 1.9375rem;
+	left: var(--_ui5_timeline_tli_indicator_before_right);
+}
+
+:host([layout="Horizontal"]) [dir=rtl] .ui5-tli-indicator::before {
+	left: var(--_ui5_timeline_tli_indicator_before_right);
+	right: 2.125rem;
+}

package/src/themes/UploadCollection.css

@@ -0,0 +1,118 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-uc-content {
+	position: relative;
+}
+
+/* No Files */
+.uc-no-files {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	background-color: var(--sapGroup_ContentBackground);
+}
+
+.uc-no-files .icon-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 8rem;
+}
+
+.uc-no-files .icon-container [ui5-icon] {
+	width: 6rem;
+	height: 6rem;
+	color: var(--sapContent_NonInteractiveIconColor);
+	opacity: 0.5;
+}
+
+.uc-no-files .title {
+	font-size: var(--sapFontHeader2Size);
+	color: var(--sapGroup_TitleTextColor);
+	margin: 1rem 0;
+}
+
+.uc-no-files .subtitle {
+	font-size: var(--sapFontHeader5Size);
+	color: var(--sapContent_LabelColor);
+    margin-bottom: 2rem;
+}
+
+/* Drag and Drop */
+.uc-dnd-overlay {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	left: 0.5rem;
+	bottom: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.uc-drag-overlay {
+	border: var(--ui5_upload_collection_drag_overlay_border);
+}
+
+.uc-drop-overlay {
+	border: var(--ui5_upload_collection_drop_overlay_border);
+}
+
+/* use pseudo element to set opacity only for the content and not on the border */
+.uc-dnd-overlay::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: var(--sapGroup_ContentBackground);
+	opacity: 0.8;
+}
+
+/* use pseudo element to set opacity only for the content and not on the border */
+.uc-drop-overlay::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: var(--ui5_upload_collection_drop_overlay_background);
+	opacity: 0.05;
+}
+
+.uc-dnd-overlay [ui5-icon] {
+	width: 4rem;
+	height: 4rem;
+	margin-bottom: 1rem;
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
+.uc-dnd-overlay .dnd-overlay-text {
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontHeader4Size);
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
+.uc-dnd-overlay [ui5-icon],
+.uc-dnd-overlay .dnd-overlay-text {
+	z-index: 1;
+	pointer-events: none;
+}
+
+.uc-drop-overlay [ui5-icon],
+.uc-drop-overlay .dnd-overlay-text {
+	color: var(--sapContent_DragAndDropActiveColor);
+}
+
+.uc-no-files-dnd-overlay {
+	visibility: hidden;
+}

package/src/themes/UploadCollectionItem.css

@@ -0,0 +1,166 @@
+:host {
+	height: auto;
+}
+
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-li-root.ui5-uci-root {
+	padding: 1rem;
+}
+
+.ui5-uci-edit-buttons {
+	display: flex;
+}
+
+/* Thumbnail */
+.ui5-uci-thumbnail {
+	width: 3rem;
+	height: 3rem;
+	margin-right: 0.75rem;
+}
+
+::slotted([ui5-icon][slot="thumbnail"]) {
+	width: 3rem;
+	height: 3rem;
+	font-size: 2.5rem;
+}
+
+::slotted(img[slot="thumbnail"]) {
+	width: 3rem;
+	height: 3rem;
+}
+
+:host([actionable]) ::slotted([ui5-icon][slot="thumbnail"]) {
+	color: var(--sapContent_IconColor);
+}
+
+/* Content */
+.ui5-uci-content-and-edit-container {
+	flex: 1 1 auto;
+	min-width: 0; /* fixes chrome overflow issue */
+	display: flex;
+	align-items: center;
+}
+
+.ui5-uci-content-and-progress {
+	max-width: 100%;
+	min-width: 0;
+	display: flex;
+	flex: 1 1 auto;
+}
+
+.ui5-uci-content {
+	flex: 1 1 auto;
+	margin-right: .5rem;
+	width: 100%;
+	min-width: 0; /* fixes chrome overflow issue */
+}
+
+.ui5-uci-file-name {
+	width: 100%;
+	display: block;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontLargeSize);
+	color: var(--sapTextColor);
+	margin-bottom: 0.25rem;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+[ui5-link].ui5-uci-file-name {
+	pointer-events: all;
+}
+
+.ui5-uci-description {
+	margin-top: 0.375rem;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontMediumSize);
+	color: var(--sapContent_LabelColor);
+	white-space: initial;
+}
+
+/* Edit mode */
+.ui5-uci-edit-container [ui5-input] {
+	width: 60%;
+	pointer-events: all;
+	min-width: auto;
+}
+
+.ui5-uci-file-extension {
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontMediumSize);
+	color: var(--sapTextColor);
+	white-space: no-wrap;
+	overflow: hidden;
+	margin-left: 0.5rem;
+	width: 40%;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+/* Buttons */
+.ui5-uci-root-editing .ui5-li-detailbtn,
+.ui5-uci-root-editing .ui5-li-deletebtn,
+.ui5-uci-root-uploading .ui5-li-detailbtn,
+.ui5-uci-root-uploading .ui5-li-deletebtn {
+	display: none;
+}
+
+.ui5-uci-edit-buttons {
+	pointer-events: all;
+	margin-left: 1rem;
+}
+
+.ui5-uci-edit-rename-btn {
+	margin-right: 0.125rem;
+}
+
+/* Progress Box */
+.ui5-uci-progress-box {
+	width: 20%;
+	min-width: 4rem;
+}
+
+@media(max-width: 30rem) {
+	.ui5-uci-content-and-edit-container {
+		display: block;
+	}
+
+	.ui5-uci-content-and-progress {
+		flex-wrap: wrap;
+	}
+
+	.ui5-uci-progress-box {
+		width: 100%;
+		margin-top: .5rem;
+	}
+
+	.ui5-uci-content {
+		width: 100%;
+	}
+
+	.ui5-uci-edit-buttons,
+	.ui5-li-detailbtn,
+	.ui5-li-deletebtn {
+		margin-top: 0.75rem;
+	}
+
+	.ui5-uci-edit-buttons {
+		margin-left: 0;
+	}
+}
+
+.ui5-uci-progress-indicator {
+	height: 1.125rem;
+	margin-bottom: 0.5rem;
+	padding: 5px 0;
+	box-sizing: border-box;
+}
+
+.ui5-uci-progress-labels {
+	display: flex;
+	justify-content: space-between;
+}

package/src/themes/ViewSettingsDialog.css

@@ -0,0 +1,56 @@
+[on-desktop] .ui5-vsd-content {
+	height: 375px;
+	min-width: 350px;
+}
+
+.ui5-vsd-header {
+	width: 100%;
+}
+
+.ui5-vsd-header > [ui5-bar] {
+	height: 4rem;
+}
+
+.ui5-vsd-title {
+	margin-bottom: 0.3rem;
+}
+
+.ui5-vsd-start {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.ui5-vsd-bar-title {
+	display: flex;
+	flex-direction: column;
+	margin-left: .5rem;
+}
+
+.ui5-vsd-back-button {
+	margin-right: .5rem;
+}
+
+.ui5-vsd-footer {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	margin: 0.1875rem 1rem;
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
+
+.ui5-vsd-footer [ui5-button]:first-child {
+	margin-right: 0.5rem;
+	min-width: 4rem;
+}
+
+.ui5-vsd-sort {
+	width: 100%;
+	height: 100%;
+}
+
+[ui5-li-groupheader] {
+	overflow: hidden;
+}
+

package/src/themes/Wizard.css

@@ -0,0 +1,89 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: block;
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+}
+
+.ui5-wiz-root {
+	height: 100%;
+	width: 100%;
+	position: relative;
+}
+
+.ui5-wiz-content {
+	position: relative;
+	overflow: auto;
+	height: calc(100% - 4rem); /* the navigation height is 4rem */
+	box-sizing: border-box;
+	background: var(--sapBackgroundColor);
+}
+
+.ui5-wiz-content-item {
+	display: block;
+	box-sizing: border-box;
+	padding: 1rem 2rem;
+}
+
+.ui5-wiz-content-item[hidden] {
+	display: none;
+}
+
+.ui5-wiz-content-item[stretch] {
+	/* Add 2rem to ensure there is enough scroll height to reach the last step */
+	min-height: calc(100% + 2rem);
+}
+
+[ui5-wizard-tab][data-ui5-wizard-expanded-tab="true"] + [ui5-wizard-tab][data-ui5-wizard-expanded-tab="false"] {
+	width: 2rem;
+	padding-left: .5rem;
+}
+
+[ui5-wizard-tab][data-ui5-wizard-expanded-tab="false"] {
+	width: .25rem;
+	padding: 0;
+}
+.ui5-wiz-nav-list {
+	display: table;
+	table-layout: fixed;
+	position: relative;
+	list-style: none;
+	margin: 0;
+	box-sizing: border-box;
+	width: 100%;
+	height: 2rem;
+	padding: 0;
+}
+
+[ui5-wizard-tab] {
+	display: table-cell;
+	position: relative;
+}
+
+.ui5-wiz-nav {
+	box-sizing: border-box;
+	height: 4rem;
+	padding: 0.875rem 2rem;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	background-color: var(--sapObjectHeader_Background);
+	font-size: .875rem;
+	box-shadow: var(--sapContent_HeaderShadow);
+	outline: none;
+	display: flex;
+	align-items: center;
+}
+
+[ui5-wizard-tab][data-ui5-wizard-expanded-tab="false"] + [ui5-wizard-tab][data-ui5-wizard-expanded-tab="false"] {
+	width: .25rem;
+}
+
+[ui5-wizard-tab][data-ui5-wizard-expanded-tab-prev="true"],
+[ui5-wizard-tab][data-ui5-wizard-expanded-tab="false"] + [ui5-wizard-tab][data-ui5-wizard-expanded-tab-prev="true"] {
+	width: 2rem;
+	padding-right: .75rem;
+}