/* SAP Hybris Marketing Landing Pages Runtime Styles: sapCp */ /* Base */ .sapCpRuntime { width: 100%; height: 100%; } .sapCpRuntime .sapCpBody { margin: 0; width: 100%; height: 100%; } /* Content Page */ .sapCpContentPage { box-sizing: border-box; width: 100%; } .sapCpContentPageLoading { opacity: 0; cursor: wait; } /* Layout */ .sapCpLayout { box-sizing: inherit; width: 100%; padding: 8px; } /* Widget */ .sapCpWidget { box-sizing: inherit; min-height: 30px; padding: 8px; } .sapCpContentPage .sapCpWidget.sapCpWidgetHidden { display: none; } .sapCpWidget ~ .sapCpWidget { margin-top: 8px; } .sapCpWidgetContentLeft { min-height: 1px; float: left; text-align: right; } .sapCpWidgetContentRight { min-height: 1px; text-align: left; vertical-align: top; } .sapCRLWidgetFixContent { clear: both; } .sapCpWidgetContentNoIndent { min-height: 1px; } .sapCpWidgetContentLeft .sapCpLabel { margin-top: 6px; margin-right: 10px; } .sapCpWidgetMandatoryMissing { background-color: lightcoral; } .sapCpWidgetInvalid { background-color: orange; } /* Button Widget */ .sapCpButtonWidget .sapCpButtonWidgetExtraText { display: block; padding-top: 5px; } .sapCpButtonWidget .sapCpMissingMandatoryFieldLabel { display: block; color: red; } .sapCpContentPage:not(.sapCpMissingMandatoryField) .sapCpButtonWidget .sapCpMissingMandatoryFieldLabel { display: none; } .sapCpButtonWidget .sapCpErrorMessageText { display: block; color: red; } .sapCpContentPage:not(.sapCpSubmitError) .sapCpButtonWidget .sapCpErrorMessageText { display: none; } .sapCpButtonWidget .sapCpSuccessMessageLabel { display: block; color: green; } .sapCpContentPage:not(.sapCpSubmitCompleted) .sapCpButtonWidget .sapCpSuccessMessageLabel { display: none; } .sapCpContentPage:not(.sapCpSubmitCompleted) .sapCpButtonWidget .sapCpButtonWidgetDownloadLink { display: none; } .sapCpButtonWidget .sapCpButtonWidgetDownloadLink:not(.sapCpButtonWidgetDownloadLinkVisible) { display: none; } .sapCpButtonWidget.sapCpButtonWidgetLoading button { cursor: wait; } /* Label */ .sapCpLabel { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; } .sapCpLabelRequiredBefore { padding-left: 10px; } .sapCpLabel:not(.sapCpLabelRequiredBefore):after { content: "*"; color: RoyalBlue; visibility: hidden; } .sapCpWidgetContentLeft .sapCpLabel:not(.sapCpLabelRequiredBefore):after { position: absolute; } .sapCpLabel:not(.sapCpLabelRequiredBefore).sapCpLabelRequired:after { visibility: visible; } .sapCpLabel.sapCpLabelRequiredBefore:before { content: "*"; color: RoyalBlue; visibility: hidden; position: absolute; left: 1px; top: -2px; } .sapCpLabel.sapCpLabelRequiredBefore.sapCpLabelRequired:before { visibility: visible; } .sapCpCheckBox ~ .sapCpLabel { margin-left: 2px; } /* Input */ .sapCpInput { font-size: inherit; font-family: inherit; padding: 4px 8px; text-overflow: ellipsis; } /* CheckBox */ .sapCpCheckBox { vertical-align: top; min-width: 20px; float: left; } .sapCpCheckBox input { font-size: inherit; font-family: inherit; } /* DropDown */ .sapCpDropDown { font-size: inherit; font-family: inherit; padding: 4px 8px; min-width: 215px; } .sapCpDropDown>option { color: black; } .sapCpDropDownPlaceholder { color: gray; } /* Date Picker */ .sapCpDatePicker option { color: black; } .sapCpDatePicker .sapCpDropDown~.sapCpDropDown { margin-left: 10px; } .sapCpDatePicker .sapCpDatePickerDay { min-width: 50px; width: 23%; max-width: 100px; } .sapCpInputWidget .sapCpDatePickerMonth { min-width: 100px; width: 43%; max-width: 200px; } .sapCpInputWidget .sapCpDatePickerYear { min-width: 50px; width: 23%; max-width: 100px; } /* Button */ .sapCpButton { font-size: inherit; font-family: inherit; padding: 15px 25px; /* SiS: adapt padding from 6px 10 px */ } /* For usage in landing Pages */ .sapCpContentPage { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 18px; /* SiS: increase from 16px */ color: grey; -webkit-font-smoothing: auto; } .sapCpContentPage *, .sapCpContentPage *:before, .sapCpContentPage *:after { box-sizing: inherit; } .sapCpWidget input[type=checkbox] { -webkit-appearance: checkbox; font-size: inherit; margin-top: 0px; } .sapCpCheckBox { line-height: 18px; } .sapCpInputWidget select { -webkit-appearance: menulist; background-image: none; height: 38px; font-family: inherit; font-size: inherit; color: inherit; width: 100%; /* SiS: do it full width instead of auto */ } .sapCpInputWidget .sapCpInput { font-family: inherit; font-size: inherit; width: 100%; /* SiS: do it full width instead of auto */ border: lightgrey solid 1px; height: 38px; } .sapCpLabel { font-family: inherit; font-weight: 400; font-size: inherit; color: inherit; line-height: 22px; } .sapCpButton { font-family: inherit; font-size: inherit; font-weight: 400; color: white; /* SiS: change from inherit to white */ background-color: #833177; /* SiS: add background color to STMN Green */ /* SiS: delete border-radius: 5px; */ border-style: solid; border-color: #833177; /* SiS: change color from lightgrey to STMN Green */ border-width: 1px; padding: 8px 20px; width: auto; cursor: pointer; /* SiS: show interaction to customers */ } /* SiS: add :hover to show interaction to customers */ .sapCpButton:hover { background-color: #69175f; border-color: #69175f; } /* Responsive layout */ @media screen and (min-width: 481px) { .sapCpLabel:not(.sapCpLabelRequiredBefore):after { right: 1px; top: -2px; } .sapCpLabel:not(.sapCpLabelRequiredBefore) { padding-right: 10px; } } @media screen and (max-width: 480px) { /* Widget */ .sapCpWidgetContent { width: 100% !important; text-align: left; } /* Input */ .sapCpWidgetContent .sapCpInput { width: 100%; } /* Text Area */ .sapCpWidgetContent .sapCpTextArea { width: 98%; } /* DropDown */ .sapCpWidgetContent .sapCpDropDown { width: 100%; } /* Date Picker */ .sapCpWidgetContent .sapCpDatePicker .sapCpDatePickerDay { width: 23%; } .sapCpWidgetContent .sapCpDatePicker .sapCpDatePickerMonth { width: 43%; } .sapCpWidgetContent .sapCpDatePicker .sapCpDatePickerYear { width: 23%; } .sapCpWidgetContentRight { padding-left: 0% !important; } }