fix: migrate contents of SidePanelContext.css to module file

sumup-oss · Mar 27, 2024 · 48ae27f · 48ae27f
1 parent c04e2e8
commit 48ae27f
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css b/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css
@@ -1,3 +1,39 @@
+:root {
+  --side-panel-width: 400px;
+}
+
+/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
+.cui-side-panel-portal {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+}
+
+@media (max-width: 767px) {
+  /* Remove scroll on the body when react-modal is open */
+  .cui-side-panel-open {
+    height: 100%;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: auto;
+  }
+
+  /* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
+  .cui-side-panel-portal {
+    top: 0;
+    left: 0;
+    z-index: var(--cui-z-index-modal);
+  }
+}
+
+/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
+@media (min-width: 768px) {
+  .cui-side-panel-portal {
+    top: var(--top-navigation-height, 0);
+    z-index: var(--cui-z-index-absolute);
+    width: var(--side-panel-width);
+  }
+}
+
 .base {
   width: 100%;
   min-height: calc(100vh - var(--top-navigation-height));