consolidate shared styles

CMS-Enterprise · Oct 11, 2024 · 31d07b6 · 31d07b6
1 parent 1f3f638
commit 31d07b6
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 33 deletions.
diff --git a/src/components/Modal/index.scss b/src/components/Modal/index.scss
@@ -1,32 +1,18 @@
 @use 'viewports' as *;
 
 .mint-modal {
-  &__overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    z-index: 400;
-  }
-
   &__content {
-    position: absolute;
-    width: 100%;
     height: 100%;
-    background-color: #fff;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 1;
     font-size: 1.375em;
     line-height: 1.6em;
     border-radius: .5rem;
+    font-size: 1.375em;
 
     @media screen and (min-width: $tablet) {
-      width: 668px;
-      height: auto;
+      width: 668px !important;
     }
 
     @media screen and (max-width: $tablet) {

diff --git a/src/components/Sidepanel/index.scss b/src/components/Sidepanel/index.scss
@@ -2,28 +2,13 @@
 @use 'viewports' as *;
 
 .mint-sidepanel {
-  &__overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    z-index: 400;
-  }
-
   &__content {
-    position: absolute;
-    width: 100%;
     height: auto;
     min-height: 100%;
-    background-color: #fff;
     right: 0;
-    z-index: 1;
-    line-height: 1.6em;
 
     @media screen and (min-width: $desktop) {
-      width: 70%;
+      width: 70% !important;
     }
   }
 

diff --git a/src/components/Sidepanel/index.tsx b/src/components/Sidepanel/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactModal from 'react-modal';
 import { Icon } from '@trussworks/react-uswds';
+import classNames from 'classnames';
 import noScroll from 'no-scroll';
 
 import './index.scss';
@@ -37,7 +38,7 @@ const Sidepanel = ({
     <ReactModal
       isOpen={isOpen}
       overlayClassName="mint-sidepanel__overlay overflow-y-scroll"
-      className={`mint-sidepanel__content ${classname}`}
+      className={classNames('mint-sidepanel__content', classname)}
       onAfterOpen={handleOpenModal}
       onAfterClose={noScroll.off}
       onRequestClose={closeModal}

diff --git a/src/stylesheets/custom.scss b/src/stylesheets/custom.scss
@@ -252,3 +252,24 @@
     width: 50%;
   }
 }
+
+// Modal and Sidepanel shared styles
+.mint-modal, .mint-sidepanel {
+  &__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 400;
+  }
+
+  &__content {
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    z-index: 1;
+    line-height: 1.6em;
+  }
+}