@openui5/sap.m/src/sap/m/themes/base/QuickView.less

OpenUI5 UI Library sap.m

/* ================================ */
/* CSS for control sap.m/QuickView  */
/* Base theme                       */
/* ================================ */

.sapMQuickView .sapMNav,
.sapMQuickViewCard .sapMNav {
	white-space: nowrap;
}

.sapMQuickViewCard.sapMQuickViewCardNoScroll {
	height: 100%;
}

.sapMQuickViewPage {
	.sapUiHLayout.sapUiHLayoutNoWrap .sapUiHLayoutChildWrapper {
		max-width: 100%;
	}

	&.sapMNavItem {
		vertical-align: top;
		display: inline-block;

		&.sapMNavItemHidden {
			display: none;
		}

		&.sapMNavItemOffset {
			left: -100%;
		}
	}
}

.sapMQuickViewCard .sapMQuickViewPage.sapMNavItem {
	width: 100% !important;
}

html.sap-desktop .sapMQuickViewPage .sapUiFormResGrid > div,
html.sap-tablet .sapMQuickViewPage .sapUiFormResGrid > div {
	padding: 0;
	margin: 0;
}

.sapMQuickView.sapMPopover .sapMQuickViewPage.sapMScrollContScroll,
.sapMQuickView.sapMPopover .sapMQuickViewPage.sapMPage {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	padding-top: 3rem;
}

.sapMQuickView.sapMPopover .sapMQuickViewPage.sapMScrollContScroll,
.sapMQuickView.sapMPopover .sapMQuickViewPage.sapMPage.sapMQuickViewPageWithoutHeader,
.sapUiSizeCompact .sapMQuickView.sapMPopover .sapMQuickViewPage.sapMScrollContScroll,
.sapUiSizeCompact .sapMQuickView.sapMPopover .sapMQuickViewPage.sapMPage.sapMQuickViewPageWithoutHeader {
	padding-top: 0;
}

.sapUiSizeCompact .sapMQuickView.sapMPopover .sapMQuickViewPage.sapMScrollContScroll,
.sapUiSizeCompact .sapMQuickView.sapMPopover .sapMQuickViewPage.sapMPage {
	padding-top: 2.5rem;
}

html.sap-phone .sapMQuickViewPage.sapMNavItem.sapMPage {
	position: relative;
}

html.sap-desktop .sapMQuickViewPage.sapMPage > header,
html.sap-tablet .sapMQuickViewPage.sapMPage > header {
	position: absolute;
	height: 3rem;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 16px;
}
.sapUiSizeCompact .sapMQuickView.sapMPopover header.sapMBar {
	height: 2.5rem;
}

.sapMQuickViewPage.sapMPage > header .sapMBarRight .sapUiIcon {
	font-size: 1rem;
}

html.sap-desktop .sapMQuickViewPage > section,
html.sap-tablet .sapMQuickViewPage > section {
	position: static;
	height: 100%;
	padding: 1rem;
}

.sapMQuickViewPage .sapUiFormResGridCont > div {
	padding: 0;
}

.sapMQuickViewPage .sapUiHLayout .sapUiIcon {
	line-height: 3rem;
	margin-right: .75rem;
	font-size: 2.25rem;
	font-weight: normal;
}

.sapMQuickViewPage .sapUiHLayout .sapUiIcon:before {
	line-height: 3rem;
}

.sapMQuickViewPage .sapUiVlt .sapMText {
	font-weight: normal;
}

.sapMQuickViewPage .sapUiFormResGrid.sapUiFormBackgrTranslucent > div {
	background-color : transparent;
}

.sapMQuickViewPage .sapUiSimpleForm .sapMTitle {
	margin-top: 1rem;
}

.sapMQuickViewPage .sapMFlexItem:first-child {
	width: 70%;
	display: inline-block;
}

.sapMQuickViewPage .sapMFlexItem:last-child {
	width: 30%;
	display: inline-block;
	font-family: SAP-icons;
	min-width: 3rem;
	text-align: right;
	left: -1px;
}

.sapMQuickViewPage {
	.sapMQuickViewThumbnail {
		font-family: SAP-icons;
		font-size: 2.5rem;
		font-weight: normal;
		width: 3rem;
		height: 3rem;
		background-color: @sapUiContentImagePlaceholderBackground;
		color: @sapUiContentImagePlaceholderForegroundColor;
	}
}

.sapMQuickViewPage .sapUiHLayout {
	margin-bottom: 2rem;
}

.sapMQuickViewPage .sapUiHLayout,
.sapMQuickViewPage .sapUiVlt {
	display: block;
}

.sapMQuickViewCard .sapUiHLayoutChildWrapper:only-child {
  width: 100%;
}

html.sap-phone .sapMQuickViewPage .sapUiHLayout {
	margin: 1rem 0 0 0.75rem;
}

.sapMQuickViewPage .sapUiHLayoutChildWrapper + .sapUiHLayoutChildWrapper {
	width: ~'calc(100% - 3.75rem)';
}

.sapMQuickViewPage .sapUiVltCell {
	display: -webkit-box;
	display: flex;
}

.sapMQuickViewPage .sapUiVltCell:first-child {
	max-height: 2.25rem;
	margin-bottom: 0.5rem;
	overflow: hidden;
}

.sapMQuickViewPage .sapUiVltCell + .sapUiVltCell span {
	width: 100%;
	line-height: 1.4rem;
	max-height: 2.8rem;
	overflow: hidden;
}

.sapMQuickViewPage .sapUiIcon {
	margin: 1px;
}

.sapMQuickViewPage .sapUiSimpleForm .sapUiIcon {
	margin: 0;
	width: 100%;
	text-align: right;
	outline: none;
}

.sapMQuickViewPage .sapUiSimpleForm .sapUiIcon:before {
	margin-right: 3px;
}

.sapMQuickViewPage div[class*="sapUiRespGrid"] > div[class*="sapUiRespGridSpan"] {
	overflow: visible;
}

.sapMQuickViewPage .sapMIBar-CTX .sapMTitle {
	text-shadow: @sapUiShadowText;
}

html.sap-desktop .sapMQuickViewHeader,
html.sap-tablet .sapMQuickViewHeader {
	font-size: @sapMFontHeader5Size;
}

.sapUiSizeCompact .sapMQuickView.sapMPopover .sapMQuickViewTitle {
	font-size: @sapMFontHeader6Size;
}

.sapMQuickViewPage h1,
.sapMQuickViewPage .sapUiForm .sapUiFormTitle {
	font-family: @sapUiFontHeaderFamily;
	font-size: @sapMFontHeader5Size;
	font-weight: @sapUiFontHeaderWeight;
	line-height: normal;
	color: @sapUiGroupTitleTextColor;
	padding-left: 0;
}

.sapMQuickViewPage .sapUiVltCell .sapMLnk {
	font-family: @sapUiFontHeaderFamily;
	font-size: @sapMFontHeader5Size;
	font-weight: @sapUiFontHeaderWeight;
	line-height: normal;
	white-space: normal;
  	color: @sapUiLink;

  	&:active {
		color: @sapUiLinkActive;
	}

  	&:visited {
	  	color: @sapUiLinkVisited;
	}

  	&hover:not(.sapMLnkDsbl) {
		color: @sapUiLinkHover;
	}
}

.sapMQuickViewPage .sapUiHLayout h1 span {
	white-space: normal;
}

.sapMQuickViewPage .sapUiVlt .sapMText {
	font-family: @sapUiFontFamily;
	font-size: @sapMFontMediumSize;
	color: @sapUiContentLabelColor;
}

.sapMQuickViewPage .sapMFlexItem:last-child {
	color: @sapUiContentIconColor;
}

.sapMQuickViewPage .sapUiIcon:focus,
html.sap-phone .sapMQuickViewPage .sapMLnk:focus,
html.sap-tablet .sapMQuickViewPage .sapMLnk:focus {
  outline: none;
}

html.sap-phone .sapMPanel .sapMQuickViewCard {
	overflow-y: scroll;
}

html.sap-tablet.sap-ios .sapMPanel .sapMQuickViewCard {
	-webkit-overflow-scrolling: auto;
}