корректировки

Maria0701 · Jun 30, 2019 · 986f3de · 986f3de
1 parent f3e22de
commit 986f3de
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 45 deletions.
diff --git a/css/style.css b/css/style.css
@@ -598,24 +598,24 @@ img {
 	border-color: rgb(154, 154, 154);
 }
 
-.modal-feedback textarea:hover,
+.modal-entrance input[type="password"]:focus,
+.modal-entrance input[type="email"]:focus,
+.modal-search input[type="search"]:focus,
+.modal-feedback input[type="text"]:focus,
+.modal-feedback input[type="email"]:focus,
 .modal-feedback textarea:focus,
-.modal-feedback textarea:focus-within {
-	margin-bottom: -2px;
-}
-
-.modal-entrance input[type="password"]:focus-within,
-.modal-entrance input[type="email"]:focus-within,
-.modal-search input[type="search"]:focus-within,
-.modal-feedback input[type="text"]:focus-within,
-.modal-feedback input[type="email"]:focus-within,
-.modal-feedback textarea:focus-within,
-.subscription-form input[type="email"]:focus-within {
+.subscription-form input[type="email"]:focus {
 	border-width: 2px;
-	border-color: rgb(46, 136, 228, 0.5);
+	border-color: rgba(46, 136, 228, 0.5);
 	outline: none;
 }
 
+.modal-feedback textarea:hover,
+.modal-feedback textarea:focus {
+	padding-top: 13px;
+	padding-bottom: 17px;
+}
+
 .modal-feedback {
 	position: fixed;
 	top: 50%;
@@ -1753,7 +1753,7 @@ img {
 	margin-right: 15px;
 	margin-bottom: 0;
 	padding-top: 7px;
-	padding-right: 16px;
+	padding-right: 17px;
 	padding-bottom: 7px;
 	padding-left: 16px;
 	background-color: rgba(255, 255, 255, 0.2);
@@ -1838,7 +1838,7 @@ img {
 }
 
 .shop-filter__block.checkboxes label {
-	margin-right: 16px;
+	margin-right: 17px;
 }
 
 .shop-filter__block label:last-child {
@@ -2065,53 +2065,53 @@ img {
 .modal-error {
 	-webkit-animation-name: modalError;
 	animation-name: modalError;
-	-webkit-animation-duration: 1s;
-	animation-duration: 1s;
+	-webkit-animation-duration: 0.5s;
+	animation-duration: 0.5s;
 }
 
 @-webkit-keyframes modalError {
 	0% {
-		-webkit-transform: translateX(-10px);
-		-ms-transform: translateX(-10px);
-		transform: translateX(-10px);
+		-webkit-transform: translate(-10px, -50%);
+		-ms-transform: translate(-10px, -50%);
+		transform: translate(-10px, -50%);
 	}
 	25% {
-		-webkit-transform: translateX(10px);
-		-ms-transform: translateX(10px);
-		transform: translateX(10px);
+		-webkit-transform: translate(10px, -50%);
+		-ms-transform: translate(10px, -50%);
+		transform: translate(10px, -50%);
 	}
 	75% {
-		-webkit-transform: translateX(-10px);
-		-ms-transform: translateX(-10px);
-		transform: translateX(-10px);
+		-webkit-transform: translate(-10px, -50%);
+		-ms-transform: translate(-10px, -50%);
+		transform: translate(-10px, -50%);
 	}
 	100% {
-		-webkit-transform: translateX(10px);
-		-ms-transform: translateX(10px);
-		transform: translateX(10px);
+		-webkit-transform: translate(10px, -50%);
+		-ms-transform: translate(10px, -50%);
+		transform: translate(10px, -50%);
 	}
 }
 
 @keyframes modalError {
 	0% {
-		-webkit-transform: translateX(-10px);
-		-ms-transform: translateX(-10px);
-		transform: translateX(-10px);
+		-webkit-transform: translate(-10px, -50%);
+		-ms-transform: translate(-10px, -50%);
+		transform: translate(-10px, -50%);
 	}
 	25% {
-		-webkit-transform: translateX(10px);
-		-ms-transform: translateX(10px);
-		transform: translateX(10px);
+		-webkit-transform: translate(10px, -50%);
+		-ms-transform: translate(10px, -50%);
+		transform: translate(10px, -50%);
 	}
 	75% {
-		-webkit-transform: translateX(-10px);
-		-ms-transform: translateX(-10px);
-		transform: translateX(-10px);
+		-webkit-transform: translate(-10px, -50%);
+		-ms-transform: translate(-10px, -50%);
+		transform: translate(-10px, -50%);
 	}
 	100% {
-		-webkit-transform: translateX(10px);
-		-ms-transform: translateX(10px);
-		transform: translateX(10px);
+		-webkit-transform: translate(10px, -50%);
+		-ms-transform: translate(10px, -50%);
+		transform: translate(10px, -50%);
 	}
 }
 

diff --git a/index.html b/index.html
@@ -317,12 +317,11 @@ <h2>Мы обязательно Вам ответим</h2>
             <span>Как Вас зовут?</span>
             </label>
             <label >
-            <input type="email" id="feedback_email" name="email" placeholder=""  required/>
+            <input type="email" id="feedback_email" name="email" placeholder="" required />
             <span>Ваша почта для ответа</span>
             </label>
             <label>
-            <textarea name="message" rows="5" cols="30" id="feedback_message" placeholder=""  required>
-            </textarea>
+            <textarea name="message" rows="5" cols="30" id="feedback_message" placeholder=""  required ></textarea>
             <span>Напишите что-нибудь</span>
             </label>
             <button type="submit" class="btn btn-small">Отправить</button>

diff --git a/js/popup.js b/js/popup.js
@@ -33,11 +33,14 @@ close.addEventListener("click", function (evt) {
 overlayClose.addEventListener("click", function(evt) {
   evt.preventDefault();
   popup.classList.remove("modal-show");
+  popup.classList.remove("modal-error");
 })
 
 form.addEventListener("submit", function (evt) {
-  if (!userName || !userEmail || !userMessage) {
+    if (!userName.value || !userEmail.value || !userMessage.value) {
         evt.preventDefault();
+        popup.classList.remove("modal-error");
+        popup.offsetWidth = popup.offsetWidth;
         popup.classList.add("modal-error");
       } else {
       if (isStorageSupport) {
@@ -51,6 +54,7 @@ form.addEventListener("submit", function (evt) {
       if (popup.classList.contains("modal-show")) {
         evt.preventDefault();
         popup.classList.remove("modal-show");
+        popup.classList.remove("modal-error");
       }
     }
   })