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

OpenUI5 UI Library sap.m

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

.sapMActionSheetDialog.sapMDialog {
	top: auto !important; /* We need to overwrite the inline top style */
	bottom: 0;
	width: 100%;
	max-width: 20rem;
	border-radius: 0.25rem 0.25rem 0 0;

	&.sapMDialogPhone {
		overflow: visible;
	}
}

.sapMActionSheet:focus {
	outline: none;
}

.sapMActionSheetDialog .sapMDialogScroll {
	display: block;
}

.sapMActionSheetButton > .sapMBtnInner {
	text-align: start;
}

.sapMActionSheetButton.sapMBtn:not(.sapMActionSheetCancelButton) > .sapMBtnInner {
	justify-content: flex-start;
}

.sapMActionSheetDialogWithTitle .sapMBarMiddle .sapMBarPH {
	/* The left/right padding should be 1rem, but there is already 0.25rem right/left padding from the Dialog title */
	padding: 0 0.75rem 0.5rem;
	justify-content: flex-start;
}

/* ====== BEGIN ====== */
/*Style for ActionSheet shown as a dialog sliding in from bottom*/
/* ====== ====== ===== */

.sapMDialog.sapMActionSheetDialog {
	background-color: transparent;
	box-shadow: none;
	border: none;
}

.sapMDialog.sapMActionSheetDialog > section {
	background-color: var(--sapGroup_ContentBackground);
	border-radius: 0.25rem 0.25rem 0 0;
}

.sapMActionSheetDialog .sapMActionSheetButton {
	width: 100%;
}

.sapMActionSheetDialog .sapMActionSheetButton.sapMActionSheetCancelButton > .sapMBtnInner {
	text-align: center;
}

.sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
	color: contrast(fade(@sapUiBlockLayerBackground, 60), @sapUiGroupTitleTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
	font-size: @sapMFontMediumSize;
}

.sapMDialog.sapMActionSheetDialog > .sapMDialogSection {
	box-shadow: @sapUiShadowLevel1;
}

.sapMDialog.sapMActionSheetDialog > section {
	padding: 0.25rem 0.5rem;
}

.sapMDialog.sapMActionSheetDialog.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
	background: transparent;
	box-shadow: none;
}

/* ====== BEGIN ====== */
/*Style for ActionSheet shown as a Popover*/
/* ====== ====== ===== */
.sapMActionSheetPopover.sapMPopover {
	box-shadow: @sapUiShadowLevel1;
}

.sapMActionSheetPopover .sapMActionSheetButton {
	display: block;
	width: 100%;
}

.sapUiSizeCompact {

	.sapMActionSheetPopover.sapMPopover {

		.sapMPopoverCont {
			max-height: calc(~'100% - 0.375rem');
		}

		.sapMActionSheet {
			padding: 0.1875rem 0.375rem;
		}

		.sapMActionSheet .sapMActionSheetButton .sapMBtnInner.sapMBtnIconFirst {
			padding-left: 0.4375rem;
			padding-right: 0.4375rem;
		}
	}
}

.sapMActionSheetPopover.sapMPopover {

	.sapMPopoverCont {
		max-height: calc(~'100% - 0.5rem');
	}

	.sapMActionSheet {
		padding: 0.25rem 0.5rem;
	}
}

/* ====== END ====== */
/*Style for ActionSheet shown as a Popover*/
/* ====== ====== ===== */