@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/src/themes/Bar.css

@@ -0,0 +1,78 @@
+:host {
+	background-color: var(--sapPageHeader_Background);
+	height: var(--_ui5_bar_base_height);
+	width: 100%;
+	box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
+	display: block;
+}
+
+.ui5-bar-root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: inherit;
+	width: inherit;
+	background-color: inherit;
+	box-shadow: inherit;
+	border-radius: inherit;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-inline-start: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.ui5-bar-root .ui5-bar-content-container {
+	min-width: 30%;
+}
+
+.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
+	min-width: 0px;
+	overflow: hidden;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	padding-inline-end: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+}
+.ui5-bar-root .ui5-bar-midcontent-container {
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+:host([design="Footer"]){
+	background-color: var(--sapPageFooter_Background);
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+	box-shadow: none;
+}
+
+:host([design="Subheader"]){
+	height: var(--_ui5_bar_subheader_height);
+}
+
+:host([design="FloatingFooter"]){
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background-color: var(--sapPageFooter_Background);
+	box-shadow: var(--sapContent_Shadow1);
+	border: none;
+}
+  /* This selector works well for all browsers except IE11.
+  After support for IE11 is stopped, the specific selectors added for it can be removed and this selector can be uncommented*/
+/* ::slotted(*) {
+	margin: 0 0.25rem;
+} */
+
+/*Specific selector added for support in IE11*/
+::slotted(.ui5-bar-content) {
+	margin: 0 0.25rem;
+}

package/src/themes/BarcodeScannerDialog.css

@@ -0,0 +1,34 @@
+.ui5-barcode-scanner-dialog-root::part(content) {
+    padding: .4375rem;
+}
+
+/* video */
+.ui5-barcode-scanner-dialog-video-wrapper,
+.ui5-barcode-scanner-dialog-video {
+    height:100%;
+    width: 100%;
+}
+
+.ui5-barcode-scanner-dialog-video {
+    object-fit: cover;
+}
+
+/* footer */
+.ui5-barcode-scanner-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+/* busy indicator */
+.ui5-barcode-scanner-dialog-busy {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+}
+
+.ui5-barcode-scanner-dialog-busy:not([active]) {
+	display: none;
+}

package/src/themes/DynamicSideContent.css

@@ -0,0 +1,66 @@
+:host {
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.ui5-dsc-root {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow-x: hidden;
+	overflow-y: auto;
+	display: flex;
+}
+
+.ui5-dsc-main,
+.ui5-dsc-side {
+	display: inline;
+	position: relative;
+	overflow-x: hidden;
+	overflow-y: auto;
+	box-sizing: border-box;
+	flex: none;
+}
+
+.ui5-dsc-root > div[class^="ui5-dcs-span"],
+.ui5-dsc-root > aside[class^="ui5-dsc-span"] {
+	overflow: auto;
+}
+
+.ui5-dsc-main.ui5-dsc-span-fixed {
+	width: calc(100% - 21.25rem);
+}
+
+.ui5-dsc-side.ui5-dsc-span-fixed {
+	width: 21.25rem;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-0 {
+	display: none;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-3 {
+	width: 25%;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-4 {
+	width: 33.333%;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-6 {
+	width: 50%;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-8 {
+	width: 66.666%;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-9 {
+	width: 75%;
+}
+
+.ui5-dsc-root > .ui5-dsc-span-12 {
+	width: 100%;
+}

package/src/themes/FlexibleColumnLayout.css

@@ -0,0 +1,111 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: block;
+	background: var(--_ui5_fcl_solid_bg);
+}
+
+.ui5-fcl-root {
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+/* columns */
+.ui5-fcl-column {
+	background: inherit;
+	box-sizing: border-box;
+	will-change: width;
+	overflow-y: auto;
+}
+
+.ui5-fcl-column-animation {
+	transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
+}
+
+:host([_visible-columns="2"]) .ui5-fcl-column--start {
+	border-inline-end: var(--_ui5_fcl_column_border);
+}
+
+:host([_visible-columns="3"]) .ui5-fcl-column--start {
+	border-inline-end: var(--_ui5_fcl_column_border);
+}
+
+:host([_visible-columns="2"]) .ui5-fcl-column--middle {
+	border-inline-start: var(--_ui5_fcl_column_border)
+}
+
+:host([_visible-columns="3"]) .ui5-fcl-column--middle {
+	border-inline-start: var(--_ui5_fcl_column_border)
+}
+
+:host([_visible-columns="3"]) .ui5-fcl-column--middle {
+	border-inline-end: var(--_ui5_fcl_column_border)
+}
+
+:host([_visible-columns="3"]) .ui5-fcl-column--end {
+	border-inline-start: var(--_ui5_fcl_column_border);
+}
+
+.ui5-fcl-column--hidden {
+	display: none;
+}
+
+/* arrow */
+.ui5-fcl-arrow-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1rem;
+	background-color: var(--sapShell_Background);
+}
+
+.ui5-fcl-arrow {
+	position: relative;
+	width: 1.5rem;
+	height: 1.5rem;
+	min-width: 1.5rem;
+	will-change: transform;
+	overflow: visible;
+	z-index: 1;
+}
+
+/* arrow decoration */
+.ui5-fcl-arrow:before {
+	background-image: var(--_ui5_fcl_decoration_top);
+	background-position-y: -0.3125rem;
+	bottom: 100%;
+}
+
+.ui5-fcl-arrow:after {
+	background-image: var(--_ui5_fcl_decoration_bottom);
+	background-position-y: 0.3125rem;
+	top: 100%;
+}
+
+.ui5-fcl-arrow:before,
+.ui5-fcl-arrow:after {
+	content: '';
+	position: absolute;
+	left: 0;
+	height: 4rem;
+	width: 100%;
+	transition: all 0.1s ease-in;
+	background-repeat: no-repeat;
+	background-size: 0.0625rem 100%;
+	background-position-x: calc(50% - 0.03125rem);
+}
+
+.ui5-fcl-arrow:hover:before,
+.ui5-fcl-arrow:hover:after {
+	height: 7rem;
+}
+
+/*
+ * IE FIX:
+ * The column separator, that is also the arrow container, is 1rem,
+ * whereas the arrow button is 1.5rem and the arrows just doesnt center within the 
+*/
+.ui5-fcl--ie .ui5-fcl-arrow {
+	margin: 0 -0.75rem;
+}

package/src/themes/IllustratedMessage.css

@@ -0,0 +1,171 @@
+: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_MaskTypeAlpha {
+	mask-type:alpha;
+}
+
+.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/MediaGallery.css

@@ -0,0 +1,153 @@
+:host {
+	height:100%;
+}
+
+:host,
+.ui5-media-gallery-display-wrapper,
+.ui5-media-gallery-display {
+	width: 100%;
+}
+
+.ui5-media-gallery-root {
+	width: inherit;
+	height: inherit;
+	background: var(--sapBaseColor);
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
+	flex-direction: column-reverse;
+}
+
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-root {
+	flex-direction: row-reverse;
+}
+
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root {
+	flex-direction: row;
+}
+
+/* DISPLAY */
+
+.ui5-media-gallery-display-wrapper {
+	display: flex;
+	justify-content: center;
+	position: relative;
+}
+
+/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
+:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
+	flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
+	flex-basis: 0;
+}
+
+.ui5-media-gallery-display {
+	position:relative;
+	margin: 1rem;
+	display: flex;
+	justify-content: center;
+}
+
+.ui5-media-gallery-display [ui5-media-gallery-item] {
+	z-index: 1;
+}
+
+/* mobile platform */
+[ui5-carousel] {
+	width: calc(100% - 2rem);
+}
+[ui5-carousel]::part(item) {
+	padding: 0;
+	overflow: hidden;
+}
+
+/* THUMBNAILS */
+.ui5-media-gallery-thumbnails-wrapper {
+	margin-block: 1rem 0;
+}
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
+	margin-block: 0 1rem;
+}
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
+	margin-inline: 0 1rem;
+}
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
+	margin-inline: 1rem 0;
+}
+
+/* show all thumbnails in a single scrollable row */
+:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+/* show all thumbnails in a scrollable area with multiple columns */
+:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
+	overflow-y: auto;
+	overflow-x: hidden;
+	flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
+	flex-basis: 0;
+}
+
+.ui5-media-gallery-thumbnails-wrapper ul {
+	height: 5rem;
+	display: flex;
+	flex-wrap: nowrap;
+	padding-left: 0; /* disable browser default css */
+	margin-top: 0; /* disable browser default css */
+	margin-bottom: 0; /* disable browser default css */
+	list-style-type: none; /* disable browser default css */
+	padding-inline-start: 0; /* disable browser default css */
+}
+
+/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
+:host([effective-layout="Horizontal"]) ul {
+	width: 5rem;
+	flex-wrap: wrap;
+}
+/* two columns on M-size */
+:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
+	width: 10rem;
+}
+/* three columns on L-size */
+:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
+	width: 15rem;
+}
+/* four columns on XL-size */
+:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
+	width: 20rem;
+}
+
+.ui5-media-gallery-thumbnail,
+.ui5-media-gallery-overflow [ui5-button] {
+	width: 4rem;
+	height: 4rem;
+	flex-shrink: 0;
+}
+
+.ui5-media-gallery-overflow [ui5-button] {
+	background: var(--_ui5_media_gallery_overflow_btn_background);
+	color: var(--_ui5_media_gallery_overflow_btn_color);
+	border: var(--_ui5_media_gallery_overflow_btn_border);
+}
+
+.ui5-media-gallery-thumbnail,
+.ui5-media-gallery-overflow {
+	margin: 0 0 0 1rem;
+}
+
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
+:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
+	margin: 1rem 0 0 1rem;
+}
+
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
+:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
+	margin: 1rem 0 0 1rem;
+}
+
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
+:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
+	margin: 1rem 1rem 0 0;
+}