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

OpenUI5 UI Library sap.m

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

.sapMPanel {
	overflow: hidden;
	box-sizing: border-box;
	// The following needed for calculation of height for content child
	position: relative;
}

.sapMPanelHdr {
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	height: 3rem;
	line-height: 3rem;
	padding: 0 1rem;
	margin: 0;

	/*
	* To improve readability Mobile Safari automatically increases
	* the size of small text so let's disable this
	*/
	-webkit-text-size-adjust: none;

	font-weight: @sapUiFontHeaderWeight;
	font-size: @sapMFontHeader4Size;
	font-family: @sapUiFontHeaderFamily;
	color: @sapUiGroupTitleTextColor;
	background-color: @sapUiGroupTitleBackground;
}

.sapMPanelContent {
	padding: 0.625rem 1rem 1.375rem 1rem;
	box-sizing: border-box;
	overflow: auto;
	white-space: normal;

	/* This is needed in order to remove the additional outline added by tabindex=-1*/
	&:focus {
		outline: none;
	}
}

.sapMPanelExpandablePart {
	clear: both;
}

.sapMPanelExpandableIcon {
	position: absolute;
	width: 1.5rem;
	line-height: 1.5rem;
	font-size: 1rem;
	margin: 0 0.75rem;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: @sapUiContentIconColor;
}

.sapMPanelExpandableIconExpanded {
	display: inline-block;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
}

html[data-sap-ui-animation='on'] {
	.sapMPanelExpandableIcon {
		/* 400ms is standard jQuery duration */
		-webkit-transition: -webkit-transform 0.4s ease-out;
		transition: transform 0.4s ease-out;
	}

	.sapMPanelExpandableIconExpanded {
		/* 400ms is standard jQuery duration */
		-webkit-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;
	}
}

.sapMPanelWrappingDiv,
.sapMPanelWrappingDivTb {
	position: relative;
}

/* if Panel is expandable, we do not wish toolbar to come with own border */
.sapMPanelWrappingDivTb > .sapMTB {
	border-width: 0;
}

.sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded {
	border-bottom-width: 0;
}

html.sap-tablet .sapUiFioriObjectPage > section > .sapMPanel,
html.sap-desktop .sapUiFioriObjectPage > section > .sapMPanel {
	margin: 1rem 0;
	padding: 0 1rem;
	box-sizing: border-box;
}

.sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
.sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
	padding-left: 0;
	margin-left: 3rem;

  	>:first-child {
	  margin-left: 0;
	}
}

/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
.sapUiContainerContentPadding(~".sapMPanel", ~"> .sapMPanelContent");

/* TODO remove after 1.62 version */
/* workaround for drawing issue in IE - ensures that the content will be redrawn */
html[data-sap-ui-animation='on'][data-sap-ui-browser^="ie"] .sapMPanelContent {
	transform: translate(0, 0);
}

/* workaround for drawing issue in Edge - ensures that the content will be redrawn */
html[data-sap-ui-animation='on'][data-sap-ui-browser^="ed"] .sapMPanelContent {
	transform: translate(0, 0);
}