modal norma scroll on backdrop

Elizabethhub · Mar 26, 2024 · bf3b8fe · bf3b8fe
1 parent b2fa2f4
commit bf3b8fe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/components/DailyNorma/DailyEdit.styled.js b/src/components/DailyNorma/DailyEdit.styled.js
@@ -57,6 +57,7 @@ export const DailyEditButton = styled.button`
   position: relative;
   z-index: 1;
   outline: transparent;
+  transition: all 0.5s ease;
   &:hover {
     transform: scale(1.05);
   }

diff --git a/src/components/ModalDailyNorma/ModalDailyNorma.styled.js b/src/components/ModalDailyNorma/ModalDailyNorma.styled.js
@@ -3,16 +3,22 @@ import styled from 'styled-components';
 export const StyledBackdrop = styled.div`
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
-  background: var(--modal-backdrop);
-  z-index: 10;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
+  align-items: flex-start;
+  background: var(--modal-backdrop);
+  z-index: 10;
+  padding: 40px 20px;
+  overflow: auto;
+  @media only screen and (min-width: 768px) {
+    padding: 40px 32px;
+  }
+  @media only screen and (min-width: 1440px) {
+    align-items: center;
+  }
 `;
 
 export const StyledWrapper = styled.form`
@@ -27,24 +33,21 @@ export const StyledWrapper = styled.form`
   background-size: 130% 130%;
   background-position: center;
   width: 280px;
-  padding: 24px 12px 24px 12px;
+  padding: 24px 12px;
   display: flex;
   flex-direction: column;
   background: ${(props) => props.theme.modalCantainerBackground};
-  overflow-y: auto;
-  max-height: 90vh;
 
   @media only screen and (min-width: 768px) {
     width: 704px;
-    padding: 32px 24px 32px 24px;
+    padding: 32px 24px;
     .formula {
       display: inline-block;
       margin-right: 24px;
     }
   }
   @media only screen and (min-width: 1280px) {
     width: 592px;
-    padding: 32px 24px 32px 24px;
   }
 
   h2 {