Merge pull request #58 from GeorgiySergeev/basket-modal

basket modal ready
GeorgiySergeev · May 24, 2023 · 703960d · 703960d
2 parents ebec871 + bed0ec4
commit 703960d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 44 deletions.
diff --git a/src/css/basket-modal.css b/src/css/basket-modal.css
@@ -1,12 +1,8 @@
 .modal-basket {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
     width: 100%;
     height: 100%;
-    max-height: 426px;
     max-width: 335px;
+    max-height: 426px;
     padding: 20px;
 
     background-color: #fff;
@@ -15,25 +11,17 @@
 
     overflow-y: auto;
     transform: translate(-50%, -100%);
-    transition: opacity var(--animation), visibility var(--animation), transform var(--animation);
 }
 
 @media screen and (min-width:768px) {
     .modal-basket {
         max-width: 600px;
-        height: auto;
         max-height: none;
+        height: auto;
         padding: 40px;
     }
 }
 
-.modal-basket.active,
-.basket-overlay.active {
-    opacity: 1;
-    visibility: visible;
-
-}
-
 .modal-basket.active {
     transform: translate(-50%, -50%);
 }
@@ -49,7 +37,7 @@
     width: 24px;
     height: 24px;
 
-    color: var(--project-main-color);
+    color: var(--primary-bg-color);
     background-color: transparent;
     border: none;
     cursor: pointer;
@@ -87,7 +75,7 @@
     font-size: 28px;
     line-height: 1;
     letter-spacing: -0.04em;
-    color: var(--primary-bg-color);
+    color: var(--project-main-color);
     text-transform: uppercase;
     text-shadow: 0px 4px 70px rgba(0, 0, 0, 0.1);
 }

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -28,20 +28,6 @@ body {
 
 }
 :root {
-  /* font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #242424;
-  background-color: rgba(255, 255, 255, 0.87);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%; */
-
   --primary-bg-color: #ae1332;
 
   --btn-bg-color-norm: #a4cb66;
@@ -57,6 +43,7 @@ body {
   --primary-green: #a4cb66;
   --text-accent-color: #ffffff;
   --animation: 250ms ease-in-out;
+
 }
 
 .container {
@@ -66,7 +53,6 @@ body {
   margin-left: auto;
   margin-right: auto;
 
-  /* outline: 1px solid black; */
 }
 
 @media screen and (min-width: 375px) {
@@ -95,20 +81,17 @@ body {
   position: fixed;
   top: 0;
   left: 0;
+
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
   z-index: 20;
   transition: opacity var(--animation), visibility var(--animation);
 }
 
-
-
-
 /* Стили для модальных окон */
 
-.modal {
-
+.modal {  
   /* Скрываем окна  */
 
   opacity: 0;
@@ -119,15 +102,9 @@ body {
   position: fixed;
   top: 50%;
   left: 50%;
-  /*  */
-  z-index: 30; /* Должен быть выше чем у подложки*/
+
+  z-index: 30;
 
-  /*  Побочные стили   */
-  /* box-shadow: 0 3px 10px -.5px rgba(0, 0, 0, .2); 
-  text-align: center;
-  padding: 30px;
-  border-radius: 3px;
-  background-color: #fff; */
   transition: opacity var(--animation), visibility var(--animation), transform var(--animation);
 }