diff --git a/css/style.css b/css/style.css index 7c9f1cf..52d8de6 100644 --- 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 index 95a5bce..33723de 100644 --- a/index.html +++ b/index.html @@ -317,12 +317,11 @@

Мы обязательно Вам ответим

Как Вас зовут? diff --git a/js/popup.js b/js/popup.js index d13ae04..2cf2f72 100644 --- 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"); } } })