diff --git a/packages/playground/webapp/css/style.css b/packages/playground/webapp/css/style.css
index bbac81a5f452..f2c580dc9ab9 100644
--- a/packages/playground/webapp/css/style.css
+++ b/packages/playground/webapp/css/style.css
@@ -56,6 +56,11 @@
background-color: #fff !important;
}
+/* Fix flickering behaviour of Action list items */
+.side-links .sapMLIB {
+ padding: 0;
+}
+
.hcb .side-links {
background-color: #000 !important;
color: #fff !important;
@@ -87,7 +92,7 @@ html.sap-desktop .hcb .side-links .links-list .sapMList .sapMLIB.sapMALI:not(.sa
.side-links .links-list .sapMALIText {
text-align: left;
- padding-left: 2rem;
+ padding-left: 2rem !important;
}
.side-links .links-list .sapMALIText:not(.sapMLIBActive){
@@ -256,7 +261,7 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
}
.switch-container {
- background-color: #222222 !important;
+ background-color: #222 !important;
height: 14.19rem !important;
padding: 0 3rem;
}
@@ -269,35 +274,32 @@ html.sap-desktop .sapContrast .sapMLnk:focus:not(.sapMLnkDsbl) {
color: white !important;
}
-.switch-container .sapMInputBaseContentWrapper.sapMInputBaseHasEndIcons, .sapMInputBaseContentWrapper.sapMInputBaseHasEndIcons {
- background-color: #222;
- border-radius: 2px;
- border-color: #fff;
- border: 1px solid #fff;
+
+/* Change Select default styles */
+.switch-container .select-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow {
+ background-color: #000;
}
-.switch-container .sapMInputBaseContentWrapper.sapMInputBaseHasEndIcons:hover,
-.switch-container .sapMInputBaseIconPressed.sapMInputBaseIcon,
-.switch-container .sapMInputBaseIconPressed .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {
- background-color: #000 !important;
- border-color: #fff !important;
+.switch-container .select-width.sapMSlt.sapMSltDefault.sapMSltHoverable.sapMSltMinWidth.sapMSltWithArrow:hover,
+.switch-container .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
+ border-color: #fff;
}
-.switch-container .sapMComboBoxInner.sapMInputBaseInner {
- color: #fff !important;
+.switch-container .sapMSltArrow {
+ color: #fff;
+ background-color: #000;
}
-.switch-container .sapMComboBox .sapMInputBaseIcon.sapUiIcon.sapUiIconMirrorInRTL.sapUiIconPointer {
- color: #fff !important;
+.switch-container .sapMSelectListItemText {
+ color: #fff;
}
-.switch-container .sapMInputBaseIcon:active,
-.switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon,
-html.sap-desktop .switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon:hover{
- background-color: transparent;
+.switch-container .sapMSltPressed > .sapMSltArrow {
+ background-color: #222;
}
+/* End of Select restyling */
-/* Override ComboBox Suggestions color */
+/* Override Select Suggestions color */
/* NB! Will affect all checkboxes! */
.sapMSelectListItem {
background-color: #000 !important;
@@ -314,7 +316,7 @@ html.sap-desktop .switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon:
display: flex !important;
align-items: center;
justify-content: center;
- background-color: #222222 !important;
+ background-color: #222 !important;
}
.settings-button > span {
@@ -332,17 +334,12 @@ html.sap-desktop .switch-container .sapMInputBaseIconPressed .sapMInputBaseIcon:
color: #fff !important;
}
-.settings-button .sapMBtnActive {
- /* background-color: #fff !important;
- color: #000 !important; */
-}
-
.settings-buttons-wrapper .sapMBtnContent {
color: #fff !important;
}
-.combobox-width {
- width: 20rem;
+.select-width {
+ width: 20rem !important;
}
.ui5-logo {
diff --git a/packages/playground/webapp/view/Main.view.xml b/packages/playground/webapp/view/Main.view.xml
index 66471cf04840..be281a2a9543 100644
--- a/packages/playground/webapp/view/Main.view.xml
+++ b/packages/playground/webapp/view/Main.view.xml
@@ -41,27 +41,27 @@
-
+
+
-
+
+
-
+
+