@ui5/webcomponents-fiori 1.0.0 → 1.0.1

package/src/themes/SideNavigation.css

@@ -0,0 +1,50 @@
+:host(:not([hidden])) {
+    display: inline-block;
+    width: 15rem;
+    height: 100%;
+    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
+    transition: width .25s;
+    --_ui5-tree-toggle-box-width: 1rem;
+}
+
+:host([collapsed]) {
+    width: 3rem;
+    min-width: 3rem;
+}
+
+.ui5-sn-bottom-content-border {
+    width: 100%;
+    padding: 0 0.5rem;
+    margin: 0.25rem 0;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.ui5-sn-bottom-content-border > span {
+    width: 90%;
+    height: .125rem;
+    background: var(--sapList_GroupHeaderBorderColor);
+}
+
+.ui5-sn-root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var( --sapList_Background);
+}
+
+.ui5-sn-spacer {
+    flex: auto;
+    min-height: 3rem;
+}
+
+.ui5-side-navigation-popover [ui5-li][focused]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
+	border-top-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
+}
+
+.ui5-side-navigation-popover [ui5-li][focused]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
+	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
+}

package/src/themes/Timeline.css

@@ -0,0 +1,52 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-timeline-root {
+	padding: var(--_ui5_tl_padding);
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.ui5-timeline-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ui5-timeline-list-item {
+	margin-bottom: var(--_ui5_tl_li_margin_bottom);
+}
+
+.ui5-timeline-list-item:last-child {
+	margin-bottom: 0;
+}
+
+:host([layout="Horizontal"]) .ui5-timeline-list {
+	white-space: nowrap;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+:host([layout="Horizontal"]) .ui5-timeline-list-item {
+	display: inline-block;
+	margin-left: var(--_ui5_tl_li_margin_bottom);
+}
+
+:host([layout="Horizontal"]) .ui5-timeline-scroll-container {
+	overflow: auto;
+	/* The padding values of the parent container are added to the size of scroll container */
+	width: calc(100% + 0.5rem);
+}
+
+:host([layout="Horizontal"]) [dir=rtl] .ui5-timeline-list-item {
+	display: inline-block;
+	margin-left: inherit;
+	margin-right: var(--_ui5_tl_li_margin_bottom);
+}
+
+:host([layout="Horizontal"]) [dir=rtl] .ui5-timeline-scroll-container {
+	/* The padding values of the parent container are added to the size of scroll container */
+	width: calc(100% - 0.5rem);
+}

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,179 @@
+:host {
+	height: auto;
+}
+
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host([active][actionable]) .ui5-uci-file-name,
+:host([active][actionable]) .ui5-uci-description,
+:host([active][actionable]) .ui5-uci-edit-buttons ui5-button,
+:host([active][actionable]) .ui5-li-deletebtn ui5-button,
+:host([active][actionable]) .ui5-uci-progress-labels ui5-label {
+	color: var(--sapList_Active_TextColor);
+}
+
+
+.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;
+}
+
+:host([active][actionable]) ::slotted([ui5-icon][slot=thumbnail]) {
+	color: var(--sapList_Active_TextColor);
+}
+
+::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;
+}