@openui5/sap.m/src/sap/m/themes/sap_hcb/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: @sapUiGroupContentBackground;
	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*/
/* ====== ====== ===== */